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

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub
एलाद एलोन
एलाद अलोन
GitHub

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

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

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

getDisplayMedia() में बदलाव

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

displaySurface का विकल्प

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

displaySurface विकल्प के लिए वैल्यू इस तरह हैं:

  • टैब के लिए "browser".
  • Windows के लिए "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 पर डेमो चलाकर, इन स्क्रीन शेयर करने की सेटिंग का इस्तेमाल कर सकते हैं. सोर्स कोड की जांच करना न भूलें.

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

ब्राउज़र सहायता

  • 107
  • 107
  • x
  • 11.1

सोर्स

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

ब्राउज़र सहायता

  • 105
  • 105
  • x
  • x

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

ब्राउज़र सहायता

  • 119
  • 119
  • x
  • x

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

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

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

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

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

  • GitHub रिपो पर कोई खास समस्या फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.

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

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

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

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

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

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

स्वीकार हैं

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

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