La sfocatura dello sfondo è una funzione molto usata nelle moderne applicazioni di videoconferenza. in quanto consente di distinguere automaticamente lo sfondo dalla persona che si trova di fronte alla fotocamera, sfocando l'ambiente e mantenendo la concentrazione sulla persona.
L'API Background Detect 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 individuale di ogni fotogramma video.
Attivare l'API Background sfocatura
Per impostazione predefinita, l'API Sfocatura sfondo non è attiva in Chrome, ma può essere sperimentata in Chrome 114 attivando esplicitamente la funzionalità. Puoi attivarla localmente abilitando il flag "Funzionalità sperimentali della piattaforma web" all'indirizzo chrome://flags/#enable-experimental-web-platform-features.
Per attivarla per tutti i visitatori della tua app, è in corso una prova dell'origine, che terminerà il 3 novembre 2023 in Chrome 117. Per partecipare alla prova, registrati e includi un meta elemento con il token della prova dell'origine nell'intestazione HTML o HTTP. Per saperne di più, consulta il post Iniziare a utilizzare le prove dell'origine.
Osservare i cambiamenti della sfocatura dello sfondo
L'impostazione booleana backgroundBlur su 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'offerta di un sistema operativo, su un MediaStreamTrack viene attivato un evento "configurationchange".
Lo snippet di codice riportato di seguito illustra come monitorare le modifiche alla 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à 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 videocamera. 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 verrà rifiutata in caso di errore.
Il seguente snippet di codice illustra come controllare la sfocatura dello sfondo della videocamera 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 Sfocatura sfondo è disponibile in Chrome 114 su ChromeOS, macOS e Windows.
Al momento, ChromeOS e macOS consentono di osservare solo le modifiche della sfocatura dello sfondo che l'utente può apportare tramite la UI 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/disattivare la sfocatura dello sfondo e osservare i cambiamenti riproducendo il campione 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 invia una segnalazione di problemi su GitHub con suggerimenti e domande.
Ci piacerebbe sapere se l'esposizione della sfocatura dello sfondo come valore booleano è adatta alle tue esigenze o se un approccio più granulare come"leggero", "intenso", "off" sarebbe più appropriato, anche se potrebbe non essere compatibile con i soggetti esposti in tutti i sistemi operativi.
Link utili
- Spiegazione
- Specifiche
- Bug di monitoraggio di Chromium
- Voce ChromeStatus.com
- Revisione TAG
- Intenzione di sperimentare
Immagine hero di Ayo Ogunseinde.