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

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 repo पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

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

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

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

क्रिएटर के लिए अपना सपोर्ट दिखाना

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

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

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

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

आभार

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