स्क्रीन कैप्चर एपीआई की मदद से उपयोगकर्ता, मीडिया स्ट्रीम के तौर पर कैप्चर करने के लिए किसी टैब, विंडो या स्क्रीन को चुन सकते हैं. इसके बाद, इस स्ट्रीम को रिकॉर्ड किया जा सकता है या इसे नेटवर्क पर दूसरे लोगों के साथ शेयर किया जा सकता है. इस दस्तावेज़ में 'कंडिशनल फ़ोकस' सुविधा के बारे में जानकारी दी गई है. यह वेब ऐप्लिकेशन की एक ऐसी सुविधा है जो यह कंट्रोल करती है कि कैप्चर किए गए टैब या विंडो को कैप्चर करते समय, फ़ोकस किया जाएगा या नहीं या कैप्चर करने वाले पेज पर फ़ोकस रहेगा या नहीं.
ब्राउज़र समर्थन
Chrome 109 में 'कंडिशनल फ़ोकस' की सुविधा उपलब्ध है.
बैकग्राउंड
जब कोई वेब ऐप्लिकेशन किसी टैब या विंडो को कैप्चर करना शुरू करता है, तो इस बारे में ब्राउज़र पर फ़ैसला होता है कि कैप्चर किए गए पेज को सबसे पहले दिखाना चाहिए या कैप्चर करने वाले पेज को फ़ोकस में रखना चाहिए? इस सवाल का जवाब, getDisplayMedia() को कॉल करने की वजह के आधार पर तय किया जाता है. यह इस बात पर भी निर्भर करता है कि व्यक्ति किस वजह से कॉल चुनता है.
किसी काल्पनिक वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन के बारे में सोचें. track.getSettings().displaySurface को पढ़कर और कैप्चर हैंडल की जांच करके, वीडियो कॉन्फ़्रेंसिंग हैंडल यह समझ सकता है कि उपयोगकर्ता ने क्या शेयर किया. इसके बाद:
- अगर कैप्चर किए गए टैब या विंडो को दूर से कंट्रोल किया जा सकता है, तो वीडियो कॉन्फ़्रेंस पर फ़ोकस रखें.
- अगर ऐसा नहीं है, तो कैप्चर किए गए टैब या विंडो पर फ़ोकस करें.
ऊपर दिए गए उदाहरण में, अगर स्लाइड डेक शेयर करने से उपयोगकर्ता दूर से स्लाइड फ़्लिप कर सकता है, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन फ़ोकस बनाए रखेगा. हालांकि, अगर उपयोगकर्ता ने टेक्स्ट एडिटर शेयर करने का विकल्प चुना है, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन फ़ोकस को तुरंत कैप्चर किए गए टैब या विंडो पर स्विच कर देगा.
स्थिति के हिसाब से फ़ोकस एपीआई का इस्तेमाल करना
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 को ट्वीट भेजें और हमें बताएं कि उनका इस्तेमाल कहां और कैसे किया जा रहा है.
मददगार लिंक
स्वीकार की गई
एलेना तारानेंको की हीरो इमेज.
इस लेख को पढ़ने के लिए, रेचल एंड्रयू का धन्यवाद.