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

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

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

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

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

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

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

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

मददगार लिंक

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

धन्यवाद

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