दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई के हाल ही में लॉन्च होने के बाद, वेब डेवलपर इस बात में दिलचस्पी ले रहे हैं कि जब उपयोगकर्ता अपने मौजूदा टैब से फ़ोकस स्विच करता है, तो पिक्चर में पिक्चर विंडो अपने-आप खुल जाए. वे इस बात में भी दिलचस्पी ले रहे हैं कि इससे पहले भी ऐसा हो. यह सुविधा खास तौर पर, वीडियो कॉन्फ़्रेंसिंग वाले वेब ऐप्लिकेशन के लिए काम की है. इसकी मदद से, प्रज़ेंटर किसी दस्तावेज़ को प्रज़ेंट करते समय या दूसरे टैब या विंडो का इस्तेमाल करते समय, मीटिंग में हिस्सा लेने वाले लोगों को रीयल टाइम में देख सकते हैं और उनसे इंटरैक्ट कर सकते हैं.
अपने-आप 'पिक्चर में पिक्चर' मोड में जाने की सेटिंग
वीडियो कॉन्फ़्रेंसिंग के इन इस्तेमाल के उदाहरणों के लिए, 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 का धन्यवाद.