El desenfoque de fondo es una función popular en las aplicaciones modernas de videoconferencia. Distingue automáticamente el fondo de la persona que está frente a la cámara y desenfoca el entorno mientras mantiene el enfoque en la persona.
La API de Background Blur lleva las capacidades de ocultación de fondo a la Web. Esta API permite que las apps web le soliciten al sistema operativo que aplique de manera eficiente el efecto de desenfoque del fondo al feed de video de una cámara. Esto elimina la necesidad costosa de aplicar el efecto de forma manual a través de frameworks de aprendizaje automático, como TensorFlow.js, Mediapipe o soluciones basadas en la nube, que requieren el procesamiento de cada fotograma de video de forma individual.
Habilita la API de Background Blur
De forma predeterminada, la API de Background Blur no está habilitada en Chrome, pero puedes experimentar con ella en Chrome 114 si habilitas la funcionalidad de forma explícita. Para activarla localmente, habilita la marca "Experimental Web Platform features" en chrome://flags/#enable-experimental-web-platform-features.
Para habilitarla para todos los visitantes de tu app, hay una prueba de origen en curso que finalizará en Chrome 117 (3 de noviembre de 2023). Para participar en la prueba, regístrate y, luego, incluye un elemento meta con el token de prueba de origen en el encabezado HTML o HTTP. Para obtener más información, consulta Cómo comenzar a usar las pruebas de origen.
Observa los cambios en el desenfoque de fondo
La configuración booleana backgroundBlur en un MediaStreamTrack te permite saber si el sistema operativo aplica desenfoque de fondo en el dispositivo multimedia. Además, cuando el usuario activa o desactiva el desenfoque de fondo a través de una indicación visual del sistema operativo, se activa un evento "configurationchange" en un MediaStreamTrack.
En el siguiente fragmento de código, se muestra cómo supervisar los cambios en el desenfoque del fondo en un dispositivo multimedia al que el usuario le otorgó acceso.
// 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"}`);
}
});
Activar o desactivar desenfoque de fondo
La función de array backgroundBlur en un MediaStreamTrack te permite saber si puedes controlar el desenfoque del fondo en el dispositivo multimedia. Si no está definido o contiene solo un valor ([true] o [false]), no puedes controlar el desenfoque del fondo de la cámara. Si contiene dos valores, puedes usar el método applyConstraints() en un objeto MediaStreamTrack para solicitar al sistema operativo que active o desactive el efecto de desenfoque del fondo en el feed de video de la cámara. La promesa que se muestra se resolverá en caso de éxito y se rechazará en caso de error.
En el siguiente fragmento de código, se muestra cómo controlar el desenfoque del fondo de la cámara en un dispositivo multimedia al que el usuario le otorgó acceso.
// 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"}`);
}
Plataformas compatibles
La API de Background Blur está disponible en Chrome 114 en ChromeOS, macOS y Windows.
Actualmente, ChromeOS y macOS solo te permiten observar los cambios de desenfoque de fondo que el usuario puede realizar a través de la IU del sistema operativo, como el Centro de control en macOS. Windows te permite observar y controlar el desenfoque del fondo.
Demostración
Puedes activar o desactivar el desenfoque del fondo y observar los cambios jugando con el ejemplo oficial. (Como se mencionó anteriormente, la disponibilidad de esas funciones depende de la compatibilidad de la plataforma).
Comentarios
Los comentarios de los desarrolladores son muy importantes en esta etapa, por lo que te pedimos que informas los problemas en GitHub con sugerencias y preguntas.
Nos encantaría conocer tu opinión sobre si exponer el desenfoque del fondo como un valor booleano se adapta a tus necesidades o si sería más apropiado usar un enfoque más detallado, como “ligero”, “fuerte” o “apagado”, aunque no sea compatible con el contenido que se expone en todos los sistemas operativos.