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

François Beaufort
François Beaufort

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

अलग-अलग टैब शेयर करने के बीच डाइनैमिक तौर पर स्विच करने के लिए इस्तेमाल किए जाने वाले बटन का स्क्रीनशॉट
Chrome में "इसके बजाय यह टैब शेयर करें" बटन.

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

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

मीडिया पिकर के स्क्रीनशॉट, जिनमें टैब का ऑडियो शेयर करने की सुविधा दिखाई गई है
टैब का ऑडियो शेयर करने की सुविधा, "Chrome टैब" पैनल में मिलती है, लेकिन "पूरी स्क्रीन" पैनल में नहीं.

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 में उपलब्ध हैं.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 105.
  • Edge: 105.
  • Firefox: समर्थित नहीं.
  • Safari: यह सुविधा काम नहीं करती.

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 119.
  • Edge: 119.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: समर्थित नहीं.

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

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

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

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

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

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

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

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

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

सपोर्ट करें

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

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

धन्यवाद

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