बैकग्राउंड को धुंधला करने की सुविधा, आधुनिक वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन में एक लोकप्रिय सुविधा है. इस सुविधा की मदद से, कैमरे के सामने आने वाले व्यक्ति के बैकग्राउंड को अपने-आप अलग कर दिया जाता है. साथ ही, कैमरे के आस-पास की चीज़ों को धुंधला किया जाता है और उस व्यक्ति पर फ़ोकस बनाए रखा जाता है.
बैकग्राउंड को धुंधला करने वाले एपीआई की मदद से, वेब पर बैकग्राउंड को छिपाने की सुविधाएं मिलती हैं. इस एपीआई की मदद से, वेब ऐप्लिकेशन ऑपरेटिंग सिस्टम से कह सकते हैं कि वह कैमरे के वीडियो फ़ीड में बैकग्राउंड धुंधला करने वाला इफ़ेक्ट लागू करे. इससे TensorFlow.js, Media ट्रैकिंग या क्लाउड-आधारित समाधान जैसे मशीन लर्निंग फ़्रेमवर्क के ज़रिए, इफ़ेक्ट को मैन्युअल तरीके से लागू करने की महंगी ज़रूरत नहीं पड़ती. इन फ़्रेमवर्क के लिए हर वीडियो फ़्रेम को अलग-अलग प्रोसेस करना पड़ता है.
Background Blur API को चालू करना
डिफ़ॉल्ट रूप से, 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 पर समस्याएं दर्ज करें.
हम इस बारे में आपके विचार जानना चाहेंगे कि क्या बैकग्राउंड ब्लर को बूलियन वैल्यू के रूप में दिखाने से आपकी ज़रूरतों को पूरा किया जा सकता है या "लाइट", "स्ट्रॉन्ग", "बंद" जैसा ज़्यादा बारीकी से विश्लेषण किया जा सकता है या नहीं. भले ही, यह सभी ऑपरेटिंग सिस्टम पर दिख रहे कॉन्टेंट के साथ काम न करता हो.