Blur latar belakang adalah fungsi populer dalam aplikasi konferensi video modern. Fitur ini otomatis membedakan latar belakang dari orang di depan kamera, memburamkan lingkungan sekitar sambil mempertahankan fokus pada individu.
Background Blur API menghadirkan kemampuan penyembunyian latar belakang ke web. API ini memungkinkan aplikasi web meminta sistem operasi untuk menerapkan efek pemburaman latar belakang secara efisien ke feed video kamera. Dengan demikian, Anda tidak perlu mengeluarkan banyak biaya untuk menerapkan efek ini secara manual melalui framework machine learning seperti TensorFlow.js, Mediapipe, atau solusi berbasis cloud, yang memerlukan pemrosesan setiap frame video satu per satu.
Mengaktifkan Background Blur API
Secara default, Background Blur API tidak diaktifkan di Chrome, tetapi dapat diuji di Chrome 114 dengan mengaktifkan fungsinya secara eksplisit. Anda dapat mengaktifkannya secara lokal dengan mengaktifkan tanda "Fitur Platform Web Eksperimental" di chrome://flags/#enable-experimental-web-platform-features.
Untuk mengaktifkannya bagi semua pengunjung aplikasi Anda, uji coba origin sedang berlangsung dan akan berakhir di Chrome 117 (3 November 2023). Untuk berpartisipasi dalam uji coba, daftar dan sertakan elemen meta dengan token uji coba origin di header HTML atau HTTP. Untuk informasi selengkapnya, lihat Memulai uji coba origin.
Mengamati perubahan blur latar belakang
Setelan boolean backgroundBlur di MediaStreamTrack memungkinkan Anda mengetahui apakah sistem operasi menerapkan pemburaman latar belakang di perangkat media. Selain itu, saat pengguna mengaktifkan atau menonaktifkan blur latar belakang melalui kemampuan sistem operasi, peristiwa "configurationchange" akan diaktifkan pada MediaStreamTrack.
Cuplikan kode berikut mengilustrasikan cara memantau perubahan pemburaman latar belakang di perangkat media yang aksesnya telah diberikan pengguna.
// 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"}`);
}
});
Aktifkan/nonaktifkan blur latar belakang
Kemampuan array backgroundBlur di MediaStreamTrack memungkinkan Anda mengetahui apakah Anda dapat mengontrol pemburaman latar belakang di perangkat media. Jika tidak ditentukan atau hanya berisi satu nilai ([true] atau [false]), Anda tidak dapat mengontrol pemburaman latar belakang kamera. Jika berisi dua nilai, Anda dapat menggunakan metode applyConstraints() pada MediaStreamTrack untuk meminta sistem operasi mengalihkan efek pemburaman latar belakang ke feed video kamera. Promise yang ditampilkan akan di-resolve jika berhasil dan ditolak jika terjadi error.
Cuplikan kode berikut mengilustrasikan cara mengontrol pemburaman latar belakang kamera di perangkat media yang aksesnya telah diberikan oleh pengguna.
// 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"}`);
}
Dukungan platform
Background Blur API tersedia di Chrome 114 di ChromeOS, macOS, dan Windows.
ChromeOS dan macOS saat ini hanya memungkinkan Anda mengamati perubahan pemburaman latar belakang yang dapat dilakukan pengguna melalui UI sistem operasi mereka seperti Control Center di macOS. Windows memungkinkan Anda mengamati dan mengontrol blur latar belakang.
Demo
Anda dapat mengalihkan pemburaman latar belakang dan mengamati perubahan dengan memainkan contoh resmi. (Seperti yang disebutkan sebelumnya, ketersediaan fitur tersebut bergantung pada dukungan platform.)
Masukan
Masukan developer sangat penting pada tahap ini, jadi harap laporkan masalah di GitHub dengan saran dan pertanyaan.
Kami ingin mendengar pendapat Anda tentang apakah mengekspos pemburaman latar belakang sebagai nilai boolean sesuai dengan kebutuhan Anda, atau apakah pendekatan yang lebih terperinci seperti "terang", "kuat", "nonaktif" akan lebih sesuai, meskipun mungkin tidak kompatibel dengan yang ditampilkan di semua sistem operasi.