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

François Beaufort

Elad Alon

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

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

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

इसलिए, आपने डाइनैमिक ContentTM के साथ वेबसाइट बनाई. यह अब तक का सबसे अच्छा वेब ऐप्लिकेशन है और लोग इसका इस्तेमाल करना बंद नहीं कर सकते, अक्सर साथ मिलकर काम करते हैं. अगला कदम वर्चुअल कॉन्फ़्रेंसिंग की सुविधाओं को जोड़ना है. आप इसके साथ जाने का निर्णय लेते हैं. वीडियो कॉन्फ़्रेंसिंग की सेवा देने वाली किसी मौजूदा कंपनी के साथ मिलकर काम किया जा सकता है और उसके वेब ऐप्लिकेशन को क्रॉस-ऑरिजिन 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);

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

// 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.

क्या बात है! आपका काम हो गया.

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

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

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

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

क्रॉप टारगेट तैयार करना

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

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

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

काटना

टैब कैप्चर करते समय, वीडियो ट्रैक BrowserCaptureMediaStreamTrack के तौर पर इंस्टैंशिएट हो जाता है, जो MediaStreamTrack की सब-क्लास है. वह सब-क्लास cropTo() को दिखाती है. mainContentArea (जिस एलिमेंट से क्रॉप टारगेट हासिल किया गया है) के कॉन्टूर में काट-छांट करने के लिए, 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 पर डेमो चलाया जा सकता है और क्षेत्र कैप्चर के साथ काम किया जा सकता है. होना सोर्स कोड की जांच करना न भूलें.

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

क्षेत्र कैप्चर करने की सुविधा, सिर्फ़ डेस्कटॉप पर Chrome 104 पर उपलब्ध है.

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

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

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

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

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

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

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

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

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

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

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

सपोर्ट करें

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

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

मददगार लिंक

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

स्वीकार की गई

इस लेख को पढ़ने के लिए, जो मेडली का धन्यवाद.