Buramkan latar belakang kamera

François Beaufort
François Beaufort
GitHub

Blur latar belakang adalah fungsi yang populer dalam aplikasi konferensi video modern. Fitur ini otomatis membedakan latar belakang dengan orang di depan kamera, sehingga memburamkan sekeliling sambil mempertahankan fokus pada orang yang bersangkutan.

Background Blur API menghadirkan kemampuan penyembunyian latar belakang ke web. Dengan API ini, aplikasi web dapat meminta sistem operasi untuk menerapkan efek blur latar belakang ke feed video kamera secara efisien. Hal ini meniadakan kebutuhan mahal untuk penerapan efek secara manual melalui framework machine learning seperti TensorFlow.js, Mediapipe, atau solusi berbasis cloud, yang mengharuskan pemrosesan setiap frame video satu per satu.

Foto dengan blur latar belakang dinonaktifkan dan diaktifkan.
Foto dengan blur latar belakang dinonaktifkan (kiri) dan aktif (kanan).

Mengaktifkan Background Blur API

Secara default, Background Blur API tidak diaktifkan di Chrome, tetapi dapat dicoba di Chrome 114 dengan mengaktifkan fungsi tersebut 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 saat ini 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 mengetahui informasi selengkapnya, lihat postingan Mulai menggunakan uji coba origin.

Mengamati perubahan blur latar belakang

Setelan boolean backgroundBlur pada MediaStreamTrack memungkinkan Anda mengetahui apakah sistem operasi menerapkan blur latar belakang pada 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 pada blur latar belakang di perangkat media yang telah diberi akses 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;

// 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 pada MediaStreamTrack memungkinkan Anda mengetahui apakah Anda dapat mengontrol blur latar belakang di perangkat media. Jika tidak ditentukan atau hanya berisi satu nilai ([true] atau [false]), Anda tidak dapat mengontrol blur latar belakang kamera. Jika berisi dua nilai, Anda dapat menggunakan metode applyConstraints() di MediaStreamTrack untuk meminta sistem operasi mengalihkan efek blur latar belakang ke feed video kamera. Promise yang ditampilkan akan diselesaikan saat berhasil dan ditolak jika terjadi error.

Cuplikan kode berikut mengilustrasikan cara mengontrol blur latar belakang kamera pada perangkat media yang telah diberi akses kepada 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 blur latar belakang yang dapat dilakukan pengguna melalui UI sistem operasi seperti Control Center di macOS. Windows memungkinkan Anda untuk mengamati dan mengontrol blur latar belakang.

Demo

Anda dapat mengaktifkan/menonaktifkan blur latar belakang dan mengamati perubahan dengan menggunakan contoh resmi. (Seperti yang disebutkan sebelumnya, ketersediaan fitur tersebut bergantung pada dukungan platform.)

Aplikasi web yang mengamati perubahan blur latar belakang kamera.

Masukan

Masukan developer sangat penting pada tahap ini, jadi laporkan masalah di GitHub dengan saran dan pertanyaan.

Kami ingin mendengar pendapat Anda tentang apakah mengekspos blur latar belakang sebagai nilai boolean sesuai dengan kebutuhan Anda, atau apakah pendekatan yang lebih terperinci seperti "light", "strong", "off" akan lebih tepat, meskipun mungkin tidak kompatibel dengan apa yang diekspos di semua sistem operasi.

Banner besar oleh Ayo Ogunseinde.