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