Rozmycie tła to popularna funkcja w nowoczesnych aplikacjach do rozmów wideo. Automatycznie odróżnia tło od osoby znajdującej się przed kamerą, rozmywając otoczenie, a jednocześnie utrzymując ostrość na osobie.
Interfejs Background Blur API umożliwia ukrywanie tła w internecie. Dzięki temu interfejsowi API aplikacje internetowe mogą prosić system operacyjny o skuteczne zastosowanie efektu rozmycia tła do obrazu z kamery. Dzięki temu nie trzeba ręcznie stosować efektu za pomocą frameworków uczenia maszynowego, takich jak TensorFlow.js czy Mediapipe, ani rozwiązań działających w chmurze, które wymagają przetwarzania każdego klatki wideo osobno.
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ć korzystanie z tego rozwiązania wszystkim użytkownikom aplikacji, rozpoczęliśmy testowanie wersji próbnej, która 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ą systemu operacyjnego, w urządzeniu 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 urządzeniu MediaStreamTrack informuje, czy możesz sterować rozmyciem tła na urządzeniu multimedialnym. Jeśli nie jest zdefiniowany lub zawiera tylko jedną wartość ([true] lub [false]), nie można 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 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 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” będzie bardziej odpowiednie, nawet jeśli nie będzie zgodne z tym, co jest dostępne w wszystkich systemach operacyjnych.