इस पेज का अनुवाद Cloud Translation API से किया गया है.

'शर्त के साथ फ़ोकस' सुविधा की मदद से बेहतर तरीके से स्क्रीन शेयर करना

François Beaufort

Elad Alon

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

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

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

शर्तों के हिसाब से फ़ोकस करने की सुविधा, Chrome 109 से उपलब्ध है.

बैकग्राउंड

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

वीडियो कॉन्फ़्रेंसिंग की सुविधा देने वाले किसी कल्पित वेब ऐप्लिकेशन पर विचार करें. track.getSettings().displaySurface को पढ़कर और कैप्चर हैंडल की जांच करके, वीडियो कॉन्फ़्रेंसिंग की सुविधा देने वाला वेब ऐप्लिकेशन यह समझ सकता है कि उपयोगकर्ता ने क्या शेयर करने का विकल्प चुना है. इसके बाद:

अगर कैप्चर किए गए टैब या विंडो को रिमोट से कंट्रोल किया जा सकता है, तो वीडियो कॉन्फ़्रेंस को फ़ोकस में रखें.
अगर ऐसा नहीं है, तो कैप्चर किए गए टैब या विंडो पर फ़ोकस करें.

ऊपर दिए गए उदाहरण में, स्लाइड डेक शेयर करने पर, वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन पर फ़ोकस बना रहेगा. इससे उपयोगकर्ता, स्लाइड को रिमोट तौर पर फ़्लिप कर सकता है. हालांकि, अगर उपयोगकर्ता ने टेक्स्ट एडिटर शेयर करने का विकल्प चुना, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन तुरंत कैप्चर किए गए टैब या विंडो पर फ़ोकस कर देगा.

Conditional Focus API का इस्तेमाल करना

CaptureController को इंस्टैंशिएट करें और उसे getDisplayMedia() को पास करें. getDiplayMedia() से मिलने वाले प्रॉमिस के पूरा होने के तुरंत बाद setFocusBehavior() को कॉल करके, यह कंट्रोल किया जा सकता है कि कैप्चर किए गए टैब या विंडो पर फ़ोकस किया जाए या नहीं. ऐसा सिर्फ़ तब किया जा सकता है, जब उपयोगकर्ता ने कोई टैब या विंडो शेयर की हो.

const controller = new CaptureController();

// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("focus-capturing-application");
}

फ़ोकस करने या न करने का फ़ैसला लेते समय, कैप्चर हैंडल को ध्यान में रखा जा सकता है.

// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
  controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
  controller.setFocusBehavior("focus-captured-surface");
}

getDisplayMedia() को कॉल करने से पहले, यह भी तय किया जा सकता है कि फ़ोकस करना है या नहीं.

// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

setFocusBehavior() को वादा पूरा होने से पहले, जितनी बार चाहें उतनी बार कॉल किया जा सकता है. इसके अलावा, वादा पूरा होने के तुरंत बाद, इसे एक बार से ज़्यादा कॉल नहीं किया जा सकता. आखिरी बार किए गए अनुरोध, पहले किए गए सभी अनुरोधों को बदल देते हैं.

ज़्यादा सटीक तरीके से: - getDisplayMedia() से मिलने वाला प्रॉमिस, माइक्रोटास्क पर पूरा होता है. उस माइक्रोटास्क के पूरा होने के बाद, setFocusBehavior() को कॉल करने पर गड़बड़ी का मैसेज दिखता है. - कैप्चर शुरू होने के एक सेकंड बाद setFocusBehavior() को कॉल करने से कोई कार्रवाई नहीं होती.

इसका मतलब है कि ये दोनों स्निपेट काम नहीं करेंगे:

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
  controller.setFocusBehavior("focus-captured-surface");
});

// Prompt the user to share their screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const start = new Date();
while (new Date() - start <= 1000) {
  // Idle for ≈1s.
}

// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");

setFocusBehavior() को कॉल करने पर, इन स्थितियों में भी गड़बड़ी का मैसेज दिखता है:

getDisplayMedia() से मिली स्ट्रीम का वीडियो ट्रैक "लाइव" नहीं है.
getDisplayMedia() से मिले प्रॉमिस के रिज़ॉल्व होने के बाद, अगर उपयोगकर्ता ने कोई स्क्रीन शेयर की है, तो टैब या विंडो नहीं.

नमूना

Glitch पर डेमो चलाकर, शर्तों के हिसाब से फ़ोकस करने की सुविधा को आज़माया जा सकता है. सोर्स कोड देखना न भूलें.

फ़ीचर का पता लगाना

यह देखने के लिए कि CaptureController.setFocusBehavior() काम करता है या नहीं, इनका इस्तेमाल करें:

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

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

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

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

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

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

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

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

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

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

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

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

मदद के लिए लिंक

आभार

Elena Taranenko की हीरो इमेज.

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