تاری پس‌زمینه یک عملکرد محبوب در برنامه‌های کنفرانس ویدیویی مدرن است. به طور خودکار پس‌زمینه را از فرد مقابل دوربین متمایز می‌کند و در عین حال که تمرکز روی فرد را حفظ می‌کند، محیط اطراف را تار می‌کند.
Background Blur API قابلیت‌های پنهان‌سازی پس‌زمینه را به وب می‌آورد. این API این امکان را برای برنامه‌های وب فراهم می‌کند که از سیستم عامل بخواهند به طور موثر جلوه تاری پس‌زمینه را در فید ویدیوی دوربین اعمال کند. این امر نیاز پرهزینه به کاربرد دستی افکت را از طریق چارچوب‌های یادگیری ماشینی مانند TensorFlow.js، Mediapipe یا راه‌حل‌های مبتنی بر ابر، که نیاز به پردازش هر فریم ویدیو به‌صورت جداگانه دارند، از بین می‌برد.
Background Blur API را فعال کنید
به‌طور پیش‌فرض، Background Blur API در Chrome فعال نیست، اما می‌توان با فعال کردن صریح این عملکرد، آن را در Chrome 114 آزمایش کرد. می‌توانید با فعال کردن پرچم «ویژگی‌های پلتفرم وب آزمایشی» در chrome://flags/#enable-experimental-web-platform-features آن را به صورت محلی فعال کنید.
برای فعال کردن آن برای همه بازدیدکنندگان برنامه شما، یک آزمایش اولیه در حال حاضر در حال انجام است و قرار است در Chrome 117 (3 نوامبر 2023) به پایان برسد. برای شرکت در آزمایشی، ثبت نام کنید و یک عنصر متا را با نشانه آزمایشی اصلی در هدر HTML یا HTTP قرار دهید. برای اطلاعات بیشتر، به پست شروع با آزمایشات اولیه مراجعه کنید.
تغییرات تاری پس زمینه را مشاهده کنید
تنظیم بولی backgroundBlur در MediaStreamTrack به شما امکان می دهد بدانید که آیا سیستم عامل تاری پس زمینه را در دستگاه رسانه اعمال می کند یا خیر. به‌علاوه، وقتی کاربر تاری پس‌زمینه را از طریق یک سیستم عامل روشن یا خاموش می‌کند، یک رویداد "configurationchange" در MediaStreamTrack اجرا می‌شود.
قطعه کد زیر نحوه نظارت بر تغییرات تاری پس‌زمینه را در دستگاه رسانه‌ای که کاربر به آن اجازه دسترسی داده است، نشان می‌دهد.
// 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"}`);
}
});
تاری پس‌زمینه را تغییر دهید
قابلیت آرایه backgroundBlur در MediaStreamTrack به شما این امکان را می دهد که بدانید آیا می توانید تاری پس زمینه را در دستگاه رسانه کنترل کنید یا خیر. اگر تعریف نشده باشد یا فقط یک مقدار ( [true] یا [false] ) داشته باشد، نمی‌توانید تاری پس‌زمینه دوربین را کنترل کنید. اگر حاوی دو مقدار باشد، می‌توانید از متد applyConstraints() در MediaStreamTrack استفاده کنید تا از سیستم‌عامل درخواست کنید تا افکت تاری پس‌زمینه را به فید ویدیوی دوربین تغییر دهد. وعده برگشتی در صورت موفقیت حل می شود و در صورت خطا رد می شود.
قطعه کد زیر نحوه کنترل تاری پس‌زمینه دوربین در دستگاه رسانه‌ای که کاربر اجازه دسترسی به آن را داده است را نشان می‌دهد.
// 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"}`);
}
پشتیبانی از پلتفرم
Background Blur API در Chrome 114 در ChromeOS، macOS و Windows موجود است.
ChromeOS و macOS در حال حاضر فقط به شما اجازه می‌دهند تا تغییرات محو شدن پس‌زمینه را مشاهده کنید که کاربر می‌تواند از طریق رابط کاربری سیستم عامل خود مانند مرکز کنترل در macOS انجام دهد. ویندوز به شما امکان می دهد تاری پس زمینه را مشاهده و کنترل کنید.
نسخه ی نمایشی
می‌توانید تاری پس‌زمینه را تغییر دهید و تغییرات را با بازی با نمونه رسمی مشاهده کنید. (همانطور که قبلا ذکر شد، در دسترس بودن آن ویژگی ها به پشتیبانی پلتفرم بستگی دارد.)
بازخورد
بازخورد برنامه‌نویس در این مرحله بسیار مهم است، بنابراین لطفاً مشکلات را با پیشنهادات و سؤالات در GitHub ارسال کنید .
مایلیم نظرات شما را در مورد اینکه آیا نمایش تاری پس‌زمینه به‌عنوان یک مقدار بولی با نیازهای شما مطابقت دارد یا خیر، یا رویکردی دقیق‌تر مانند «نور»، «قوی»، «خاموش» مناسب‌تر است، حتی اگر اینطور نباشد، بشنویم. سازگار با آنچه در همه سیستم عامل ها در معرض نمایش است.
لینک های مفید
تصویر قهرمان توسط Ayo Ogunseinde .