O desfoque do plano de fundo é uma função popular em aplicativos modernos de videoconferência. Ele distingue automaticamente o plano de fundo da pessoa em frente à câmera, desfocando o ambiente e mantendo o foco no indivíduo.
A API Background Blur traz recursos de ocultação de plano de fundo para a Web. Essa API possibilita que apps da Web peçam ao sistema operacional para aplicar com eficiência o efeito de desfoque do plano de fundo ao feed de vídeo de uma câmera. Isso elimina a necessidade de aplicação manual do efeito por frameworks de aprendizado de máquina, como o TensorFlow.js, o Mediapipe ou soluções baseadas na nuvem, que exigem o processamento de cada frame de vídeo individualmente.
Ativar a API Background Blur
Por padrão, a API de desfoque de plano de fundo não é ativada no Chrome, mas pode ser testada no Chrome 114 ativando explicitamente a funcionalidade. Ative a sinalização "Recursos experimentais da plataforma Web" em chrome://flags/#enable-experimental-web-platform-features para ativá-la localmente.
Para ativar esse recurso para todos os visitantes do seu app, um teste de origem está em andamento e será encerrado no Chrome 117 (3 de novembro de 2023). Para participar do teste, inscreva-se e inclua um metaelemento com o token do teste de origem no cabeçalho HTML ou HTTP. Para mais informações, consulte Começar a usar os testes de origem.
Observe as mudanças no desfoque do plano de fundo
A configuração booleana backgroundBlur em um MediaStreamTrack permite saber se o sistema operacional aplica o desfoque de segundo plano no dispositivo de mídia. Além disso, quando o usuário ativa ou desativa o desfoque de segundo plano usando uma característica do sistema operacional, um evento "configurationchange" é acionado em um MediaStreamTrack.
O snippet de código a seguir ilustra como monitorar mudanças no desfoque de segundo plano em um dispositivo de mídia ao qual 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 o desfoque do plano de fundo
O capability de matriz backgroundBlur em um MediaStreamTrack permite saber se é possível controlar o desfoque do plano de fundo no dispositivo de mídia. Se ele estiver indefinido ou contiver apenas um valor ([true] ou [false]), não será possível controlar o desfoque de fundo da câmera. Se ele tiver dois valores, use o método applyConstraints() em um MediaStreamTrack para solicitar que o sistema operacional alterne o efeito de desfoque de fundo para o feed de vídeo da câmera. A promessa retornada será resolvida em caso de sucesso e recusada em caso de erro.
O snippet de código a seguir ilustra como controlar o desfoque de segundo plano da câmera em um dispositivo de mídia ao qual 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 no ChromeOS, macOS e Windows.
No momento, o ChromeOS e o macOS só permitem que você observe mudanças de desfoque de plano de fundo que o usuário pode fazer na interface do sistema operacional, como o Centro de Controle no macOS. O Windows permite observar e controlar o desfoque do plano de fundo.
Demonstração
Você pode ativar o desfoque de segundo plano e observar as mudanças usando a amostra oficial. Como mencionado anteriormente, a disponibilidade desses recursos depende do suporte da plataforma.
Feedback
O feedback dos desenvolvedores é muito importante nesta fase. Por isso, registre problemas no GitHub com sugestões e perguntas.
Gostaríamos de saber se a exposição do desfoque de fundo como um valor booleano atende às suas necessidades ou se uma abordagem mais granular, como "light", "strong" e "off", seria mais adequada, mesmo que não seja compatível com o que é exposto em todos os sistemas operacionais.