स्क्रीन कैप्चर एपीआई का इस्तेमाल करके, पूरे मौजूदा टैब को कैप्चर किया जा सकता है. Element Capture API आपको किसी खास एचटीएमएल एलिमेंट को कैप्चर और रिकॉर्ड करने की सुविधा देता है. यह पूरे टैब के कैप्चर को एक खास डीओएम सबट्री में बदल देता है और टारगेट-एलिमेंट के सिर्फ़ डायरेक्ट डिसेंडेंट को कैप्चर करता है. दूसरे शब्दों में कहें, तो यह रोक लगाने वाले और रोके गए कॉन्टेंट, दोनों को काट देता है और हटा देता है.
एलिमेंट कैप्चर का इस्तेमाल क्यों करना चाहिए?
वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन की ज़रूरी शर्तों को ध्यान में रखकर, यह समझा जा सकता है कि एलिमेंट कैप्चर करने की सुविधा किन देशों में काम की है. अगर आपके पास कोई ऐसा वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन है जो आपको तीसरे पक्ष के ऐप्लिकेशन को iframe में एम्बेड करने की सुविधा देता है, तो हो सकता है कि आप कभी-कभी उस iframe को एक वीडियो के रूप में कैप्चर करना चाहें और उसे रिमोट तरीके से हिस्सा लेने वाले लोगों को भेजना चाहें.
getDisplayMedia() को कॉल करने और उपयोगकर्ता को मौजूदा टैब चुनने की अनुमति देने से, पूरे मौजूदा टैब को ट्रांसमिट किया जाएगा. इससे लोगों का वीडियो उन्हें वापस मिल सकता है. रीजनल कैप्चर की मदद से, इसे आसानी से काटा जा सकता है.
हालांकि, अगर प्रज़ेंटर के वीडियो कॉन्फ़्रेंसिंग के ऐप्लिकेशन और ड्रॉप-डाउन सूची जैसा कोई कॉन्टेंट कॉन्टेंट के साथ जुड़ जाए, तो क्या होगा?
क्षेत्र कैप्चर से इस काम में मदद नहीं मिलेगी. ड्रॉप-डाउन सूची का कुछ हिस्सा, रिमोट तरीके से मीटिंग में हिस्सा लेने वाले लोगों की स्क्रीन पर दिख सकता है.
इलाके का कैप्चर एलिमेंट के हिस्सों को इस तरह कैप्चर करता है, जिसे कॉन्टेंट रोकना कहा जाता है. इस वजह से, कई समस्याएं होती हैं:
- ऐसा हो सकता है कि किसी कॉन्टेंट को शामिल न करने पर, वह कॉन्टेंट ठीक से न देख पाए जिसे उपयोगकर्ता शेयर करना चाहता है.
- छिपाए जाने वाले कॉन्टेंट को निजी माना जा सकता है (इसे चैट की सूचनाओं के तौर पर देखा जा सकता है).
- इसे शामिल करने पर, दर्शकों को भ्रम हो सकता है. (उदाहरण के लिए, ऐप्लिकेशन का री-लेआउट, रिमोट तरीके से मीटिंग में हिस्सा लेने वाले लोगों के वीडियो को कैप्चर किए गए टारगेट पर ला सकता है.)
एलिमेंट कैप्चर एपीआई की मदद से, इन सभी समस्याओं को हल किया जा सकता है. इसके लिए, आपको उस एलिमेंट को टारगेट करने की सुविधा मिलती है जिसे आपको शेयर करना है.
मैं एलिमेंट कैप्चर का इस्तेमाल कैसे करूं?
captureTarget, आपके पेज पर मौजूद एक एलिमेंट होता है. इसमें ऐसा कॉन्टेंट शामिल होता है जिसे उपयोगकर्ता कैप्चर करना चाहता है. आपको वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन से captureTarget को कैप्चर करना है और मीटिंग में शामिल लोगों के साथ इसे शेयर करना है. इस तरह, आपको captureTarget से RestrictionTarget मिलता है. इस RestrictionTarget का इस्तेमाल करके वीडियो ट्रैक पर पाबंदी लगाने के बाद, अब उस वीडियो ट्रैक पर फ़्रेम में सिर्फ़ वे पिक्सल शामिल होंगे जो captureTarget का हिस्सा हैं और जो इसके डायरेक्ट DOM डिसेंडेंट का हिस्सा हैं.
अगर 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 तय करने के लिए, RestrictionTarget.fromElement() को इनपुट के तौर पर अपनी पसंद के एलिमेंट से कॉल करें.
// 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 में बदल देते हैं. ऐसा लगता है कि इसे बाकी डीओएम से अलग, अकेले ही ड्रॉ किया गया हो. 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, जल्दी और आसान रेप्रस शेयर करने के लिए शानदार काम करता है.
मददगार लिंक
लोगों का आभार
अनस्प्लैश पर पॉल स्कोर्सकास की खींची गई फ़ोटो