निजता बनाए रखने वाली स्क्रीन शेयर करने के कंट्रोल

François Beaufort

Elad Alon

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

यहां उन कंट्रोल की सूची दी गई है जिनका इस्तेमाल, निजता बनाए रखते हुए स्क्रीन शेयर करने के लिए किया जा सकता है:

• displaySurface विकल्प से यह पता चल सकता है कि वेब ऐप्लिकेशन, किसी खास डिसप्ले प्लैटफ़ॉर्म (टैब, विंडो या स्क्रीन) को दिखाना चाहता है.
• monitorTypeSurfaces विकल्प का इस्तेमाल करके, उपयोगकर्ता को पूरी स्क्रीन शेयर करने से रोका जा सकता है.
• surfaceSwitching विकल्प से पता चलता है कि Chrome को उपयोगकर्ता को शेयर किए गए टैब के बीच डाइनैमिक तौर पर स्विच करने की अनुमति देनी चाहिए या नहीं.
• selfBrowserSurface विकल्प का इस्तेमाल करके, उपयोगकर्ता को मौजूदा टैब शेयर करने से रोका जा सकता है. इससे "हॉल ऑफ़ मिरर" इफ़ेक्ट से बचा जा सकता है.
• systemAudio विकल्प से यह पक्का होता है कि Chrome, उपयोगकर्ता को सिर्फ़ काम का ऑडियो-कैप्चर दिखाए.

getDisplayMedia() में हुए बदलाव

getDisplayMedia() में ये बदलाव किए गए हैं.

displaySurface विकल्प

वेब ऐप्लिकेशन में उपयोगकर्ताओं के लिए खास तरह के अनुभव होते हैं. ये ऐप्लिकेशन, विंडो या स्क्रीन शेयर करने के साथ सबसे अच्छा काम करते हैं. ऐसे में, वे अब भी Chrome से मीडिया पिकर में विंडो या स्क्रीन को ज़्यादा प्रमुखता से दिखाने के लिए कह सकते हैं. ऑफ़र का क्रम नहीं बदलता, लेकिन काम का पैनल पहले से चुना हुआ होता है.

displaySurface विकल्प की वैल्यू ये हैं:

• "browser" टैब के लिए.
• "window" के लिए.
• "monitor" के लिए.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

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

monitorTypeSurfaces विकल्प

कर्मचारियों की गलती से निजी जानकारी लीक होने से कंपनियों को बचाने के लिए, वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन अब monitorTypeSurfaces को "exclude" पर सेट कर सकते हैं. इसके बाद, Chrome मीडिया पिकर से स्क्रीन हटा देगा. इसे शामिल करने के लिए, इसे "include" पर सेट करें. फ़िलहाल, monitorTypeSurfaces की डिफ़ॉल्ट वैल्यू "include" है. हालांकि, वेब ऐप्लिकेशन के लिए इसे साफ़ तौर पर सेट करने का सुझाव दिया जाता है, क्योंकि आने वाले समय में डिफ़ॉल्ट वैल्यू बदल सकती है.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

ध्यान दें कि साफ़ तौर पर दिखाया गया monitorTypeSurfaces: "exclude", displaySurface: "monitor" के साथ म्युचुअलली इक्सक्लूज़िव है.

surfaceSwitching विकल्प

पूरी स्क्रीन शेयर करने की सबसे ज़्यादा बताई गई वजह यह है कि किसी सेशन के दौरान, अलग-अलग प्लैटफ़ॉर्म के बीच आसानी से स्विच किया जा सके. इस समस्या को हल करने के लिए, Chrome में अब एक बटन जोड़ा गया है. इसकी मदद से, उपयोगकर्ता अलग-अलग टैब को शेयर करने के बीच डाइनैमिक तौर पर स्विच कर सकता है. "इस टैब को शेयर करें" बटन, पहले Chrome एक्सटेंशन के लिए उपलब्ध था. अब इसका इस्तेमाल, getDisplayMedia() को कॉल करने वाले किसी भी वेब ऐप्लिकेशन के लिए किया जा सकता है.

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

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

selfBrowserSurface विकल्प

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

उपयोगकर्ताओं को खुद से बचाने के लिए, वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन अब selfBrowserSurface को "exclude" पर सेट कर सकते हैं. इसके बाद, Chrome उस टैब को उपयोगकर्ता को दिखाए जाने वाले टैब की सूची से हटा देगा. इसे शामिल करने के लिए, इसे "include" पर सेट करें. फ़िलहाल, selfBrowserSurface की डिफ़ॉल्ट वैल्यू "exclude" है. हालांकि, वेब ऐप्लिकेशन के लिए इसे साफ़ तौर पर सेट करने का सुझाव दिया जाता है, क्योंकि आने वाले समय में डिफ़ॉल्ट वैल्यू बदल सकती है.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

ध्यान दें कि साफ़ तौर पर दिखाया गया selfBrowserSurface: "exclude", preferCurrentTab: true के साथ काम नहीं करता.

systemAudio विकल्प

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

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

systemAudio को "exclude" पर सेट करके, वेब ऐप्लिकेशन में उपयोगकर्ताओं को अलग-अलग सिग्नल मिलने से रोका जा सकता है. Chrome, टैब और विंडो के साथ-साथ ऑडियो कैप्चर करने की सुविधा देगा. हालांकि, स्क्रीन के साथ-साथ ऑडियो कैप्चर नहीं किया जा सकेगा.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

फ़िलहाल, systemAudio की डिफ़ॉल्ट वैल्यू "include" है. हालांकि, वेब ऐप्लिकेशन के लिए इसे साफ़ तौर पर सेट करने का सुझाव दिया जाता है, क्योंकि आने वाले समय में डिफ़ॉल्ट वैल्यू बदल सकती है.

डेमो

स्क्रीन शेयर करने के इन कंट्रोल को आज़माने के लिए, Glitch पर डेमो चलाएं. सोर्स कोड देखना न भूलें.

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

• displaySurface, surfaceSwitching, और selfBrowserSurface, डेस्कटॉप पर Chrome 107 में उपलब्ध हैं.

• systemAudio, डेस्कटॉप पर Chrome 105 में उपलब्ध है.

• monitorTypeSurfaces, डेस्कटॉप पर Chrome 119 में उपलब्ध है.

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

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

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

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

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

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

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

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

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

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

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

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

• खास जानकारी
• displaySurface एक्सप्लेनर
• monitorTypeSurfaces एक्सप्लेनर
• surfaceSwitching एक्सप्लेनर
• selfBrowserSurface एक्सप्लेनर
• systemAudio एक्सप्लेनर
• टैग की समीक्षा

आभार

समीक्षा करने के लिए रेचल एंड्रयू को धन्यवाद