आधुनिक वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन में, बैकग्राउंड को धुंधला करने की सुविधा काफ़ी लोकप्रिय है. इसकी मदद से, कैमरे के सामने दिख रहे व्यक्ति और उसके बैकग्राउंड को अपने-आप अलग कर दिया जाता है. साथ ही, कैमरे के आस-पास की चीज़ों को धुंधला कर दिया जाता है और वीडियो में मौजूद व्यक्ति पर फ़ोकस बनाए रखा जा सकता है.
'बैकग्राउंड को धुंधला करने वाला एपीआई' वेब पर बैकग्राउंड को छिपाने की सुविधाएं देता है. इस एपीआई की मदद से, वेब ऐप्लिकेशन ऑपरेटिंग सिस्टम से, कैमरे के वीडियो फ़ीड में बैकग्राउंड को धुंधला करने का इफ़ेक्ट ठीक से लागू करने का अनुरोध कर सकते हैं. इससे, TensorFlow.js, MediaPipe या क्लाउड-आधारित जैसे मशीन लर्निंग फ़्रेमवर्क का इस्तेमाल करके, इफ़ेक्ट को मैन्युअल तरीके से लागू करने की ज़रूरत नहीं पड़ती. इन फ़्रेमवर्क के लिए, हर वीडियो फ़्रेम को अलग-अलग प्रोसेस करना पड़ता है.
बैकग्राउंड को धुंधला करने वाले एपीआई की सुविधा चालू करें
डिफ़ॉल्ट रूप से, Chrome में बैकग्राउंड को धुंधला करने वाला एपीआई चालू नहीं है. हालांकि, Chrome 114 में इस सुविधा को साफ़ तौर पर चालू करके, इसे आज़माया जा सकता है. chrome://flags/#enable-experimental-web-platform-features पर "प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं" फ़्लैग करें को चालू करके, इसे स्थानीय तौर पर चालू किया जा सकता है.
इस सुविधा को आपके ऐप्लिकेशन पर आने वाले सभी लोगों के लिए चालू करने के लिए, फ़िलहाल ऑरिजिन ट्रायल पर काम चल रहा है. इसे Chrome 117 (3 नवंबर, 2023) में खत्म करने के लिए सेट किया गया है. मुफ़्त में आज़माने की सुविधा में हिस्सा लेने के लिए, साइन अप करें और एचटीएमएल या एचटीटीपी हेडर में ऑरिजिन ट्रायल टोकन वाला मेटा एलिमेंट शामिल करें. ज़्यादा जानकारी के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करना पोस्ट देखें.
बैकग्राउंड को धुंधला करने की सुविधा में हुए बदलावों पर नज़र रखें
MediaStreamTrack पर backgroundBlur बूलियन सेटिंग की मदद से, यह जाना जा सकता है कि ऑपरेटिंग सिस्टम, मीडिया डिवाइस पर बैकग्राउंड को धुंधला करता है या नहीं. इसके अलावा, जब उपयोगकर्ता ऑपरेटिंग सिस्टम के हिसाब से बैकग्राउंड को धुंधला करने की सुविधा को चालू या बंद करता है, तो MediaStreamTrack को "configurationchange" इवेंट ट्रिगर होता है.
नीचे दिया गया कोड स्निपेट, उस मीडिया डिवाइस पर बैकग्राउंड को धुंधला करने की प्रोसेस में होने वाले बदलावों को मॉनिटर करने का तरीका बताता है जिसे उपयोगकर्ता ने ऐक्सेस किया है.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Read current background blur value.
const [track] = stream.getVideoTracks();
let { backgroundBlur } = track.getSettings();
console.log(`Background blur is ${backgroundBlur ? "ON" : "OFF"}`);
// Listen to background blur changes.
track.addEventListener("configurationchange", () => {
if (backgroundBlur !== track.getSettings().backgroundBlur) {
backgroundBlur = track.getSettings().backgroundBlur;
console.log(`Background blur is now ${backgroundBlur ? "ON" : "OFF"}`);
}
});
बैकग्राउंड को धुंधला करने के लिए टॉगल करें
MediaStreamTrack में backgroundBlur के कलेक्शन की क्षमता की मदद से, यह पता लगाया जा सकता है कि मीडिया डिवाइस पर बैकग्राउंड को धुंधला किया जा सकता है या नहीं. अगर इसके लिए कोई वैल्यू नहीं तय की गई है या उसमें सिर्फ़ एक वैल्यू ([true] या [false]) है, तो कैमरे के बैकग्राउंड को धुंधला करने की सुविधा को कंट्रोल नहीं किया जा सकता. अगर इसमें दो वैल्यू हैं, तो आप ऑपरेटिंग सिस्टम से, कैमरे के वीडियो फ़ीड पर बैकग्राउंड को धुंधला करने के इफ़ेक्ट को टॉगल करने का अनुरोध करने के लिए, MediaStreamTrack पर applyConstraints() तरीके का इस्तेमाल कर सकते हैं. वापस किया गया प्रॉमिस सफल होने पर और गड़बड़ी होने पर अस्वीकार हो जाएगा.
नीचे दिया गया कोड स्निपेट, उस मीडिया डिवाइस पर कैमरे के बैकग्राउंड को धुंधला करने की सुविधा को कंट्रोल करने का तरीका बताता है जिसका ऐक्सेस उपयोगकर्ता ने दिया है.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Check whether the user can toggle background blur in the web app.
// If not, note that you may still want to apply it through a fallback
// software solution.
const [track] = stream.getVideoTracks();
if (track.getCapabilities().backgroundBlur?.length === 2) {
const button = document.querySelector("button");
button.addEventListener("click", toggleBackgroundBlurButtonClick);
button.disabled = false;
}
async function toggleBackgroundBlurButtonClick() {
const constraints = {
backgroundBlur: !track.getSettings().backgroundBlur,
};
// Request operating system to toggle background blur.
await track.applyConstraints(constraints);
const newSettings = track.getSettings();
log(`Background blur is now ${newSettings.backgroundBlur ? "ON" : "OFF"}`);
}
प्लैटफ़ॉर्म से जुड़ी सहायता
बैकग्राउंड को धुंधला करने वाला एपीआई, ChromeOS, macOS, और Windows पर Chrome 114 में उपलब्ध है.
फ़िलहाल, ChromeOS और macOS पर, बैकग्राउंड को धुंधला करने की सुविधा में सिर्फ़ ऐसे बदलाव देखे जा सकते हैं जो उपयोगकर्ता अपने ऑपरेटिंग सिस्टम के यूज़र इंटरफ़ेस (यूआई) से कर सकते हैं. जैसे, macOS में Control Center. Windows में, बैकग्राउंड को धुंधला करने की सुविधा पर नज़र रखी जा सकती है और उसे कंट्रोल किया जा सकता है.
डेमो
आधिकारिक सैंपल के साथ चलाकर, बैकग्राउंड को धुंधला किया जा सकता है और बदलावों पर नज़र रखी जा सकती है. (जैसा कि पहले बताया गया था, उन सुविधाओं की उपलब्धता प्लैटफ़ॉर्म की सहायता पर निर्भर करती है.)
सुझाव/राय दें या शिकायत करें
इस चरण में डेवलपर के सुझाव काफ़ी अहम होते हैं. इसलिए, कृपया सुझावों और सवालों के साथ GitHub पर समस्याएं दर्ज करें.
हम यह जानना चाहेंगे कि बैकग्राउंड को धुंधला करने की सुविधा को बूलियन वैल्यू के तौर पर दिखाना आपकी ज़रूरतों के हिसाब से सही है या नहीं. इसके अलावा, हम यह जानना चाहेंगे कि बैकग्राउंड को धुंधला करने की सुविधा को बेहतर बनाने के लिए क्या करना चाहिए, जैसे कि "रोशनी", "मज़बूत", "बंद". भले ही, वह सभी ऑपरेटिंग सिस्टम पर दिखने वाली चीज़ों के साथ काम न करता हो.
काम के कुछ लिंक
- पूरी जानकारी
- खास जानकारी
- Chromium ट्रैकिंग की गड़बड़ी
- ChromeStatus.com एंट्री
- टैग की समीक्षा
- प्रयोग करने की इच्छा
हीरो इमेज, आयो ओगुनसींडे की ओर से.