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

François Beaufort

Elad Alon

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

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

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

बैकग्राउंड

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

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

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

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

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() से मिले प्रॉमिस के रिज़ॉल्व होने के बाद.

नमूना

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

सुविधा का पता लगाना

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

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

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

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

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

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

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

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

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

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

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

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

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

मददगार लिंक

• खास जानकारी
• ज़्यादा जानकारी
• TAG की समीक्षा

Acknowledgements

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

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