La sfocatura dello sfondo è una funzione molto utilizzata nelle applicazioni di videoconferenza moderne. Distingue automaticamente lo sfondo dalla persona davanti alla fotocamera, sfocando l'ambiente circostante e mantenendo la messa a fuoco sulla persona.
L'API Background Blur offre funzionalità di occultamento dello sfondo sul web. Questa API consente alle app web di chiedere al sistema operativo di applicare in modo efficiente l'effetto di sfocatura dello sfondo al feed video di una videocamera. In questo modo si elimina la costosa applicazione manuale dell'effetto tramite framework di machine learning come TensorFlow.js, Mediapipe o soluzioni basate su cloud, che richiedono l'elaborazione di ogni singolo fotogramma video.
Abilita l'API Sfocatura sfondo
Per impostazione predefinita, l'API Sfocatura sfondo non è attivata in Chrome, ma è possibile sperimentarla in Chrome 114 attivando esplicitamente la funzionalità. Puoi attivarlo localmente attivando il flag "Funzionalità sperimentali della piattaforma web" in chrome://flags/#enable-experimental-web-platform-features.
Per attivarla per tutti i visitatori della tua app, è in corso una prova dell'origine che terminerà in Chrome 117 (3 novembre 2023). Per partecipare alla prova, registrati e includi un elemento meta con il token di prova dell'origine nell'intestazione HTML o HTTP. Per ulteriori informazioni, consulta la guida introduttiva ai trial delle origini.
Osserva le modifiche alla sfocatura dello sfondo
L'impostazione booleana backgroundBlur su un MediaStreamTrack consente di sapere se il sistema operativo applica la sfocatura dello sfondo al dispositivo multimediale. Inoltre, quando l'utente attiva o disattiva la sfocatura dello sfondo tramite l'invito di un sistema operativo, su un MediaStreamTrack viene attivato un evento "configurationchange".
Il seguente snippet di codice illustra come monitorare le modifiche all'effetto sfocatura dello sfondo su un dispositivo multimediale a cui l'utente ha concesso l'accesso.
// 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"}`);
}
});
Attiva/disattiva sfocatura sfondo
La funzionalità dell'array backgroundBlur su un MediaStreamTrack ti consente di sapere se puoi controllare la sfocatura dello sfondo sul dispositivo multimediale. Se non è definito o contiene un solo valore ([true] o [false]), non puoi controllare la sfocatura dello sfondo della fotocamera. Se contiene due valori, puoi usare il metodo applyConstraints() su un MediaStreamTrack per richiedere al sistema operativo di attivare/disattivare l'effetto di sfocatura dello sfondo nel feed video della videocamera. La promessa restituita verrà risolta in caso di esito positivo e rifiutata in caso di errore.
Lo snippet di codice seguente illustra come controllare la sfocatura dello sfondo della fotocamera su un dispositivo multimediale a cui l'utente ha concesso l'accesso.
// 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"}`);
}
Supporto piattaforme
L'API Background blu è disponibile in Chrome 114 su ChromeOS, macOS e Windows.
Al momento, ChromeOS e macOS consentono di osservare solo le modifiche all'effetto sfocatura dello sfondo che l'utente può apportare tramite l'interfaccia utente del sistema operativo, ad esempio il Centro di controllo in macOS. Windows ti consente di osservare e controllare la sfocatura dello sfondo.
Demo
Puoi attivare e disattivare la sfocatura dello sfondo e osservare le modifiche giocando con il sample ufficiale. Come accennato in precedenza, la disponibilità di queste funzionalità dipende dal supporto della piattaforma.
Feedback
Il feedback degli sviluppatori è molto importante in questa fase, quindi segnala i problemi su GitHub con suggerimenti e domande.
Ci piacerebbe sapere se l'esposizione della sfocatura dello sfondo come valore booleano soddisfa le tue esigenze o se sarebbe più appropriato un approccio più granulare come "leggero", "forte" o "off", anche se potrebbe non essere compatibile con ciò che è esposto in tutti i sistemi operativi.