इस वेब प्लैटफ़ॉर्म पर, वेब ऐप्लिकेशन को पहले से ही मौजूदा टैब का वीडियो ट्रैक कैप्चर करने की सुविधा मिलती है. इसे अब 'क्षेत्र कैप्चर करने की सुविधा' की मदद से शिप किया जा रहा है. इस सुविधा से, वीडियो ट्रैक को क्रॉप किया जा सकता है. वेब ऐप्लिकेशन, मौजूदा टैब के किसी हिस्से को अपनी पसंद की जगह के तौर पर दिखाता है और ब्राउज़र उस हिस्से से बाहर के सभी पिक्सल काट देता है.
वेब ऐप्लिकेशन, पहले वीडियो ट्रैक को “मैन्युअल तरीके से” काट सकते थे. इसका मतलब है कि वेब ऐप्लिकेशन हर फ़्रेम में बदलाव कर सकते थे. यह न तो शानदार था और न ही बेहतर परफ़ॉर्म करने वाला. 'क्षेत्र कैप्चर करें', इन कमियों को ठीक करता है. वेब ऐप्लिकेशन अब ब्राउज़र को उसकी जगह पर काम करने का निर्देश दे सकता है.
इलाके की जानकारी कैप्चर करने की सुविधा के बारे में जानकारी
इसलिए आपने डाइनैमिक कॉन्टेंटTM के साथ एक वेबसाइट बना ली है. यह अब तक का सबसे अच्छा वेब ऐप्लिकेशन है और लोग इसका इस्तेमाल करना बंद नहीं कर सकते, क्योंकि इसमें अक्सर साथ मिलकर काम करने की ज़रूरत होती है. इसका एक संभावित चरण वर्चुअल कॉन्फ़्रेंसिंग क्षमताओं को शामिल करना है. आपने उसके साथ जाने का फ़ैसला किया. आपने वीडियो कॉन्फ़्रेंसिंग की सेवा देने वाली किसी मौजूदा कंपनी के साथ मिलकर, उसके वेब ऐप्लिकेशन को क्रॉस-ऑरिजिन iframe के तौर पर एम्बेड किया है. वीडियो कॉन्फ़्रेंसिंग का वेब ऐप्लिकेशन, मौजूदा टैब को वीडियो ट्रैक के तौर पर कैप्चर करता है और इसे, रिमोट सेशन में शामिल लोगों को भेजता है.
इतना तेज़ नहीं... आप लोगों के वीडियो को वापस उन पर पहुंचाना नहीं चाहते, क्या अब आप हैं? उस हिस्से को आसानी से काटें. लेकिन कैसे? एम्बेड किया गया iframe यह नहीं जानता कि आपने किस तरह का कॉन्टेंट दिखाया है और कहां दिखाया है. इसलिए, वह बिना किसी मदद के उसे क्रॉप नहीं कर सकता. सैद्धांतिक तौर पर, आप सही निर्देशांक पास कर सकते हैं. लेकिन, अगर उपयोगकर्ता विंडो का साइज़ बदल देता है, तो क्या होता है? व्यूपोर्ट को स्क्रोल करता है? ज़ूम इन या ज़ूम आउट करता है? क्या पेज के साथ इस तरह इंटरैक्ट करता है जिससे लेआउट में बदलाव होता है? अगर आपने iframe कैप्चर करने के लिए नए निर्देशांक भेजे हैं, तो भी समय की वजह से कुछ गलत फ़्रेम हो सकते हैं.
आइए, 'क्षेत्र कैप्चर करने की सुविधा' का इस्तेमाल करते हैं. आपके पेज पर Element है, हो सकता है कि <div> जिसमें मुख्य कॉन्टेंट शामिल हो. चलिए, इसे mainContentArea नाम देते हैं. आपकी इच्छा है कि वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन, इस एलिमेंट के बाउंडिंग बॉक्स में बताए गए इलाके को रिमोट तरीके से कैप्चर और शेयर करे. इसलिए, आपको mainContentArea से CropTarget मिलता है. आपने इस CropTarget को वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन पर भेजा है. इस CropTarget का इस्तेमाल करके, वीडियो ट्रैक को काटने के बाद, उस ट्रैक पर फ़्रेम में सिर्फ़ वे पिक्सल होंगे जो mainContentArea के बाउंडिंग बॉक्स में आते हैं. अगर mainContentArea, साइज़, आकार या जगह में बदलाव करता है, तो वीडियो ट्रैक साथ-साथ चलता है. इसके लिए, किसी भी वेब ऐप्लिकेशन से अलग से इनपुट देने की ज़रूरत नहीं होती.
आइए, फिर से इन चरणों पर जाएं:
इनपुट के तौर पर अपनी पसंद के एलिमेंट से CropTarget.fromElement() को कॉल करके, वेब ऐप्लिकेशन में CropTarget को परिभाषित किया जाता है.
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
इसके लिए, CropTarget को वीडियो कॉन्फ़्रेंसिंग के वेब ऐप्लिकेशन पर भेजा जाता है.
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
वीडियो कॉन्फ़्रेंसिंग का वेब ऐप्लिकेशन, ब्राउज़र से CropTarget के तय किए गए इलाके के हिसाब से, ट्रैक को काटने के लिए कहता है. इसके लिए, मुख्य वेब ऐप्लिकेशन से मिले टारगेट के हिसाब से, सेल्फ़-कैप्चर वीडियो ट्रैक पर cropTo() को कॉल किया जाता है.
// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);
// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.
क्या बात है! आपका काम हो गया.
गहराई से जानें
सुविधा की पहचान
यह देखने के लिए कि CropTarget.fromElement() काम करता है या नहीं, इनका इस्तेमाल करें:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
क्रॉप टारगेट हासिल करना
आइए, mainContentArea नाम के एलिमेंट पर फ़ोकस करते हैं. इससे CropTarget पाने के लिए, CropTarget.fromElement(mainContentArea) पर कॉल करें. नतीजे में मिला प्रॉमिस, नए CropTarget ऑब्जेक्ट के साथ रिज़ॉल्व किया जाएगा. अगर आपने गलत संख्या में CropTarget ऑब्जेक्ट मिंट किए हैं, तो इसे अस्वीकार कर दिया जाएगा.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Element के उलट, CropTarget ऑब्जेक्ट को क्रम से लगाया जा सकता है. उदाहरण के लिए, इसे Window.postMessage() का इस्तेमाल करके किसी दूसरे दस्तावेज़ में भेजा जा सकता है.
कांट-छांट करना
टैब-कैप्चर करते समय, वीडियो ट्रैक BrowserCaptureMediaStreamTrack के रूप में इंस्टैंशिएट हो जाता है, जो MediaStreamTrack की सब-क्लास है. इस सब-क्लास से, cropTo() के बारे में जानकारी मिलती है. mainContentArea (वह एलिमेंट जिससे क्रॉप टारगेट लिया गया था) के कंटूर को काटना शुरू करने के लिए, track.cropTo(cropTarget) को कॉल करें.
अगर समझौता पूरा हो जाता है, तो प्रोमिस को तभी बंद किया जाएगा, जब इस बात की गारंटी दी जा सकती हो कि बाद के सभी वीडियो फ़्रेम में वे पिक्सल होंगे जो mainContentArea के बाउंडिंग बॉक्स में आते हैं.
अगर ऐसा नहीं हो पाता है, तो प्रोमिस को अस्वीकार कर दिया जाएगा. ऐसा तब होगा, जब:
CropTargetको किसी दूसरे टैब में खोला गया था. (अभी के लिए - हमारे साथ बने रहें.)CropTargetको ऐसे एलिमेंट से लिया गया था जो अब मौजूद नहीं है.- ट्रैक में क्लोन शामिल हैं. (समस्या 1509418 देखें.)
- मौजूदा ट्रैक सेल्फ़-कैप्चर वीडियो ट्रैक नहीं है; नीचे देखें.
cropTo() तरीका किसी भी टैब-कैप्चर वीडियो ट्रैक पर दिखाया जा सकता है, न कि सिर्फ़ खुद कैप्चर करने के लिए. इसलिए, हमारा सुझाव है कि ट्रैक को काटने से पहले, यह देख लें कि उपयोगकर्ता ने मौजूदा टैब को चुना है या नहीं. ऐसा करने के लिए, कैप्चर हैंडल का इस्तेमाल करें. ब्राउज़र से यह भी कहा जा सकता है कि वह उपयोगकर्ता को preferCurrentTab का इस्तेमाल करके, आपका कॉन्टेंट खुद कैप्चर करने के लिए कहे.
// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);
काटा न गया होने की स्थिति पर वापस जाने के लिए, null से cropTo() को कॉल करें.
// Stop cropping.
await track.cropTo(null);
शामिल और रोका गया कॉन्टेंट
क्षेत्र कैप्चर करने के लिए, सिर्फ़ टारगेट सामग्री की स्थिति और आकार, z-index नहीं. टारगेट में शामिल पिक्सल कैप्चर कर लिए जाएंगे. टारगेट के शामिल नहीं किए गए हिस्सों को कैप्चर नहीं किया जाएगा.
यह 'क्षेत्र कैप्चर' को मुख्य रूप से काटा जा रहा है. एलिमेंट-लेवल कैप्चर, इसका एक और विकल्प है. यह आने वाले समय में एपीआई के तौर पर काम करेगा. इसका मतलब है कि किसी भी रुकावट के बिना, सिर्फ़ टारगेट से जुड़े पिक्सल कैप्चर करें. ऐसे एपीआई के लिए, सुरक्षा और निजता से जुड़ी ज़रूरी शर्तें, आसानी से क्रॉप करने की सुविधा से अलग होती हैं.
सुरक्षा और निजता
क्षेत्र कैप्चर करने से उस वेब ऐप्लिकेशन को अनुमति मिलती है जो टैब में पहले से ही सभी पिक्सल को देख रहा है और अपने-आप उनमें से कुछ पिक्सल हटा देता है. यह पूरी तरह सुरक्षित है, क्योंकि कोई भी नई जानकारी हासिल नहीं की जा सकती.
'क्षेत्र कैप्चर करने की सुविधा' का इस्तेमाल करके, यह तय किया जा सकता है कि दूर से काम करने वाले लोगों को कौनसी जानकारी भेजी जाए. उदाहरण के लिए, हो सकता है कि आपको कुछ स्लाइड शेयर करनी हो, लेकिन प्रज़ेंटर के नोट शेयर न करने हों.
किसी भी जगह से नोट शेयर करने की ज़रूरत नहीं है. क्यू क्षेत्र कैप्चर करें.
ध्यान दें कि स्थानीय तौर पर, 'क्षेत्र कैप्चर' सुविधा, सुरक्षा की कोई गारंटी नहीं देती. ट्रैक को किसी दूसरे दस्तावेज़ के साथ जोड़ते समय, पाने वाला दस्तावेज़ अब भी ट्रैक को अनकाट कर सकता है और कैप्चर किए गए सभी टैब के पिक्सल को ऐक्सेस कर सकता है.
Chrome कैप्चर किए गए टैब के किनारों के चारों ओर नीले रंग का बॉर्डर बनाता है. क्रॉप करते समय, Chrome आम तौर पर काटे जाने वाले टारगेट के चारों ओर नीला बॉर्डर बना देता है.
डेमो
आप Glitch पर डेमो चलाकर, क्षेत्र कैप्चर करने की सुविधा का इस्तेमाल कर सकते हैं. सोर्स कोड की जांच करना न भूलें.
ब्राउज़र समर्थन
ब्राउज़र सहायता
- 104
- 104
- x
- x
क्षेत्र कैप्चर करने की सुविधा, Chrome 104 में सिर्फ़ डेस्कटॉप पर उपलब्ध है.
आगे क्या करना है
आने वाले समय में, वेब पर स्क्रीन शेयर करने की सुविधा को बेहतर बनाने के लिए, क्या किया जा सकता है, इसकी झलक यहां दी गई है:
- क्षेत्र कैप्चर करने की सुविधा से दूसरे टैब कैप्चर किए जा सकते हैं.
- शर्त के साथ फ़ोकस करने की सुविधा की मदद से, कैप्चर करने वाला वेब ऐप्लिकेशन, ब्राउज़र को यह निर्देश दे पाएगा कि वह कैप्चर की गई डिसप्ले सतह पर फ़ोकस करे या फ़ोकस में बदलाव से बचें.
- आपको एलिमेंट-लेवल कैप्चर एपीआई दिया जा सकता है.
सुझाव/राय दें या शिकायत करें
Chrome टीम और वेब मानकों वाला समुदाय, क्षेत्र कैप्चर करने से जुड़े आपके अनुभव के बारे में जानना चाहता है.
हमें इसके डिज़ाइन के बारे में बताएं
क्या 'क्षेत्र कैप्चर' में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? इसके अलावा, क्या कोई ऐसी प्रॉपर्टी या तरीके हैं जिनकी मदद से अपने आइडिया को लागू किया जा सकता है? सुरक्षा मॉडल पर आपका कोई प्रश्न या टिप्पणी है?
- GitHub रिपो पर कोई खास समस्या फ़ाइल करें या किसी मौजूदा समस्या में अपने विचार जोड़ें.
क्या लागू करने में कोई समस्या हुई?
क्या आपको Chrome के सही तरीके से काम करने में कोई गड़बड़ी मिली? या फिर लागू किया जाने वाला तरीका खास जानकारी से अलग है?
- https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. कृपया ज़्यादा से ज़्यादा जानकारी दें और समस्या को फिर से बनाने के आसान निर्देश दें. Glitch कॉपी करके, उसे तुरंत और आसानी से शेयर करने का बेहतरीन तरीका है.
अपना सपोर्ट दिखाएं
क्या आप 'क्षेत्र कैप्चर करें' का इस्तेमाल करने के बारे में सोच रहे हैं? आपकी सार्वजनिक सहायता से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, यह दूसरे ब्राउज़र वेंडर को भी यह दिखाती है कि उनकी मदद करना कितना ज़रूरी है.
@ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि आप इसका इस्तेमाल कहां और कैसे कर रहे हैं.
मददगार लिंक
स्वीकार हैं
इस लेख को पढ़ने के लिए, जो मेडली का धन्यवाद.