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

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 रेपो में, स्पेसिफ़िकेशन की समस्या दर्ज करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

क्या लागू करने में कोई समस्या हुई?

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

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

सपोर्ट करें

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

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

मददगार लिंक

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

स्वीकार की गई

हीरो इमेज, जिसे जॉन श्नोब्रिच ने बनाया है.

इस लेख को पढ़ने के लिए, रेचल एंड्रयू का धन्यवाद.