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

François Beaufort

Elad Alon

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

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

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

getDisplayMedia() में किए गए बदलाव

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

displaySurface विकल्प

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

displaySurface विकल्प के लिए ये वैल्यू उपलब्ध हैं:

• टैब के लिए "browser".
• "window" for windows.
• "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" है. हालांकि, वेब ऐप्लिकेशन को इसे साफ़ तौर पर सेट करने का सुझाव दिया जाता है, क्योंकि आने वाले समय में डिफ़ॉल्ट वैल्यू बदल सकती है.

डेमो

डेमो चलाकर, स्क्रीन शेयर करने के इन कंट्रोल का इस्तेमाल किया जा सकता है.

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

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

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

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

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

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

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

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

• GitHub repo पर स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

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

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

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

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

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

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

मददगार लिंक

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

Acknowledgements

समीक्षा करने के लिए Rachel Andrew को धन्यवाद