दस्तावेज़ पिक्चर में पिक्चर एपीआई (और इससे पहले तक) के हाल ही में पेश किए गए वेब डेवलपर की दिलचस्पी तब बढ़ी है, जब वे अपने मौजूदा टैब से फ़ोकस बदलने पर 'पिक्चर में पिक्चर' विंडो को अपने-आप खोलने में दिलचस्पी दिखा रहे हैं. यह सुविधा वीडियो कॉन्फ़्रेंसिंग के वेब ऐप्लिकेशन के लिए बहुत मददगार है. यहां प्रज़ेंटर, दस्तावेज़ प्रज़ेंट करते समय या दूसरे टैब या विंडो का इस्तेमाल करके, मीटिंग में हिस्सा लेने वाले लोगों को रीयल टाइम में देख सकते हैं और उनसे इंटरैक्ट कर सकते हैं.
अपने-आप 'पिक्चर में पिक्चर' मोड में जाने की सेटिंग
वीडियो कॉन्फ़्रेंसिंग के इन इस्तेमाल के उदाहरणों के लिए, Chrome 120 के डेस्कटॉप वेब ऐप्लिकेशन, अपने-आप पिक्चर में पिक्चर मोड में स्विच हो सकते हैं. हालांकि, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, कुछ पाबंदियां भी लागू की गई हैं. किसी वेब ऐप्लिकेशन में ऑटोमैटिक पिक्चर में पिक्चर की सुविधा सिर्फ़ तब चालू की जा सकती है, जब वह इन सभी शर्तों को पूरा करता हो:
इसने
"enterpictureinpicture"कार्रवाई के लिए, एक मीडिया सेशन ऐक्शन हैंडलर रजिस्टर किया है.यह getUserMedia के ज़रिए लगातार कैमरा या माइक्रोफ़ोन कैप्चर कर रहा है.
उपयोगकर्ता डिफ़ॉल्ट रूप से चालू ब्राउज़र सेटिंग के ज़रिए "अपने-आप पिक्चर में पिक्चर" सुविधा का इस्तेमाल करने की अनुमति देता है.
जब कोई वेब ऐप्लिकेशन ज़रूरी शर्तें पूरी करता है, तो उपयोगकर्ता किसी दूसरे टैब पर फ़ोकस करने पर, "enterpictureinpicture" ऐक्शन के लिए मीडिया सेशन ऐक्शन हैंडलर कॉलबैक फ़ंक्शन ट्रिगर होता है. इससे, उपयोगकर्ता के जेस्चर के बिना पिक्चर में पिक्चर विंडो खोली जा सकती है.
वेब डेवलपर, एचटीएमएल <video> एलिमेंट से पिक्चर में पिक्चर विंडो खोलने के लिए, <video> के लिए पिक्चर में पिक्चर एपीआई का इस्तेमाल कर सकते हैं. इसके अलावा, वे दस्तावेज़ के लिए पिक्चर में पिक्चर एपीआई का इस्तेमाल करके, हमेशा सबसे ऊपर दिखने वाली विंडो खोल सकते हैं. इस विंडो में, अपनी पसंद का कोई भी एचटीएमएल कॉन्टेंट पॉप्युलेट किया जा सकता है. पिक्चर में पिक्चर विंडो को खोले जाने पर फ़ोकस नहीं किया जाता. पेज के दिखने की सेटिंग फिर से दिखने पर, यह अपने-आप बंद हो जाती है.
यहां दिए गए उदाहरण में, उपयोगकर्ता के कैमरे का ऐक्सेस पाने का अनुरोध करने का तरीका बताया गया है. इसके बाद, "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 पर जाएं.
संसाधन
लोगों का आभार
समीक्षा करने के लिए, Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato, और Rachel Andrew का धन्यवाद.