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

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

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

'शर्त के साथ फ़ोकस' सुविधा 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 रिपो पर कोई खास समस्या फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.

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

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

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

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

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

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

मददगार लिंक

• खास जानकारी
• एक्सप्लेनर
• टैग की समीक्षा

स्वीकार हैं

हीरो इमेज, एलेना तारानेंको ने.

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