इस पेज का अनुवाद Cloud Translation API से किया गया है.

कैप्चर हैंडल की मदद से बेहतर टैब शेयर करें

François Beaufort

Elad Alon

Browser Support

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

इसके फ़ायदों के बारे में कुछ उदाहरणों से बताया गया है.

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

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

हॉल ऑफ़ मिरर इफ़ेक्ट की इमेज

कैप्चर हैंडल के बारे में जानकारी

कैप्चर हैंडल में दो हिस्से होते हैं:

कैप्चर किए गए वेब ऐप्लिकेशन, navigator.mediaDevices.setCaptureHandleConfig() की मदद से कुछ ऑरिजिन को कुछ जानकारी दिखाने के लिए ऑप्ट-इन कर सकते हैं.
इसके बाद, वेब ऐप्लिकेशन कैप्चर करने वाले टूल, MediaStreamTrack ऑब्जेक्ट पर getCaptureHandle() की मदद से उस जानकारी को पढ़ सकते हैं.

कैप्चर की गई साइड

वेब ऐप्लिकेशन, कैप्चर करने वाले वेब ऐप्लिकेशन को जानकारी दिखा सकते हैं. ऐसा करने के लिए, navigator.mediaDevices.setCaptureHandleConfig() को वैकल्पिक ऑब्जेक्ट के साथ कॉल किया जाता है. इस ऑब्जेक्ट में ये सदस्य होते हैं:

handle: इसमें 1024 वर्णों तक की कोई भी स्ट्रिंग हो सकती है..
exposeOrigin: अगर true है, तो कैप्चर किए गए वेब ऐप्लिकेशन का ऑरिजिन, वेब ऐप्लिकेशन कैप्चर करने वाले लोगों को दिख सकता है.
permittedOrigins: मान्य वैल्यू ये हैं: (i) खाली कलेक्शन, (ii) एक आइटम "*" वाला कलेक्शन या (iii) ऑरिजिन का कलेक्शन. अगर permittedOrigins में सिर्फ़ एक आइटम "*" है, तो CaptureHandle को कैप्चर करने वाले सभी वेब ऐप्लिकेशन देख सकते हैं. अगर ऐसा नहीं है, तो यह सिर्फ़ उन वेब ऐप्लिकेशन को कैप्चर करने के लिए देखा जा सकता है जिनका ऑरिजिन permittedOrigins में है.

यहां दिए गए उदाहरण में, किसी भी कैप्चरिंग वेब ऐप्लिकेशन के लिए, यूनीक आइडेंटिफ़ायर (यूयूआईडी) को हैंडल और ऑरिजिन के तौर पर एक्सपोज़ करने का तरीका बताया गया है.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

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

कैप्चर करने वाली साइड

कैप्चर करने वाला वेब ऐप्लिकेशन, वीडियो MediaStreamTrack को होल्ड करता है. साथ ही, उस MediaStreamTrack पर getCaptureHandle() को कॉल करके, कैप्चर हैंडल की जानकारी पढ़ सकता है. अगर कोई कैप्चर हैंडल उपलब्ध नहीं है या कैप्चर करने वाले वेब ऐप्लिकेशन को इसे पढ़ने की अनुमति नहीं है, तो यह कॉल null दिखाता है. अगर कैप्चर हैंडल उपलब्ध है और कैप्चर करने वाला वेब ऐप्लिकेशन permittedOrigins में जोड़ा गया है, तो यह कॉल इन सदस्यों के साथ एक ऑब्जेक्ट दिखाता है:

handle: navigator.mediaDevices.setCaptureHandleConfig() के साथ कैप्चर किए गए वेब ऐप्लिकेशन से सेट की गई स्ट्रिंग वैल्यू.
origin: अगर exposeOrigin को true पर सेट किया गया था, तो कैप्चर किए गए वेब ऐप्लिकेशन का ऑरिजिन. अगर ऐसा नहीं है, तो इसका मतलब है कि इसकी वैल्यू तय नहीं की गई है.

यहां दिए गए उदाहरण में, वीडियो ट्रैक से कैप्चर हैंडल की जानकारी पढ़ने का तरीका बताया गया है.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

MediaStreamTrack ऑब्जेक्ट पर "capturehandlechange" इवेंट को सुनकर, CaptureHandle में होने वाले बदलावों को मॉनिटर करें. बदलाव तब होते हैं, जब:

कैप्चर किया गया वेब ऐप्लिकेशन, navigator.mediaDevices.setCaptureHandleConfig() को कॉल करता है.
कैप्चर किए गए वेब ऐप्लिकेशन में, एक दस्तावेज़ से दूसरे दस्तावेज़ पर नेविगेट किया जाता है.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

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

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

ध्यान दें कि navigator.mediaDevices.setCaptureHandleConfig() सिर्फ़ सुरक्षित ब्राउज़िंग कॉन्टेक्स्ट (सिर्फ़ एचटीटीपीएस) में, टॉप-लेवल के मुख्य फ़्रेम के लिए उपलब्ध है.

नमूना

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

डेमो

कुछ डेमो यहां उपलब्ध हैं:

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

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

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

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

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

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

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

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

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

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

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

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

GitHub रिपॉज़िटरी पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

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

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

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

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

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

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

काम के लिंक

Acknowledgements

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