किसी भी एलिमेंट से वीडियो स्ट्रीम कैप्चर करें

स्क्रीन कैप्चर एपीआई की मदद से, पूरे मौजूदा टैब को कैप्चर किया जा सकता है. एलिमेंट कैप्चर एपीआई की मदद से, किसी खास एचटीएमएल एलिमेंट को कैप्चर और रिकॉर्ड किया जा सकता है. यह पूरे टैब के कैप्चर को बदलकर, खास DOM सबट्री को कैप्चर कर देता है. साथ ही, टारगेट-एलिमेंट के सीधे डिसेंडेंट को कैप्चर करता है. दूसरे शब्दों में कहें, तो इसमें शामिल किए गए और शामिल न किए गए कॉन्टेंट को काटकर, उसे हटा दिया जाता है.

एलिमेंट कैप्चर का इस्तेमाल क्यों करना चाहिए?

वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन की ज़रूरतों को ध्यान में रखकर यह समझा जा सकता है कि एलिमेंट कैप्चर करना कहां फ़ायदेमंद है. अगर आपके पास वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन है, जो आपको किसी iframe में तीसरे पक्ष के ऐप्लिकेशन एम्बेड करने की सुविधा देता है, तो हो सकता है कि आप कभी-कभी उस iframe को वीडियो के रूप में कैप्चर करना और उसे किसी दूसरी जगह पर मौजूद लोगों को भेजना चाहें.

getDisplayMedia() को कॉल करने और उपयोगकर्ता को मौजूदा टैब चुनने देने से, पूरा मौजूदा टैब ट्रांसमिट होगा. इससे लोगों का खुद का वीडियो वापस उन तक पहुंच सकता है. क्षेत्र कैप्चर करने का इस्तेमाल करके, इसे काटा जा सकता है.

हालांकि, अगर प्रज़ेंटर, वीडियो कॉन्फ़्रेंसिंग के लिए ऐप्लिकेशन इस्तेमाल करता है और ड्रॉप-डाउन सूची जैसे कुछ कॉन्टेंट को कैप्चर करने के मकसद से बनाया जाता है, तो क्या होगा?

क्षेत्र कैप्चर से वहां सहायता नहीं मिलेगी. ड्रॉप-डाउन सूची का कुछ हिस्सा, शायद रिमोट लोगों की स्क्रीन पर दिखे.

क्षेत्र कैप्चर इस तरह से एलिमेंट के हिस्सों को कैप्चर करता है (इसे घटाना कॉन्टेंट भी कहा जाता है) से कई समस्याएं होती हैं:

• कॉन्टेंट को शामिल न करने से, हो सकता है कि उस कॉन्टेंट को देखने में रुकावट आ रही है जिसे उपयोगकर्ता शेयर करना चाहता है.
• शामिल किया गया कॉन्टेंट निजी हो सकता है (चैट नोटिफ़िकेशन के बारे में सोचें).
• कॉन्टेंट को शामिल न करने से भ्रम की स्थिति पैदा हो सकती है. उदाहरण के लिए, ऐप्लिकेशन को फिर से लेआउट में सेट करने पर, रिमोट कंट्रोल करने वाले लोगों के वीडियो, कैप्चर किए गए टारगेट पर कुछ समय के लिए आ सकते हैं.

जिस एलिमेंट को शेयर करना है उसे टारगेट करने की अनुमति देकर, Element Capture API इन सभी समस्याओं को हल करता है.

मैं एलिमेंट कैप्चर का इस्तेमाल कैसे करूं?

captureTarget, आपके पेज पर मौजूद एक एलिमेंट है, जिसमें वह कॉन्टेंट होता है जिसे उपयोगकर्ता कैप्चर करना चाहता है. आपकी इच्छा है कि वीडियो कॉन्फ़्रेंसिंग के वेब ऐप्लिकेशन से captureTarget का डेटा कैप्चर हो और इसे रिमोट सेशन में शामिल लोगों के साथ शेयर किया जा सके. इसलिए, आपको captureTarget से RestrictionTarget मिलता है. इस RestrictionTarget का इस्तेमाल करके, वीडियो ट्रैक पर पाबंदी लगाने के बाद, उस वीडियो ट्रैक के फ़्रेम में अब सिर्फ़ वे पिक्सल शामिल होंगे जो captureTarget और उसके सीधे डीओएम डिसेंडेंट का हिस्सा हैं.

अगर captureTarget, साइज़, आकार या जगह की जानकारी में बदलाव करता है, तो वीडियो ट्रैक के साथ-साथ, इसके लिए किसी भी वेब ऐप्लिकेशन से कोई और इनपुट लेने की ज़रूरत नहीं होती. इनमें दिखने वाले, गायब होने या इधर-उधर जाने वाले कॉन्टेंट के लिए, किसी खास तरीके की ज़रूरत नहीं होती.

यह तरीका फिर से देखें:

शुरुआत करने के लिए, उपयोगकर्ता को मौजूदा टैब कैप्चर करने की अनुमति दें.

// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

इनपुट के तौर पर अपनी पसंद के एलिमेंट के साथ RestrictionTarget.fromElement() को कॉल करके, RestrictionTarget तय करें.

// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

इसके बाद, RestrictionTarget को इनपुट के तौर पर इस्तेमाल करके, वीडियो ट्रैक पर restrictTo() को कॉल करें. आखिरी प्रॉमिस पूरी होने के बाद, बाद के सभी फ़्रेम का इस्तेमाल नहीं किया जा सकेगा.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

// Enjoy! Transmit remotely.

गहराई से जानें

सुविधा की पहचान

यह देखने के लिए कि RestrictionTarget.fromElement() काम करता है या नहीं, इनका इस्तेमाल करें:

if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
  // Deriving a restriction target is supported.
}

पाबंदी टारगेट तय करें

captureTarget नाम के एलिमेंट पर फ़ोकस करें. इससे RestrictionTarget पाने के लिए, RestrictionTarget.fromElement(captureTarget) पर कॉल करें. नतीजे में मिला प्रॉमिस, नए RestrictionTarget ऑब्जेक्ट के साथ रिज़ॉल्व किया जाएगा. अगर आपने गलत संख्या में RestrictionTarget ऑब्जेक्ट मिंट किए हैं, तो इसे अस्वीकार कर दिया जाएगा.

const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

एलिमेंट के उलट, RestrictionTarget ऑब्जेक्ट को क्रम में लगाया जा सकता है. उदाहरण के लिए, इसे Window.postMessage() का इस्तेमाल करके किसी दूसरे दस्तावेज़ में भेजा जा सकता है.

सीमित

टैब कैप्चर करते समय, वीडियो ट्रैक में restrictTo() दिखता है. मौजूदा टैब को कैप्चर करते समय, restrictTo() को null या मौजूदा टैब के एलिमेंट से मिले किसी भी RestrictionTarget के साथ कॉल किया जा सकता है.

restrictTo(restrictionTarget) को किए जाने वाले कॉल, वीडियो ट्रैक को बदलकर captureTarget का कैप्चर कर देते हैं. ऐसा करने से, वीडियो ट्रैक खुद ही बनाया जाता है. यह बाकी DOM से अलग होता है. captureTarget के सभी वंशज भी कैप्चर कर लिए जाते हैं. captureTarget के प्रतिरूपों को कैप्चर से हटा दिया जाता है. इसका नतीजा यह होता है कि ट्रैक पर डिलीवर किए गए सभी फ़्रेम इस तरह से दिखते हैं जैसे उन्हें captureTarget के कंटूर के हिसाब से काटा गया हो. साथ ही, पूरा न दिखाने वाला कॉन्टेंट हटा दिया जाता है.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

restrictTo(null) पर कॉल करने से ट्रैक अपनी मूल स्थिति में वापस आ जाता है.

// Stop restricting.
await track.restrictTo(null);

अगर restrictTo() पर कॉल पूरा हो जाता है, तो वापस किया गया प्रॉमिस रिज़ॉल्व हो जाता है. इसके बाद, इस बात की गारंटी दी जाती है कि बाद के सभी वीडियो फ़्रेम captureTarget तक ही सीमित रहेंगे.

अगर ऐसा नहीं हो पाता है, तो प्रोमिस को अस्वीकार कर दिया जाता है. restrictTo() पर किए गए कॉल के सफल न होने की इनमें से कोई एक वजह होगी:

• अगर restrictionTarget को कैप्चर किए जा रहे टैब के बजाय किसी दूसरे टैब में बनाया गया है. (ध्यान दें कि "इसके बजाय यह टैब शेयर करें" बटन का इस्तेमाल करके, उपयोगकर्ता किसी भी समय यह बदल सकते हैं कि कौनसा टैब कैप्चर किया जाए.)
• अगर restrictionTarget को किसी ऐसे एलिमेंट से लिया गया था जो अब मौजूद नहीं है.
• क्या ट्रैक में क्लोन हैं. (समस्या 1509418 देखें.)
• अगर मौजूदा ट्रैक, सेल्फ़-कैप्चर वीडियो ट्रैक नहीं है.
• जिस एलिमेंट से restrictionTarget पाया गया था, अगर वह पाबंदी लगाने की ज़रूरी शर्तों को पूरा नहीं करता.

सेल्फ़-कैप्चर विचार

जब कोई ऐप्लिकेशन getDisplayMedia() को कॉल करता है और उपयोगकर्ता ऐप्लिकेशन का अपना टैब खुद कैप्चर करने का विकल्प चुनता है, तो हम उसे "सेल्फ़-कैप्चर" कहते हैं.

restrictTo() तरीका किसी भी टैब-कैप्चर वीडियो ट्रैक पर दिखाया जा सकता है, न कि सिर्फ़ खुद कैप्चर करने के लिए. हालांकि, फ़िलहाल एलिमेंट कैप्चर करने की सुविधा सिर्फ़ सेल्फ़-कैप्चर के लिए चालू है. इसलिए, हमारा सुझाव है कि ट्रैक को प्रतिबंधित करने से पहले, यह देख लें कि उपयोगकर्ता ने मौजूदा टैब को चुना है या नहीं. ऐसा करने के लिए, कैप्चर हैंडल का इस्तेमाल करें. ब्राउज़र से यह भी कहा जा सकता है कि वह उपयोगकर्ता को preferCurrentTab का इस्तेमाल करके, आपका कॉन्टेंट खुद कैप्चर करने के लिए कहे.

पारदर्शिता

getDisplayMedia() से ऐप्लिकेशन को मिलने वाले वीडियो फ़्रेम में ऐल्फ़ा चैनल शामिल नहीं होता. अगर कोई ऐप्लिकेशन आंशिक रूप से पारदर्शी कैप्चर-टारगेट सेट करता है, तो ऐल्फ़ा चैनल को हटाने के कुछ संभावित नतीजे हो सकते हैं:

• रंग बदल सकते हैं. ऐल्फ़ा चैनल को हटाने पर, हल्के बैकग्राउंड पर बनाए गए, टारगेट किए गए कुछ पारदर्शी एलिमेंट गहरे रंग के दिख सकते हैं. साथ ही, गहरे रंग के बैकग्राउंड पर बनाए गए एलिमेंट हल्के दिख सकते हैं.
• ऐल्फ़ा चैनल को सबसे ज़्यादा पर सेट किए जाने पर, ऐसे रंग जो उपयोगकर्ता को नहीं दिखते या वे दिखते नहीं हैं, वे ऐल्फ़ा चैनल को हटाने के बाद दिखेंगे. उदाहरण के लिए, अगर पारदर्शी सेक्शन में आरजीए कोड rgba(0, 0, 0, 0) है, तो इससे कैप्चर किए गए फ़्रेम में अनचाहे काले क्षेत्र दिख सकते हैं.

कैप्चर नहीं किए जा सकने वाले टारगेट को पूरा नहीं किया जा सकता

किसी ट्रैक को किसी मान्य कैप्चर-टारगेट तक सीमित करना हमेशा संभव होता है. हालांकि, फ़्रेम कुछ खास शर्तों के तहत नहीं बनाए जा सकेंगे. जैसे, अगर एलिमेंट या कोई ऐन्सेस्टर display:none हो. इसका मतलब यह है कि पाबंदी सिर्फ़ उस एलिमेंट पर लागू होती है जिसमें सिंगल, कोहेसिव, दो डाइमेंशन वाला, आयताकार क्षेत्र होता है. इन पिक्सल को किसी भी पैरंट या सिबलिंग एलिमेंट से अलग करके, सही तरीके से तय किया जा सकता है.

एलिमेंट पर पाबंदी लगाई जा सकती है या नहीं, यह पक्का करने के लिए एक ज़रूरी बात यह होनी चाहिए कि उसका अपना स्टैकिंग कॉन्टेक्स्ट बनाया जाए. यह पक्का करने के लिए, आइसोलेशन सीएसएस प्रॉपर्टी को isolate पर सेट किया जा सकता है.

<div id="captureTarget" style="isolation: isolate;"></iframe>

ध्यान दें कि टारगेट एलिमेंट किसी भी समय पर, पाबंदी के लिए ज़रूरी शर्तें पूरी करता है या नहीं के बीच टॉगल कर सकता है. उदाहरण के लिए, अगर ऐप्लिकेशन अपनी सीएसएस प्रॉपर्टी में बदलाव करता है. यह ऐप्लिकेशन पर निर्भर करता है कि वह उचित कैप्चर टारगेट का इस्तेमाल करे और प्रॉपर्टी को अचानक बदलने से बचे. अगर टारगेट एलिमेंट ज़रूरी शर्तें पूरी नहीं करता, तो ट्रैक पर नए फ़्रेम तब तक उत्सर्जित नहीं होंगे, जब तक टारगेट एलिमेंट को फिर से पाबंदी के लिए मंज़ूरी नहीं मिल जाती.

एलिमेंट कैप्चर करने की सुविधा चालू करना

एलिमेंट कैप्चर एपीआई, डेस्कटॉप पर Chrome में एलिमेंट कैप्चर फ़्लैग के पीछे उपलब्ध होता है. इसे chrome://flags/#element-capture पर चालू किया जा सकता है.

यह सुविधा, डेस्कटॉप पर Chrome 121 का ऑरिजिन ट्रायल भी करने जा रही है. इससे डेवलपर इस सुविधा को चालू कर सकते हैं. इससे, वे अपनी साइटों पर आने वाले लोगों के लिए, असली उपयोगकर्ताओं का डेटा इकट्ठा कर सकेंगे. ऑरिजिन ट्रायल के बारे में ज़्यादा जानकारी के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करना देखें.

सुरक्षा और निजता

सुरक्षा से जुड़े खतरों को समझने के लिए, एलिमेंट कैप्चर स्पेसिफ़िकेशन का निजता और सुरक्षा से जुड़ी बातें सेक्शन देखें.

Chrome ब्राउज़र, कैप्चर किए गए टैब के किनारों के चारों ओर नीले रंग का बॉर्डर बनाता है.

डेमो

Glitch पर डेमो चलाकर, एलिमेंट कैप्चर की सुविधा का इस्तेमाल किया जा सकता है. सोर्स कोड की जांच करना न भूलें.

सुझाव/राय दें या शिकायत करें

Chrome टीम और वेब मानकों वाला समुदाय, एलिमेंट कैप्चर के साथ आपके अनुभवों के बारे में जानना चाहता है.

हमें इसके डिज़ाइन के बारे में बताएं

क्या 'क्षेत्र कैप्चर' में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? इसके अलावा, क्या कोई ऐसी प्रॉपर्टी या तरीके हैं जिनकी मदद से अपने आइडिया को लागू किया जा सकता है? सुरक्षा मॉडल पर आपका कोई प्रश्न या टिप्पणी है?

• GitHub रिपो पर कोई खास समस्या फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.

क्या लागू करने में कोई समस्या हुई?

क्या आपको Chrome के सही तरीके से काम करने में कोई गड़बड़ी मिली? या फिर लागू किया जाने वाला तरीका खास जानकारी से अलग है?

• https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. कृपया ज़्यादा से ज़्यादा जानकारी दें और समस्या को फिर से बनाने के आसान निर्देश दें. Glitch कॉपी करके, उसे तुरंत और आसानी से शेयर करने का बेहतरीन तरीका है.

मददगार लिंक

• खास जानकारी
• एक्सप्लेनर
• प्रयोग करने की इच्छा
• ChromeStatus.com एंट्री

लोगों का आभार

Unsplash पर पॉल स्कोरअपस्कस की ली गई फ़ोटो