Rozmycie tła to popularna funkcja w nowoczesnych aplikacjach do wideokonferencji. 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 na strumieniu wideo 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ć to wszystkim użytkownikom aplikacji, trwa próba wprowadzenia, 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 testów źródłowych w kodzie HTML lub 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 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 elementach MediaStreamTrack, aby poprosić system operacyjny o włączenie lub wyłączenie efektu rozmycia tła w przesył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 w systemach 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 „słabe”, „mocne” czy „wyłączone” będzie bardziej odpowiednie, nawet jeśli nie będzie zgodne z tym, co jest dostępne w każdym systemie operacyjnym.