আধুনিক ভিডিও কনফারেন্সিং অ্যাপ্লিকেশনে ব্যাকগ্রাউন্ড ব্লার একটি জনপ্রিয় ফাংশন। এটি স্বয়ংক্রিয়ভাবে ক্যামেরার সামনে থাকা ব্যক্তি থেকে ব্যাকগ্রাউন্ডকে আলাদা করে, ব্যক্তির উপর ফোকাস বজায় রেখে চারপাশকে ঝাপসা করে।
ব্যাকগ্রাউন্ড ব্লার API ওয়েবে পটভূমি গোপন করার ক্ষমতা নিয়ে আসে। এই এপিআই ওয়েব অ্যাপের জন্য অপারেটিং সিস্টেমকে ক্যামেরার ভিডিও ফিডে ব্যাকগ্রাউন্ড ব্লার প্রভাব দক্ষতার সাথে প্রয়োগ করতে বলা সম্ভব করে তোলে। এটি মেশিন লার্নিং ফ্রেমওয়ার্ক যেমন TensorFlow.js, Mediapipe, বা ক্লাউড-ভিত্তিক সমাধানগুলির মাধ্যমে প্রভাবের ম্যানুয়াল প্রয়োগের জন্য ব্যয়বহুল প্রয়োজনীয়তা দূর করে, যার জন্য প্রতিটি ভিডিও ফ্রেম পৃথকভাবে প্রক্রিয়াকরণের প্রয়োজন হয়।
ব্যাকগ্রাউন্ড ব্লার এপিআই সক্ষম করুন
ডিফল্টরূপে, ক্রোমে ব্যাকগ্রাউন্ড ব্লার এপিআই সক্ষম করা নেই, তবে কার্যকারিতাটি স্পষ্টভাবে সক্ষম করে এটি Chrome 114-এ পরীক্ষা করা যেতে পারে। আপনি chrome://flags/#enable-experimental-web-platform-features "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকা সক্রিয় করে স্থানীয়ভাবে এটি সক্রিয় করতে পারেন।
আপনার অ্যাপের সমস্ত দর্শকদের জন্য এটি সক্ষম করতে, একটি অরিজিন ট্রায়াল চলছে এবং Chrome 117 (নভেম্বর 3, 2023) এ শেষ হবে। ট্রায়ালে অংশগ্রহণ করতে, সাইন আপ করুন এবং HTML বা HTTP হেডারে অরিজিন ট্রায়াল টোকেন সহ একটি মেটা উপাদান অন্তর্ভুক্ত করুন৷ আরও তথ্যের জন্য, মূল ট্রায়াল দিয়ে শুরু করুন দেখুন।
ব্যাকগ্রাউন্ড ব্লার পরিবর্তনগুলি পর্যবেক্ষণ করুন
একটি 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"}`);
}
প্ল্যাটফর্ম সমর্থন
ব্যাকগ্রাউন্ড ব্লার API Chrome 114 এ ChromeOS, macOS এবং Windows এ উপলব্ধ।
ChromeOS এবং macOS বর্তমানে শুধুমাত্র আপনাকে ব্যাকগ্রাউন্ড ব্লার পরিবর্তনগুলি পর্যবেক্ষণ করতে দেয় যা ব্যবহারকারী তাদের অপারেটিং সিস্টেম UI যেমন macOS-এ কন্ট্রোল সেন্টারের মাধ্যমে করতে পারে৷ উইন্ডোজ আপনাকে ব্যাকগ্রাউন্ড ব্লার পর্যবেক্ষণ ও নিয়ন্ত্রণ করতে দেয়।
ডেমো
আপনি ব্যাকগ্রাউন্ড ব্লার টগল করতে পারেন এবং অফিসিয়াল নমুনার সাথে খেলে পরিবর্তনগুলি পর্যবেক্ষণ করতে পারেন৷ (আগে উল্লিখিত হিসাবে, এই বৈশিষ্ট্যগুলির প্রাপ্যতা প্ল্যাটফর্মের সমর্থনের উপর নির্ভর করে।)
প্রতিক্রিয়া
এই পর্যায়ে বিকাশকারীর প্রতিক্রিয়া সত্যিই গুরুত্বপূর্ণ, তাই অনুগ্রহ করে পরামর্শ এবং প্রশ্ন সহ গিটহাবে সমস্যাগুলি ফাইল করুন ।
বুলিয়ান মান হিসাবে ব্যাকগ্রাউন্ড ব্লার প্রকাশ করা আপনার প্রয়োজনের সাথে খাপ খায় কিনা বা "হালকা", "শক্তিশালী", "অফ" এর মতো আরও দানাদার পদ্ধতির মতো আরও উপযুক্ত হবে কিনা তা নিয়ে আমরা আপনার চিন্তাভাবনা শুনতে চাই, যদিও এটি নাও হতে পারে। সমস্ত অপারেটিং সিস্টেমে যা প্রকাশিত হয় তার সাথে সামঞ্জস্যপূর্ণ।