ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই (এবং এর আগেও ) সাম্প্রতিক প্রবর্তনের সাথে সাথে, ওয়েব ডেভেলপাররা যখন ব্যবহারকারী তাদের বর্তমান ট্যাব থেকে ফোকাস পরিবর্তন করে তখন স্বয়ংক্রিয়ভাবে একটি পিকচার-ইন-পিকচার উইন্ডো খুলতে সক্ষম হতে আগ্রহী হচ্ছে। এটি ভিডিও কনফারেন্সিং ওয়েব অ্যাপগুলির জন্য বিশেষভাবে উপযোগী, যেখানে এটি উপস্থাপকদের একটি নথি উপস্থাপন করার সময় বা অন্যান্য ট্যাব বা উইন্ডো ব্যবহার করার সময় বাস্তব সময়ে অংশগ্রহণকারীদের দেখতে এবং ইন্টারঅ্যাক্ট করতে দেয়৷
স্বয়ংক্রিয়ভাবে ছবিতে ছবি লিখুন
এই ভিডিও কনফারেন্সিং ব্যবহারের ক্ষেত্রে সমর্থন করার জন্য, Chrome 120 থেকে ডেস্কটপ ওয়েব অ্যাপগুলি একটি ইতিবাচক ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে কয়েকটি বিধিনিষেধ সহ স্বয়ংক্রিয়ভাবে পিকচার-ইন-পিকচারে প্রবেশ করতে পারে। একটি ওয়েব অ্যাপ শুধুমাত্র স্বয়ংক্রিয় ছবি-মধ্য-ছবির জন্য যোগ্য যদি এটি নিম্নলিখিত সমস্ত শর্ত পূরণ করে:
এটি
"enterpictureinpicture"অ্যাকশনের জন্য একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধিত করেছে।এটি getUserMedia এর মাধ্যমে সক্রিয়ভাবে ক্যামেরা বা মাইক্রোফোন ক্যাপচার করছে।
ব্যবহারকারী ডিফল্টরূপে সক্রিয় একটি ব্রাউজার সেটিং এর মাধ্যমে "স্বয়ংক্রিয় ছবি-ইন-ছবি" এর অনুমতি দেয়।
যখন একটি ওয়েব অ্যাপ যোগ্য হয়, তখন "enterpictureinpicture" অ্যাকশনের জন্য মিডিয়া সেশন অ্যাকশন হ্যান্ডলার কলব্যাক ফাংশনটি ফায়ার করা হয় যখন ব্যবহারকারী অন্য ট্যাবে ফোকাস স্যুইচ করে, এটি ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই একটি ছবি-ইন-ছবি উইন্ডো খুলতে দেয়।
ওয়েব ডেভেলপাররা হয় একটি HTML <ভিডিও> এলিমেন্ট থেকে পিকচার-ইন-পিকচার উইন্ডো খুলতে <ভিডিও>-এর জন্য পিকচার-ইন-পিকচার এপিআই ব্যবহার করতে পারেন, অথবা সর্বদা-অন-টপ খুলতে ডকুমেন্ট পিকচার-ইন-পিকচার API ব্যবহার করতে পারেন। নির্বিচারে এইচটিএমএল বিষয়বস্তু দিয়ে পপুলেট করার জন্য উইন্ডো। পিকচার-ইন-পিকচার উইন্ডো খোলার সময় ফোকাস করা হয় না এবং পৃষ্ঠার দৃশ্যমানতা আবার দৃশ্যমান হলে স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
নিম্নলিখিত উদাহরণ আপনাকে দেখায় কিভাবে ব্যবহারকারীর ক্যামেরা অ্যাক্সেসের অনুরোধ করতে হয়। তারপর, একটি কলব্যাক ফাংশনের সাথে "enterpictureinpicture" অ্যাকশনের জন্য নিরাপদে একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধন করুন যা একটি পিকচার-ইন-পিকচার উইন্ডো খোলে৷ এই উইন্ডোটিতে <ভিডিও>-এর জন্য পিকচার-ইন-পিকচার API সহ ব্যবহারকারীর ক্যামেরা ভিডিও স্ট্রীম রয়েছে।
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ভিডিও কনফারেন্সিং মিডিয়া সেশন নমুনা চেষ্টা করুন.
ব্রাউজার মিডিয়া কন্ট্রোল থেকে পিকচার-ইন-পিকচার লিখুন
"enterpictureinpicture" মিডিয়া সেশন অ্যাকশনটিও উপযোগী যখন ব্যবহারকারী Chrome ব্রাউজার UI-তে মিডিয়া নিয়ন্ত্রণ ব্যবহার করে ছবি-ইন-ছবিতে প্রবেশ করতে চান।
যখন কোনও HTML <video> উপাদান নেই কিন্তু শুধুমাত্র অডিও চলছে, "enterpictureinpicture" এর জন্য মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধন করা ব্রাউজারকে বলে যে ওয়েব অ্যাপটি কীভাবে এটি পরিচালনা করতে হয় তা জানে এবং নিজেই একটি ছবি-ইন-পিকচার উইন্ডো খোলার যত্ন নেবে। .
যখন ওয়েব অ্যাপটি <ভিডিও>-এর জন্য পিকচার -ইন-পিকচার API দিয়ে ব্রাউজারকে পরিচালনা করার পরিবর্তে একটি পিকচার-ইন-পিকচার উইন্ডো খুলতে ডকুমেন্ট পিকচার -ইন-পিকচার API ব্যবহার করতে চায় তখনও এটি কার্যকর।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে নিরাপদে "enterpictureinpicture" অ্যাকশনের জন্য একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধন করতে হয়। কলব্যাক ফাংশনটি ডকুমেন্ট পিকচার-ইন-পিকচার API সহ একটি পিকচার-ইন-পিকচার উইন্ডো খোলে যখন ব্যবহারকারী Chrome ব্রাউজার UI-তে মিডিয়া কন্ট্রোল ব্যবহার করে পিকচার-ইন-পিকচারে প্রবেশ করে।
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ডকুমেন্ট পিকচার-ইন-পিকচার API VideoJS প্লেয়ার ডেমো বা ভিডিও মিডিয়া সেশন নমুনা চেষ্টা করুন।
জড়িত এবং মতামত শেয়ার করুন
আপনার মতামত থাকলে বা কোনো সমস্যার সম্মুখীন হলে, আপনি সেগুলি crbug.com- এ শেয়ার করতে পারেন।
সম্পদ
স্বীকৃতি
টমি স্টিমেল, রায়ান ফ্লোরেস, শিমি রহিম, ফ্রাঙ্ক লিবারতো এবং রাচেল অ্যান্ড্রুকে তাদের পর্যালোচনার জন্য ধন্যবাদ।
আনস্প্ল্যাশে পাইন ওয়াটের নায়কের ছবি।