Rozmyj tło aparatu

François Beaufort
François Beaufort
GitHub

Rozmycie tła to często stosowana funkcja w nowoczesnych aplikacjach do rozmów wideo. Automatycznie odróżnia tło od osoby przed kamerą, rozmywając otoczenie, utrzymując ostrość na osobie.

Interfejs Background Blur API udostępnia funkcje ukrywania tła. Dzięki niemu aplikacje internetowe mogą prosić system operacyjny o skuteczne zastosowanie efektu rozmycia tła do obrazu wideo z kamery. Eliminuje to kosztowne ręczne stosowanie efektów dzięki platformom systemów uczących się, takim jak TensorFlow.js, Mediapipe lub rozwiązania działające w chmurze, które wymagają przetwarzania każdej klatki wideo oddzielnie.

Zdjęcie z wyłączonym i włączonym rozmyciem tła.
Zdjęcie z wyłączonym rozmyciem tła (po lewej) i włączonym (po prawej).

Włączanie interfejsu Background Blur API

Domyślnie interfejs Background Blur API nie jest włączony w Chrome, ale w Chrome 114 można z nim poeksperymentować, bezpośrednio go włączyć. Możesz ją aktywować lokalnie, włączając flagę „Eksperymentalne funkcje platformy internetowej” na stronie chrome://flags/#enable-experimental-web-platform-features.

Aby umożliwić korzystanie z niej wszystkim użytkownikom Twojej aplikacji, obecnie trwa okres próbny źródła. Zakończy się on w Chrome 117 (3 listopada 2023 r.). Aby skorzystać z okresu próbnego, zarejestruj się i w nagłówku HTML lub HTTP umieść metatag z tokenem próbnym origin. Więcej informacji znajdziesz w poście Pierwsze kroki z testami origin.

Obserwowanie zmian rozmycia tła

Ustawienie wartości logicznej backgroundBlur w MediaStreamTrack pozwala określić, czy system operacyjny stosuje rozmycie tła na urządzeniu multimedialnym. Oprócz tego, gdy użytkownik włącza lub wyłącza rozmycie tła w ramach koroncji systemu operacyjnego, MediaStreamTrack jest wywoływane zdarzenie "configurationchange".

Poniższy fragment kodu pokazuje, jak monitorować zmiany rozmycia tła na urządzeniu multimedialnym, do którego użytkownik przyznał dostęp.

// 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"}`);
  }
});

Przełącz rozmycie tła

Funkcja tablicy backgroundBlur w modelu MediaStreamTrack pozwala kontrolować rozmycie tła na urządzeniu multimedialnym. Jeśli pole jest nieokreślone lub zawiera tylko 1 wartość ([true] lub [false]), nie możesz kontrolować rozmycia tła w kamerze. Jeśli zawiera 2 wartości, możesz użyć metody applyConstraints() w MediaStreamTrack, aby poprosić system operacyjny o przełączenie efektu rozmycia tła na obraz z kamery. Zwrócona obietnica zostanie rozpatrzona pozytywnie w przypadku powodzenia i odrzucona w przypadku błędu.

Poniższy fragment kodu pokazuje, jak sterować rozmyciem tła aparatu na urządzeniu multimedialnym, do którego użytkownik przyznał dostęp.

// 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"}`);
}

Obsługa platformy

Interfejs Background Blur API jest dostępny w Chrome 114 na urządzeniach z ChromeOS, macOS i Windows.

Obecnie w ChromeOS i macOS można obserwować tylko zmiany rozmycia tła, które użytkownik może wprowadzić za pomocą interfejsu użytkownika systemu operacyjnego, takiego jak Centrum sterowania w systemie macOS. Windows umożliwia obserwowanie i kontrolowanie rozmycia tła.

Pokaz

Możesz przełączyć rozmycie tła i obserwować zmiany, grając z oficjalną próbką. Jak już wspomnieliśmy, dostępność tych funkcji zależy od obsługi przez platformę.

Aplikacja internetowa, która zmienia rozmycie tła kamery.

Prześlij opinię

Opinie deweloperów są na tym etapie bardzo ważne, dlatego zachęcamy do zgłaszania problemów na GitHubie wraz z sugestiami i pytaniami.

Chętnie się dowiemy, czy ujawnianie rozmycia tła jako wartość logiczna odpowiada Twoim potrzebom, czy bardziej szczegółowe podejście, takie jak „światło”, „silne”, „wyłączone”, byłoby bardziej odpowiednie, nawet jeśli nie jest zgodne z elementami widocznymi we wszystkich systemach operacyjnych.

Baner powitalny: Ayo Ogunseinde.