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

François Beaufort
François Beaufort
GitHub
Elad Alon

ब्राउज़र सहायता

  • 102
  • 102
  • x
  • x

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

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

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

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

हॉल ऑफ़ मिरर इफ़ेक्ट का इलस्ट्रेशन

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

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

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

कैप्चर किया गया साइड

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

  • handle: इसमें ज़्यादा से ज़्यादा 1,024 वर्ण हो सकते हैं.
  • 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 पर जाकर, गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें और इसे दोबारा बनाने के आसान निर्देश दें. Glitch, जल्दी और आसान रेप्रस शेयर करने के लिए शानदार काम करता है.

सपोर्ट करें

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

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

स्वीकार की गई

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