दस्तावेज़ पिक्चर में पिक्चर एपीआई के हाल ही के परिचय (और यहां तक कि पहले भी) के साथ, वेब डेवलपर की दिलचस्पी अपने-आप 'पिक्चर में पिक्चर' विंडो खोलने की सुविधा में बढ़ती जा रही है, जब उपयोगकर्ता अपने मौजूदा टैब से फ़ोकस स्विच करेगा या नहीं. यह सुविधा वीडियो कॉन्फ़्रेंसिंग वाले वेब ऐप्लिकेशन के लिए खास तौर पर काम की है. इसकी मदद से प्रज़ेंटर, दस्तावेज़ प्रज़ेंट करते समय या दूसरे टैब या विंडो का इस्तेमाल करते समय, रीयल टाइम में मीटिंग में हिस्सा लेने वाले लोगों को देख सकते हैं और उनसे बातचीत कर सकते हैं.
अपने-आप 'पिक्चर में पिक्चर' मोड में जाएं
वीडियो कॉन्फ़्रेंसिंग के इन इस्तेमाल के उदाहरणों को सपोर्ट करने के लिए, Chrome 120 से डेस्कटॉप वेब ऐप्लिकेशन कुछ पाबंदियों के साथ, अपने-आप 'पिक्चर में पिक्चर' मोड में जा सकते हैं, ताकि इस्तेमाल करने वालों को बेहतर अनुभव मिल सके. किसी वेब ऐप्लिकेशन पर, अपने-आप पिक्चर में पिक्चर मोड की सुविधा सिर्फ़ तब काम करती है, जब वह नीचे दी गई सभी शर्तों को पूरा करता हो:
इसने
"enterpictureinpicture"कार्रवाई के लिए, एक मीडिया सेशन ऐक्शन हैंडलर रजिस्टर किया है.यह getUserMedia के ज़रिए सक्रिय रूप से कैमरा या माइक्रोफ़ोन कैप्चर कर रहा है.
इसके बाद, उपयोगकर्ता डिफ़ॉल्ट रूप से चालू ब्राउज़र सेटिंग के ज़रिए, "अपने-आप पिक्चर में पिक्चर" सुविधा की अनुमति देता है.
किसी वेब ऐप्लिकेशन को मंज़ूरी मिलने पर, "enterpictureinpicture" कार्रवाई के लिए मीडिया सेशन ऐक्शन हैंडलर कॉलबैक फ़ंक्शन तब चालू होता है, जब उपयोगकर्ता फ़ोकस को किसी दूसरे टैब पर स्विच करता है. इससे उपयोगकर्ता जेस्चर के बिना, पिक्चर में पिक्चर विंडो को खोला जा सकता है.
वेब डेवलपर किसी एचटीएमएल <video> एलिमेंट से पिक्चर में पिक्चर विंडो खोलने के लिए, <video> के लिए पिक्चर में पिक्चर एपीआई का इस्तेमाल कर सकते हैं. इसके अलावा, आर्बिट्रेरी एचटीएमएल कॉन्टेंट डालने के लिए, हमेशा सबसे ऊपर बनी विंडो खोलने के लिए, Document पिक्चर में पिक्चर एपीआई का इस्तेमाल कर सकते हैं. पिक्चर में पिक्चर विंडो को खोलने पर फ़ोकस नहीं होता है. जब पेज दिखने लगता है, तब वह अपने-आप बंद हो जाती है.
यहां दिए गए उदाहरण में, उपयोगकर्ता के कैमरे को ऐक्सेस करने का अनुरोध करने का तरीका बताया गया है. इसके बाद, पिक्चर में पिक्चर विंडो को खोलने वाले कॉलबैक फ़ंक्शन की मदद से, "enterpictureinpicture" कार्रवाई के लिए सुरक्षित तरीके से मीडिया सेशन ऐक्शन हैंडलर रजिस्टर करें. इस विंडो में, उपयोगकर्ता के कैमरे से वीडियो स्ट्रीम होने की जानकारी होती है, जिसमें <video> के लिए पिक्चर में पिक्चर एपीआई की सुविधा होती है.
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 ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) में मीडिया कंट्रोल का इस्तेमाल करके, पिक्चर में पिक्चर मोड में जाना चाहता हो.
अगर कोई एचटीएमएल <video> एलिमेंट न चल रहा हो, सिर्फ़ ऑडियो हो, तो "enterpictureinpicture" के लिए मीडिया सेशन ऐक्शन हैंडलर को रजिस्टर करने पर, ब्राउज़र को पता चलता है कि वेब ऐप्लिकेशन इस समस्या को कैसे मैनेज करता है. साथ ही, वह पिक्चर में पिक्चर विंडो को ही खोल देगा.
यह तब भी काम आता है, जब वेब ऐप्लिकेशन ब्राउज़र को <video> के लिए पिक्चर में पिक्चर एपीआई से हैंडल करने देने के बजाय, पिक्चर में पिक्चर विंडो खोलने के लिए डॉक्यूमेंट पिक्चर-इन-पिक्चर एपीआई का इस्तेमाल करना चाहता है.
इस उदाहरण में, "enterpictureinpicture" कार्रवाई के लिए, मीडिया सेशन ऐक्शन हैंडलर को सुरक्षित तरीके से रजिस्टर करने का तरीका बताया गया है. जब उपयोगकर्ता, Chrome ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) में मीडिया कंट्रोल का इस्तेमाल करके, 'पिक्चर में पिक्चर' मोड में जाता है, तो कॉलबैक फ़ंक्शन, 'पिक्चर में पिक्चर' विंडो को दस्तावेज़ में पिक्चर में पिक्चर विंडो के साथ खोलता है.
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.");
}
दस्तावेज़ पिक्चर में पिक्चर एपीआई VideoJS प्लेयर डेमो या वीडियो मीडिया सेशन सैंपल आज़माएं.
दिलचस्पी दिखाएं और सुझाव/राय दें या शिकायत करें
अगर आपका कोई सुझाव, राय या शिकायत है या आपको कोई समस्या आती है, तो crbug.com पर उन्हें शेयर करें.
रिसॉर्स
लोगों का आभार
इन समीक्षाओं के लिए टॉमी स्टीलल, रायन फ़्लोरेस, शिमी रहीम, फ़्रैंक लिबराटो, और रेचल ऐंड्रू का धन्यवाद.