स्क्रीन कैप्चर एपीआई की मदद से, वेब प्लैटफ़ॉर्म पर टैब, विंडो, और स्क्रीन पहले से ही शेयर की जा सकती हैं. जब कोई वेब ऐप्लिकेशन getDisplayMedia() को कॉल करता है, तो Chrome उपयोगकर्ता को वेब ऐप्लिकेशन के साथ टैब, विंडो या स्क्रीन को MediaStreamTrack वीडियो के तौर पर शेयर करने के लिए कहता है.
getDisplayMedia() का इस्तेमाल करने वाले कई वेब ऐप्लिकेशन, उपयोगकर्ता को कैप्चर किए गए प्लैटफ़ॉर्म की झलक दिखाते हैं. उदाहरण के लिए, वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन अक्सर इस वीडियो को रिमोट उपयोगकर्ताओं के लिए स्ट्रीम करते हैं. साथ ही, इसे स्थानीय HTMLVideoElement पर रेंडर भी करते हैं, ताकि स्थानीय उपयोगकर्ता को वह वीडियो लगातार दिखता रहे जिसे शेयर किया जा रहा है.
इस दस्तावेज़ में, Chrome में कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने वाला नया एपीआई पेश किया गया है. इसकी मदद से, आपके वेब ऐप्लिकेशन में कैप्चर किए गए टैब को स्क्रोल किया जा सकता है. साथ ही, कैप्चर किए गए टैब के ज़ूम लेवल को पढ़ा और लिखा जा सकता है.
कैप्चर किए गए प्लैटफ़ॉर्म कंट्रोल का इस्तेमाल क्यों करना चाहिए?
वीडियो कॉन्फ़्रेंसिंग की सुविधा देने वाले सभी ऐप्लिकेशन में एक ही समस्या होती है. अगर उपयोगकर्ता को कैप्चर किए गए टैब या विंडो से इंटरैक्ट करना है, तो उसे उस प्लैटफ़ॉर्म पर स्विच करना होगा. इससे, उसे वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन से हटना पड़ता है. इससे कुछ समस्याएं आती हैं:
- उपयोगकर्ता, कैप्चर किए गए ऐप्लिकेशन और रिमोट उपयोगकर्ताओं के वीडियो फ़ीड को एक साथ तब तक नहीं देख सकता, जब तक वह पिक्चर में पिक्चर या वीडियो कॉन्फ़्रेंस टैब और शेयर किए गए टैब के लिए, अलग-अलग विंडो का इस्तेमाल नहीं करता. छोटी स्क्रीन पर, ऐसा करना मुश्किल हो सकता है.
- उपयोगकर्ता को वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन और कैप्चर किए गए सरफ़ेस के बीच स्विच करने में परेशानी होती है.
- जब उपयोगकर्ता वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन से दूर होता है, तो उसके पास ऐप्लिकेशन में मौजूद कंट्रोल का ऐक्सेस नहीं होता. जैसे, एम्बेड किया गया चैट ऐप्लिकेशन, इमोजी से प्रतिक्रियाएं देना, कॉल में शामिल होने के लिए कहने वाले उपयोगकर्ताओं की सूचनाएं, मल्टीमीडिया और लेआउट कंट्रोल, और वीडियो कॉन्फ़्रेंसिंग की अन्य काम की सुविधाएं.
- प्रज़ेंटर, मीटिंग में शामिल न होने वाले लोगों को कंट्रोल नहीं दे सकता. इससे, रीमोट उपयोगकर्ता प्रज़ेंटर से स्लाइड बदलने, थोड़ा ऊपर और नीचे स्क्रोल करने या ज़ूम लेवल में बदलाव करने के लिए कहते हैं.
Captured Surface Control API इन समस्याओं को हल करता है.
मैं कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा का इस्तेमाल कैसे करूं?
कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा का इस्तेमाल करने के लिए, कुछ चरणों को पूरा करना ज़रूरी है. जैसे, ब्राउज़र टैब को साफ़ तौर पर कैप्चर करना और कैप्चर किए गए टैब को स्क्रोल और ज़ूम करने से पहले, उपयोगकर्ता से अनुमति लेना.
ब्राउज़र टैब कैप्चर करना
सबसे पहले, उपयोगकर्ता को getDisplayMedia() का इस्तेमाल करके शेयर करने के लिए कोई प्लैटफ़ॉर्म चुनने के लिए कहें. साथ ही, कैप्चर सेशन के साथ CaptureController ऑब्जेक्ट जोड़ें. हम जल्द ही उस ऑब्जेक्ट का इस्तेमाल, कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने के लिए करेंगे.
const controller = new CaptureController();
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });
इसके बाद, कैप्चर किए गए प्लैटफ़ॉर्म की झलक को <video> एलिमेंट के तौर पर दिखाएं:
const previewTile = document.querySelector('video');
previewTile.srcObject = stream;
अगर उपयोगकर्ता कोई विंडो या स्क्रीन शेयर करना चाहता है, तो फ़िलहाल ऐसा नहीं किया जा सकता. हालांकि, अगर वह कोई टैब शेयर करना चाहता है, तो हम ऐसा कर सकते हैं.
const [track] = stream.getVideoTracks();
if (track.getSettings().displaySurface !== 'browser') {
// Bail out early if the user didn't pick a tab.
return;
}
अनुमति का अनुरोध
किसी दिए गए CaptureController ऑब्जेक्ट पर forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() या resetZoomLevel() में से किसी एक को पहली बार इस्तेमाल करने पर, अनुमति का अनुरोध दिखता है. अगर उपयोगकर्ता अनुमति देता है, तो इन तरीकों को फिर से इस्तेमाल करने की अनुमति दी जाती है.
उपयोगकर्ता को अनुमति का अनुरोध दिखाने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है. इसलिए, ऐप्लिकेशन को ऊपर बताए गए तरीकों का इस्तेमाल सिर्फ़ तब करना चाहिए, जब उसके पास पहले से ही अनुमति हो या उपयोगकर्ता के जेस्चर के जवाब में, जैसे कि वेब ऐप्लिकेशन में किसी काम के बटन पर click.
स्क्रोल करें
forwardWheel() का इस्तेमाल करके, कैप्चर करने वाला ऐप्लिकेशन, कैप्चर किए गए ऐप्लिकेशन में मौजूद सोर्स एलिमेंट से, कैप्चर किए गए टैब के व्यूपोर्ट पर व्हील इवेंट फ़ॉरवर्ड कर सकता है. कैप्चर किए गए ऐप्लिकेशन के लिए, इन इवेंट और सीधे तौर पर उपयोगकर्ता के इंटरैक्शन में कोई अंतर नहीं होता.
मान लें कि कैप्चर करने वाला ऐप्लिकेशन, "previewTile" नाम के <video> एलिमेंट का इस्तेमाल करता है. नीचे दिए गए कोड में, कैप्चर किए गए टैब पर व्हील इवेंट भेजने का तरीका बताया गया है:
const previewTile = document.querySelector('video');
try {
// Relay the user's action to the captured tab.
await controller.forwardWheel(previewTile);
} catch (error) {
// Inspect the error.
// ...
}
forwardWheel() का तरीका, एक इनपुट लेता है, जो इनमें से कोई एक हो सकता है:
- एक एचटीएमएल एलिमेंट, जिससे व्हील इवेंट को कैप्चर किए गए टैब पर फ़ॉरवर्ड किया जाएगा.
null, यह बताता है कि फ़ॉरवर्ड करने की सुविधा बंद होनी चाहिए.
forwardWheel() पर कॉल करने पर, पिछले कॉल रद्द हो जाते हैं.
forwardWheel() से मिलने वाले प्रॉमिस को इन मामलों में अस्वीकार किया जा सकता है:
- अगर कैप्चर सेशन अभी तक शुरू नहीं हुआ है या पहले ही बंद हो गया है.
- अगर उपयोगकर्ता ने ज़रूरी अनुमति नहीं दी है.
ज़ूम करें
कैप्चर किए गए टैब के ज़ूम लेवल के साथ इंटरैक्ट करने के लिए, इन CaptureController एपीआई प्लैटफ़ॉर्म का इस्तेमाल किया जाता है:
getSupportedZoomLevels()
यह तरीका, कैप्चर किए जा रहे प्लैटफ़ॉर्म के लिए, ब्राउज़र के साथ काम करने वाले ज़ूम लेवल की सूची दिखाता है. इस सूची में मौजूद वैल्यू, "डिफ़ॉल्ट ज़ूम लेवल" के हिसाब से प्रतिशत के तौर पर दिखाई जाती हैं. डिफ़ॉल्ट ज़ूम लेवल को 100% माना जाता है. सूची में वैल्यू लगातार बढ़ रही है और इसमें 100 वैल्यू है.
इस तरीके को सिर्फ़ उन डिसप्ले प्लैटफ़ॉर्म के लिए कॉल किया जा सकता है जिन पर यह काम करता है. फ़िलहाल, इसका मतलब सिर्फ़ टैब से है.
controller.getSupportedZoomLevels() को तब कॉल किया जा सकता है, जब ये शर्तें पूरी हों:
controller, किसी चालू कैप्चर से जुड़ा है.- यह टैब का कैप्चर है.
ऐसा न करने पर, गड़बड़ी का मैसेज दिखेगा.
इस तरीके को कॉल करने के लिए, "captured-surface-control" की अनुमति ज़रूरी नहीं है.
zoomLevel
इस रीड-ओनली एट्रिब्यूट में, कैप्चर किए गए टैब का मौजूदा ज़ूम लेवल होता है. यह एट्रिब्यूट वैल्यू के बिना सबमिट किया जा सकता है. अगर कैप्चर किए गए प्लैटफ़ॉर्म टाइप के लिए ज़ूम-लेवल की कोई सही परिभाषा नहीं है, तो इस एट्रिब्यूट की वैल्यू null होती है. फ़िलहाल, ज़ूम-लेवल सिर्फ़ टैब के लिए तय किया जाता है, न कि विंडो या स्क्रीन के लिए.
कैप्चर खत्म होने के बाद, एट्रिब्यूट में ज़ूम-लेवल की आखिरी वैल्यू सेव हो जाएगी.
इस एट्रिब्यूट को पढ़ने के लिए, "captured-surface-control" की अनुमति ज़रूरी नहीं है.
onzoomlevelchange
यह इवेंट हैंडलर, कैप्चर किए गए टैब के ज़ूम लेवल में हुए बदलावों को सुनने में मदद करता है. ये इनमें से किसी एक वजह से होते हैं:
- जब उपयोगकर्ता, कैप्चर किए गए टैब के ज़ूम-लेवल को मैन्युअल तरीके से बदलने के लिए ब्राउज़र से इंटरैक्ट करता है.
- ज़ूम-सेटिंग के तरीकों (नीचे बताया गया है) के लिए, कैप्चर करने वाले ऐप्लिकेशन के कॉल के जवाब में.
इस एट्रिब्यूट को पढ़ने के लिए, "captured-surface-control" की अनुमति ज़रूरी नहीं है.
increaseZoomLevel(), decreaseZoomLevel(), और resetZoomLevel()
इन तरीकों से, कैप्चर किए गए टैब के ज़ूम लेवल में बदलाव किया जा सकता है.
increaseZoomLevel() और decreaseZoomLevel(), getSupportedZoomLevels() से मिले क्रम के हिसाब से, ज़ूम लेवल को अगले या पिछले ज़ूम-लेवल पर बदलते हैं. resetZoomLevel() वैल्यू को 100 पर सेट करता है.
इन तरीकों को कॉल करने के लिए, "captured-surface-control" अनुमति तब ज़रूरी है, जब आपके पास "captured-surface-control" की अनुमति हो. अगर कैप्चर करने वाले ऐप्लिकेशन के पास यह अनुमति नहीं है, तो उपयोगकर्ता से अनुमति देने या अस्वीकार करने के लिए कहा जाएगा.
ये सभी तरीके एक प्रॉमिस दिखाते हैं. कॉल पूरा होने पर, प्रॉमिस पूरा हो जाता है और पूरा न होने पर, अस्वीकार कर दिया जाता है. अस्वीकार किए जाने की ये वजहें हो सकती हैं:
- अनुमति नहीं है.
- कैप्चर शुरू होने से पहले कॉल किया गया.
- कैप्चर खत्म होने के बाद कॉल किया जाता है.
- यह गड़बड़ी तब होती है, जब किसी ऐसे डिसप्ले प्लैटफ़ॉर्म से कैप्चर किया गया हो जो काम नहीं करता.
controller(यानी, टैब कैप्चर के अलावा कोई भी कार्रवाई.) - ज़्यादा से ज़्यादा या कम से कम वैल्यू से ज़्यादा या कम करने की कोशिश करता है.
ध्यान दें, अगर controller.zoomLevel == controller.getSupportedZoomLevels().at(0) है, तो decreaseZoomLevel() को कॉल करने से बचें. साथ ही, .at(-1) की तरह ही increaseZoomLevel() को कॉल करने से भी बचें.
यहां दिए गए उदाहरण में, उपयोगकर्ता को कैप्चर करने वाले ऐप्लिकेशन से, कैप्चर किए गए टैब के ज़ूम लेवल को बढ़ाने का तरीका बताया गया है:
const zoomIncreaseButton = document.getElementById('zoomInButton');
zoomIncreaseButton.addEventListener('click', async (event) => {
if (controller.zoomLevel >= controller.getSupportedZoomLevels().at(-1)) {
return;
}
try {
await controller.increaseZoomLevel();
} catch (error) {
// Inspect the error.
// ...
}
});
नीचे दिए गए उदाहरण में, कैप्चर किए गए टैब के ज़ूम लेवल में होने वाले बदलावों पर प्रतिक्रिया देने का तरीका बताया गया है:
controller.addEventListener('zoomlevelchange', (event) => {
const zoomLevelLabel = document.querySelector('#zoomLevelLabel');
zoomLevelLabel.textContent = `${controller.zoomLevel}%`;
});
फ़ीचर का पता लगाना
यह देखने के लिए कि कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने वाले एपीआई काम करते हैं या नहीं, इनका इस्तेमाल करें:
if (!!window.CaptureController?.prototype.forwardWheel) {
// CaptureController forwardWheel() is supported.
}
increaseZoomLevel या decreaseZoomLevel जैसे कैप्चर किए गए किसी भी अन्य Surface Control API के प्लैटफ़ॉर्म का इस्तेमाल किया जा सकता है. इसके अलावा, सभी प्लैटफ़ॉर्म की जांच भी की जा सकती है.
ब्राउज़र समर्थन
कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा, सिर्फ़ Chrome 136 के डेस्कटॉप वर्शन पर उपलब्ध है.
सुरक्षा और निजता
"captured-surface-control" अनुमति की नीति की मदद से, यह मैनेज किया जा सकता है कि कैप्चर करने वाले ऐप्लिकेशन और एम्बेड किए गए तीसरे पक्ष के iframes के पास, कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा का ऐक्सेस कैसे है. सुरक्षा से जुड़े फ़ायदे और नुकसान को समझने के लिए, कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा के बारे में बताने वाले लेख में, निजता और सुरक्षा से जुड़ी बातें सेक्शन देखें.
डेमो
Glitch पर डेमो चलाकर, कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा को आज़माया जा सकता है. सोर्स कोड देखना न भूलें.
सुझाव/राय दें या शिकायत करें
Chrome की टीम और वेब स्टैंडर्ड कम्यूनिटी, कैप्चर किए गए प्लैटफ़ॉर्म को कंट्रोल करने की सुविधा के बारे में आपके अनुभव जानना चाहती है.
हमें डिज़ाइन के बारे में बताएं
क्या कैप्चर किए गए हिस्से को कैप्चर करने की सुविधा, आपकी उम्मीद के मुताबिक काम नहीं कर रही है? क्या आपके आइडिया को लागू करने के लिए, कोई तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है? GitHub repo पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.
क्या लागू करने में समस्या आ रही है?
क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है? https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए निर्देश भी दें. Glitch, बार-बार होने वाले गड़बड़ियों की जानकारी शेयर करने के लिए बहुत अच्छा है.