ब्राउज़र सहायता
- 102
- 102
- x
- x
इस वेब प्लैटफ़ॉर्म में अब कैप्चर हैंडल की सुविधा दी जाती है. यह एक ऐसा तरीका है जो कैप्चर किए गए वेब ऐप्लिकेशन और कैप्चर किए गए वेब ऐप्लिकेशन के बीच मिलकर काम करने में मदद करता है. कैप्चर करने का हैंडल, कैप्चर करने वाले वेब ऐप्लिकेशन को, कैप्चर किए गए वेब ऐप्लिकेशन को बेहतर तरीके से और भरोसेमंद तरीके से पहचानने की सुविधा देता है. (अगर कैप्चर किए गए वेब ऐप्लिकेशन में ऑप्ट-इन किया गया है.)
कुछ उदाहरणों में फ़ायदों की जानकारी दी गई है.
उदाहरण 1: अगर कोई वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन किसी प्रज़ेंटेशन वेब ऐप्लिकेशन को कैप्चर कर रहा है, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन, उपयोगकर्ता को एक स्लाइड से दूसरे स्लाइड पर जाने के लिए कंट्रोल दिखा सकता है. कंट्रोल, सीधे वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन में एम्बेड किए जाते हैं. इसलिए, उपयोगकर्ता को वीडियो कॉन्फ़्रेंसिंग टैब और प्रज़ेंट किए गए टैब के बीच बार-बार स्विच नहीं करना पड़ता. इस बोझ को दूर करने के बाद, उपयोगकर्ता अब अपने प्रज़ेंटेशन पर पूरी तरह से ध्यान देने के लिए स्वतंत्र हैं.
उदाहरण 2: "हॉल ऑफ़ मिरर" इफ़ेक्ट तब दिखता है, जब कैप्चर की गई सतह को वापस कैप्चर की जा रही जगह पर रेंडर किया जाता है. खास तौर पर, अगर उपयोगकर्ता वीडियो कॉन्फ़्रेंसिंग कॉल के दौरान इस्तेमाल होने वाले टैब को कैप्चर करने का विकल्प चुनता है और वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन से स्थानीय झलक दिखती है, तो यह डरावना असर दिखेगा. कैप्चर हैंडल का इस्तेमाल करके, सेल्फ़-कैप्चर करने की सुविधा का पता लगाकर उसे कम किया जा सकता है. उदाहरण के लिए, वेब ऐप्लिकेशन की मदद से लोकल झलक को बंद किया जा सकता है.
कैप्चर हैंडल के बारे में जानकारी
कैप्चर हैंडल में दो और हिस्से होते हैं:
- कैप्चर किए गए वेब ऐप्लिकेशन,
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 पर जाकर गड़बड़ी की शिकायत करें. कृपया ज़्यादा से ज़्यादा जानकारी दें और समस्या को फिर से बनाने के आसान निर्देश दें. Glitch कॉपी करके, उसे तुरंत और आसानी से शेयर करने का बेहतरीन तरीका है.
अपना सपोर्ट दिखाएं
क्या आपको कैप्चर हैंडल का इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, यह दूसरे ब्राउज़र वेंडर को भी यह दिखाती है कि उनकी मदद करना कितना ज़रूरी है.
@ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि आप इसका इस्तेमाल कहां और कैसे कर रहे हैं.
मददगार लिंक
स्वीकार हैं
इस लेख को पढ़ने के लिए, जो मेडली का धन्यवाद.