'रीजन कैप्चर' की मदद से बेहतर टैब शेयर करना

François Beaufort

Elad Alon

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

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

क्षेत्र कैप्चर करने के बारे में जानकारी

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

मुख्य कॉन्टेंट का सेक्शन नीले रंग में है और क्रॉस-ऑरिजिन iframe लाल रंग में है.

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

आइए, 'इलाके को कैप्चर करें' सुविधा का इस्तेमाल करें. आपके पेज पर Element या <div> है, जिसमें मुख्य कॉन्टेंट शामिल है. इसे mainContentArea कहें. आपको वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन से, इस एलिमेंट के बाउंडिंग बॉक्स से तय किए गए हिस्से को रिमोट तौर पर कैप्चर करके शेयर करना है. इसलिए, आपको mainContentArea से CropTarget मिलता है. आपने इस CropTarget को वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन में पास किया है. CropTarget का इस्तेमाल करके वीडियो ट्रैक को काटने के बाद, अब उस ट्रैक पर फ़्रेम में सिर्फ़ वे पिक्सल होंगे जो mainContentArea के बाउंडिंग बॉक्स के अंदर होंगे. अगर mainContentArea का साइज़, आकार या जगह बदलती है, तो वीडियो ट्रैक भी उसी के हिसाब से बदल जाता है. इसके लिए, किसी भी वेब ऐप्लिकेशन से कोई अतिरिक्त इनपुट देने की ज़रूरत नहीं होती.

आइए, इन चरणों को फिर से देखें:

अपने वेब ऐप्लिकेशन में CropTarget तय करने के लिए, CropTarget.fromElement() को कॉल करें. इसके लिए, अपनी पसंद के एलिमेंट को इनपुट के तौर पर इस्तेमाल करें.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

आपने वीडियो कॉन्फ़्रेंसिंग के वेब ऐप्लिकेशन में CropTarget को पास किया है.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन, ब्राउज़र से ट्रैक को CropTarget से तय किए गए हिस्से में काटने के लिए कहता है. इसके लिए, वह मुख्य वेब ऐप्लिकेशन से मिले काटने के टारगेट के साथ, सेल्फ़-कैप्चर वीडियो ट्रैक पर cropTo() को कॉल करता है.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà! आपका काम हो गया.

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

फ़ीचर का पता लगाना

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

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

CropTarget का पता लगाना

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

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

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

ध्यान दें: Chrome 106 से पहले, अगर mainContentArea का टाइप <div> या iframe नहीं था, तो CropTarget.fromElement(mainContentArea) उसे अस्वीकार कर देगा.

इमेज काटना

टैब कैप्चर करने पर, वीडियो ट्रैक को BrowserCaptureMediaStreamTrack के तौर पर इंस्टैंशिएट किया जाता है. यह MediaStreamTrack का सबक्लास है. वह सब-क्लास, cropTo() को एक्सपोज़ करती है. mainContentArea (जिस एलिमेंट से cropTarget बनाया गया था) के कॉन्टूर के हिसाब से काट-छांट शुरू करने के लिए, track.cropTo(cropTarget) को कॉल करें.

अगर यह काम पूरा हो जाता है, तो वादा तब पूरा हो जाएगा, जब यह पक्का किया जा सकेगा कि वीडियो के सभी फ़्रेम में ऐसे पिक्सल शामिल होंगे जो mainContentArea के बाउंडिंग बॉक्स में आते हैं.

ऐसा न होने पर, प्रॉमिस अस्वीकार कर दिया जाएगा. ऐसा तब होगा, जब:

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

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

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

इमेज को बिना काटे हुए पहले जैसा करने के लिए, null के साथ cropTo() को कॉल करें.

// Stop cropping.
await track.cropTo(null);

छिपाया गया और छिपाया गया कॉन्टेंट

रीजन कैप्चर के लिए, टारगेट की पोज़िशन और साइज़ ही मायने रखता है, न कि z-index. टारगेट को रोकने वाले पिक्सल कैप्चर कर लिए जाएंगे. टारगेट के छिपे हुए हिस्सों को कैप्चर नहीं किया जाएगा.

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

रोके गए कॉन्टेंट के साथ क्षेत्र कैप्चर करने का तरीका.

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

रीजन कैप्चर की मदद से, वेब ऐप्लिकेशन अपने हिसाब से टैब के कुछ पिक्सल हटा सकता है. यह ऐप्लिकेशन, पहले से ही टैब के सभी पिक्सल को निगरानी में रखता है. यह पूरी तरह से सुरक्षित है, क्योंकि इससे कोई नई जानकारी नहीं मिल सकती.

रीजन कैप्चर का इस्तेमाल करके, यह तय किया जा सकता है कि मीटिंग में शामिल होने वाले दूरस्थ लोगों को कौनसी जानकारी भेजी जाए. उदाहरण के लिए, हो सकता है कि आपको कुछ स्लाइड शेयर करनी हों, लेकिन स्पीकर नोट नहीं.

स्लाइड और प्रज़ेंटर के नोट वाला वेब ऐप्लिकेशन.
नोट को किसी दूसरी जगह से शेयर करना अच्छा नहीं लगता. क्यू क्षेत्र कैप्चर.

ध्यान दें कि स्थानीय तौर पर, रीजन कैप्चर की सुविधा से सुरक्षा से जुड़ी कोई गारंटी नहीं मिलती. ट्रैक को किसी अन्य दस्तावेज़ को देते समय, पाने वाला दस्तावेज़ अब भी ट्रैक को क्रॉप कर सकता है और कैप्चर किए गए टैब के सभी पिक्सल का ऐक्सेस पा सकता है.

Chrome, कैप्चर किए गए टैब के किनारों पर नीला बॉर्डर बनाता है. काटते समय, Chrome आम तौर पर काटे गए टारगेट के चारों ओर नीला बॉर्डर बनाता है.

डेमो

Glitch पर डेमो चलाया जा सकता है और क्षेत्र कैप्चर के साथ काम किया जा सकता है. सोर्स कोड देखना न भूलें.

ब्राउज़र समर्थन

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 104
• 104
• x
• x

'इलाके की इमेज कैप्चर करें' सुविधा, Chrome 104 के बाद के वर्शन में सिर्फ़ डेस्कटॉप पर उपलब्ध है.

आगे क्या करना है

यहां इस बारे में एक झलक दी गई है कि आने वाले समय में, वेब पर स्क्रीन शेयर करने की सुविधा को बेहतर बनाने के लिए क्या किया जा सकता है:

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

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

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

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

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

• GitHub रेपो में, स्पेसिफ़िकेशन की समस्या दर्ज करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

क्या लागू करने में समस्या आ रही है?

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

• https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. Glitch, तुरंत और आसानी से समस्या की जानकारी शेयर करने के लिए बहुत अच्छा है.

सपोर्ट करें

क्या आपको 'जगह कैप्चर करें' सुविधा का इस्तेमाल करना है? आपका सार्वजनिक समर्थन Chrome टीम को सुविधाओं को प्राथमिकता देने में सहायता करता है और अन्य ब्राउज़र वेंडर को यह दिखाता है कि उनकी सहायता करना कितना महत्वपूर्ण है.

@ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मदद के लिए लिंक

• खास जानकारी
• एक्सप्लेनर
• टैग की समीक्षा
• Chromium में गड़बड़ी
• ChromeStatus.com पर मौजूद जानकारी

स्वीकार की गई

इस लेख की समीक्षा करने के लिए, Joe Medley का धन्यवाद.