Rozmycie tła to popularna funkcja w nowoczesnych aplikacjach do rozmów wideo. Funkcja automatycznie odróżnia tło od osoby przed kamerą, rozmywając otoczenie i jednocześnie skupiając uwagę na danej osobie.
Interfejs Background Blur API umożliwia ukrywanie tła w internecie. Ten interfejs API umożliwia aplikacjom internetowym zwracanie się do systemu operacyjnego o skuteczne zastosowanie efektu rozmycia tła na strumieniu wideo z kamery. Eliminuje to kosztowne konieczność ręcznego stosowania efektu za pomocą platform systemów uczących się, takich jak TensorFlow.js, Mediapipe lub rozwiązania działające w chmurze, które wymagają przetwarzania każdej klatki wideo z osobna.
Włącz interfejs Background Blur API
Domyślnie interfejs Background Blur API nie jest włączony w Chrome, ale można go wypróbować w Chrome 114, jeśli w wyraźny sposób włączysz tę funkcję. Możesz go aktywować lokalnie, włączając flagę „Eksperymentalne funkcje platformy internetowej” w chrome://flags/#enable-experimental-web-platform-features.
Aby umożliwić tę funkcję wszystkim użytkownikom Twojej aplikacji, trwa okres próbny origin, który ma się zakończyć w Chrome 117 (3 listopada 2023 r.). Aby wziąć udział w testach, zarejestruj się i uwzględnij element meta z tokenem wersji próbnej w źródle w kodzie HTML lub w nagłówku HTTP. Więcej informacji znajdziesz w artykule Pierwsze kroki z testami pochodzenia.
Obserwowanie zmian rozmycia tła
Ustawienie logiczne backgroundBlur w urządzeniu MediaStreamTrack informuje, czy system operacyjny stosuje rozmycie tła na urządzeniu multimedialnym. Dodatkowo, gdy użytkownik włączy lub wyłączy rozmycie tła za pomocą interfejsu systemu operacyjnego, w MediaStreamTrack zostanie wywołane zdarzenie "configurationchange".
Ten 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 backgroundBlur na MediaStreamTrack informuje, czy możesz sterować rozmyciem tła na urządzeniu multimedialnym. Jeśli jest nieokreślony lub zawiera tylko jedną 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 komponencie MediaStreamTrack, aby poprosić system operacyjny o włączenie lub wyłączenie efektu rozmycia tła w przesłanym przez kamerę strumieniu wideo. Zwrócona obietnica zostanie rozwiązana po pomyślnym zakończeniu i odrzucona w przypadku błędu.
Ten fragment kodu pokazuje, jak kontrolować rozmycie tła w aparacie na urządzeniu multimedialnym, któremu 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 API rozmycia tła jest dostępny w Chrome 114 na ChromeOS, macOS i Windows.
ChromeOS i macOS umożliwiają obecnie tylko obserwowanie zmian rozmycia tła, które użytkownik może wprowadzić za pomocą interfejsu systemu operacyjnego, takiego jak Centrum sterowania w macOS. Windows pozwala obserwować rozmyte tło i je kontrolować.
Prezentacja
Możesz włączać i wyłączać rozmycie tła oraz obserwować zmiany, korzystając z oficjalnego przykładu. (jak już wspomnieliśmy, dostępność tych funkcji zależy od obsługi platformy).
Prześlij opinię
Na tym etapie opinie deweloperów są bardzo ważne, dlatego przesyłajcie problemy na GitHub, dodając sugestie i pytania.
Chcielibyśmy poznać Twoją opinię na temat tego, czy udostępnianie rozmycia tła jako wartości logicznej odpowiada Twoim potrzebom, czy też bardziej szczegółowe podejście, takie jak „lekkie”, „mocne” czy „wyłączone” byłoby bardziej odpowiednie, nawet jeśli nie byłoby zgodne z tym, co jest dostępne w wszystkich systemach operacyjnych.