O desfoque do plano de fundo é uma função muito usada em aplicativos modernos de videoconferência. Ela distingue automaticamente o plano de fundo da pessoa na frente da câmera, desfocando o ambiente, mantendo o foco no indivíduo.
A API Background Blur disponibiliza recursos de ocultação de plano de fundo para a Web. Essa API permite que apps da Web solicitem ao sistema operacional para aplicar de maneira eficiente o efeito de desfoque do plano de fundo ao feed de vídeo de uma câmera. Isso elimina a necessidade de aplicar manualmente o efeito usando frameworks de machine learning, como TensorFlow.js, Mediapipe ou soluções baseadas na nuvem, que exigem o processamento individual de cada frame de vídeo.
Ativar a API Background Blur
Por padrão, a API Background Blur não está ativada no Chrome, mas ela pode ser testada no Chrome 114 ativando explicitamente a funcionalidade. Para ativá-la localmente, ative a sinalização "Recursos da Plataforma Web experimental" em chrome://flags/#enable-experimental-web-platform-features.
O teste de origem está sendo ativado para todos os visitantes do app e vai terminar no Chrome 117 (3 de novembro de 2023). Para participar do teste, inscreva-se e inclua um elemento meta com o token do teste de origem no cabeçalho HTML ou HTTP. Para saber mais, consulte a postagem Introdução aos testes de origem.
Observar as mudanças no desfoque do plano de fundo
A configuração booleana backgroundBlur em uma MediaStreamTrack permite saber se o sistema operacional aplica o desfoque do plano de fundo no dispositivo de mídia. Além disso, quando o usuário ativa ou desativa o desfoque do plano de fundo em uma funcionalidade do sistema operacional, um evento "configurationchange" é disparado em uma MediaStreamTrack.
O snippet de código a seguir ilustra como monitorar as mudanças no desfoque do plano de fundo em um dispositivo de mídia a que o usuário concedeu acesso.
// 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"}`);
}
});
Alternar desfoque do plano de fundo
O recurso de matriz backgroundBlur em uma MediaStreamTrack permite saber se é possível controlar o desfoque do plano de fundo no dispositivo de mídia. Se ela for indefinida ou contiver apenas um valor ([true] ou [false]), não será possível controlar o desfoque do plano de fundo da câmera. Se ele tiver dois valores, use o método applyConstraints() em uma MediaStreamTrack para solicitar que o sistema operacional alterne o efeito de desfoque do plano de fundo para o feed de vídeo da câmera. A promessa retornada vai ser resolvida se for concluída e rejeitada em caso de erro.
O snippet de código a seguir ilustra como controlar o desfoque do plano de fundo da câmera em um dispositivo de mídia a que o usuário concedeu acesso.
// 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"}`);
}
Suporte a plataformas
A API Background Blur está disponível no Chrome 114 para ChromeOS, macOS e Windows.
No momento, o ChromeOS e o macOS só permitem que você observe as mudanças no desfoque do plano de fundo que o usuário pode fazer na interface do sistema operacional, como a Central de Controle do macOS. O Windows permite observar e controlar o desfoque do plano de fundo.
Demonstração
É possível alternar o desfoque do plano de fundo e observar as mudanças com o exemplo oficial (link em inglês). Como mencionado anteriormente, a disponibilidade desses recursos depende do suporte da plataforma.
Feedback
O feedback do desenvolvedor é muito importante nesta etapa. Registre problemas no GitHub com sugestões e perguntas.
Gostaríamos de saber se a exposição do desfoque do plano de fundo como um valor booleano atende às suas necessidades ou se uma abordagem mais granular, como "leve", "forte" ou "desativado", seria mais apropriada, mesmo que não seja compatível com o que é exposto em todos os sistemas operacionais.
Links úteis
- Explicação
- Especificação
- Bug de rastreamento do Chromium
- Entrada ChromeStatus.com
- Análise da TAG
- Intenção de fazer experimentos
Imagem principal por Ayo Ogunseinde.