Le flou d'arrière-plan est une fonction populaire dans les applications de visioconférence modernes. Elle distingue automatiquement l'arrière-plan de la personne qui se trouve devant la caméra et floute l'environnement tout en restant focalisé sur l'individu.
L'API Background Blur permet de masquer l'arrière-plan sur le Web. Cette API permet aux applications Web de demander au système d'exploitation d'appliquer efficacement l'effet de flou d'arrière-plan au flux vidéo d'une caméra. Ainsi, il n'est plus nécessaire d'appliquer manuellement l'effet, ce qui peut s'avérer coûteux via des frameworks de machine learning tels que TensorFlow.js ou Mediapipe, ou via des solutions cloud qui nécessitent de traiter chaque image vidéo individuellement.
Activer l'API Background Blur
Par défaut, l'API Background Blur n'est pas activée dans Chrome, mais vous pouvez la tester dans Chrome 114 en activant explicitement cette fonctionnalité. Vous pouvez l'activer localement en activant l'indicateur "Fonctionnalités expérimentales de la plate-forme Web" sur chrome://flags/#enable-experimental-web-platform-features.
Pour l'activer pour tous les visiteurs de votre appli, une phase d'évaluation est en cours et devrait se terminer dans Chrome 117 (3 novembre 2023). Pour participer à l'évaluation, inscrivez-vous et incluez un méta-élément avec le jeton de la phase d'évaluation dans l'en-tête HTML ou HTTP. Pour en savoir plus, consultez l'article Premiers pas avec les phases d'évaluation.
Observer les changements de flou d'arrière-plan
Le paramètre booléen backgroundBlur sur un MediaStreamTrack vous permet de savoir si le système d'exploitation applique un flou d'arrière-plan sur l'appareil multimédia. En outre, lorsque l'utilisateur active ou désactive le flou d'arrière-plan via une affordance du système d'exploitation, un événement "configurationchange" est déclenché sur un MediaStreamTrack.
L'extrait de code suivant montre comment surveiller les modifications apportées au flou d'arrière-plan sur un appareil multimédia auquel l'utilisateur a accordé l'accès.
// 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"}`);
}
});
Activer/Désactiver le flou d'arrière-plan
La capacité de tableau backgroundBlur sur un MediaStreamTrack vous permet de savoir si vous pouvez contrôler le flou d'arrière-plan sur l'appareil multimédia. Si elle n'est pas définie ou si elle ne contient qu'une valeur ([true] ou [false]), vous ne pouvez pas contrôler le flou d'arrière-plan de la caméra. S'il contient deux valeurs, vous pouvez utiliser la méthode applyConstraints() sur une MediaStreamTrack pour demander au système d'exploitation d'activer l'effet de flou d'arrière-plan dans le flux vidéo de la caméra. La promesse renvoyée se résout en cas de réussite et est rejetée en cas d'erreur.
L'extrait de code suivant montre comment contrôler le flou d'arrière-plan de l'appareil photo sur un appareil multimédia auquel l'utilisateur a accordé l'accès.
// 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"}`);
}
Plates-formes compatibles
L'API Background Blur est disponible dans Chrome 114 sur ChromeOS, macOS et Windows.
Actuellement, ChromeOS et macOS vous permettent uniquement d'observer les modifications du flou d'arrière-plan que l'utilisateur peut effectuer via l'UI de son système d'exploitation, comme le centre de contrôle dans macOS. Windows vous permet d'observer et de contrôler le flou d'arrière-plan.
Démonstration
Vous pouvez activer/désactiver le flou d'arrière-plan et observer les changements en jouant avec l'exemple officiel. (Comme mentionné précédemment, la disponibilité de ces fonctionnalités dépend de la compatibilité de la plate-forme.)
Commentaires
Les commentaires des développeurs sont très importants à ce stade. Veuillez donc signaler les problèmes sur GitHub en nous envoyant des suggestions et des questions.
Nous aimerions savoir si vous pouvez utiliser une valeur booléenne comme floutage pour flouter l'arrière-plan, ou si une approche plus précise (par exemple "léger", "fort", "arrêt") serait plus appropriée, même si elle n'est pas compatible avec ce qui est exposé sur tous les systèmes d'exploitation.
Liens utiles
- Explication
- Spécification
- Bug de suivi Chromium
- Entrée ChromeStatus.com
- Examen de la balise
- Intention de test
Image principale d'Ayo Ogunseinde