El desenfoque del fondo es una función popular en las aplicaciones modernas de videoconferencias. Distingue automáticamente el fondo de la persona frente a la cámara, lo que desenfoca el entorno y mantiene el foco en el individuo.
La API de desenfoque de fondo ofrece capacidades de ocultamiento de fondos 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 costosa necesidad de aplicar manualmente el efecto mediante 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 manera individual.
Habilita la API de desenfoque del fondo
De forma predeterminada, la API de Desenfoque del fondo no está habilitada en Chrome, pero se puede experimentar en Chrome 114 si se habilita explícitamente la funcionalidad. Para activarla de forma local, habilita la marca "Funciones de la plataforma web experimental" en chrome://flags/#enable-experimental-web-platform-features.
Para habilitarla para todos los visitantes de tu aplicación, actualmente hay una prueba de origen en curso que finalizará en Chrome 117 (3 de noviembre de 2023). Para participar, regístrate y, luego, incluye un metaelemento con el token de prueba de origen en el encabezado HTML o HTTP. Para obtener más información, consulta la publicación Comienza a usar las pruebas de origen.
Observa los cambios en el desenfoque del fondo
El parámetro de configuración booleano backgroundBlur en un objeto MediaStreamTrack te permite saber si el sistema operativo aplica un desenfoque del fondo en el dispositivo de medios. Además, cuando el usuario activa o desactiva el desenfoque del fondo con una indicación visual del sistema operativo, se activa un evento "configurationchange" en una MediaStreamTrack.
En el siguiente fragmento de código, se muestra cómo supervisar los cambios en el desenfoque del fondo en un dispositivo de medios al que el usuario 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 del fondo
La capacidad de array backgroundBlur de un MediaStreamTrack te permite saber si puedes controlar el desenfoque del fondo en el dispositivo de contenido multimedia. Si no está definido o contiene solo un valor ([true] o [false]), no podrás controlar el desenfoque del fondo de la cámara. Si contiene dos valores, puedes usar el método applyConstraints() en un MediaStreamTrack para solicitar al sistema operativo que active y 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 de contenido multimedia al que el usuario 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 desenfoque del fondo está disponible en Chrome 114 en ChromeOS, macOS y Windows.
Actualmente, ChromeOS y macOS solo te permiten observar los cambios de desenfoque del fondo que el usuario puede realizar a través de la IU de su 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 la muestra 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 tanto, informa 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”, incluso aunque no sea compatible con lo que se expone en todos los sistemas operativos.
Vínculos útiles
- Explicación
- Especificación
- Error de seguimiento de Chromium
- Entrada de ChromeStatus.com
- Revisión de la etiqueta
- Intención de experimentar
Hero image de Ayo Ogunseinde.