Le floutage de l'arrière-plan est une fonctionnalité populaire dans les applications de visioconférence modernes. Il distingue automatiquement l'arrière-plan de la personne qui se trouve devant la caméra, en floutant l'environnement tout en gardant l'accentuation 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 floutage d'arrière-plan au flux vidéo d'une caméra. Cela élimine le besoin coûteux d'appliquer manuellement l'effet via des frameworks de machine learning tels que TensorFlow.js, Mediapipe ou des solutions cloud, qui nécessitent de traiter chaque frame vidéo individuellement.
Activer l'API Background Blur
Par défaut, l'API Flou d'arrière-plan n'est pas activée dans Chrome, mais vous pouvez la tester dans Chrome 114 en activant explicitement la fonctionnalité. Vous pouvez l'activer localement en activant l'indicateur "Experimental Web Platform features" (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 application, un test de l'origine est en cours et devrait se terminer dans Chrome 117 (3 novembre 2023). Pour participer à l'essai, inscrivez-vous et incluez un élément Meta avec le jeton d'évaluation de l'origine dans l'en-tête HTML ou HTTP. Pour en savoir plus, consultez 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 floutage d'arrière-plan sur l'appareil multimédia. De plus, lorsque l'utilisateur active ou désactive le flou d'arrière-plan via une affordance de 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 floutage de l'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 fonctionnalité de tableau backgroundBlur sur un MediaStreamTrack vous indique si vous pouvez contrôler le floutage de l'arrière-plan sur l'appareil multimédia. Si elle n'est pas définie ou ne contient qu'une seule valeur ([true] ou [false]), vous ne pouvez pas contrôler le floutage de l'arrière-plan de la caméra. S'il contient deux valeurs, vous pouvez utiliser la méthode applyConstraints() sur un MediaStreamTrack pour demander au système d'exploitation d'activer/de désactiver l'effet de floutage d'arrière-plan sur le flux vidéo de l'appareil photo. La promesse renvoyée sera résolue en cas de réussite et rejetée en cas d'erreur.
L'extrait de code suivant montre comment contrôler le floutage de l'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.
ChromeOS et macOS ne vous permettent actuellement d'observer que les changements de flou d'arrière-plan que l'utilisateur peut effectuer via l'interface utilisateur de son système d'exploitation, comme le centre de contrôle dans macOS. Windows vous permet d'observer et de contrôler le floutage de l'arrière-plan.
Démo
Vous pouvez activer et désactiver le floutage de l'arrière-plan et observer les modifications en jouant avec l'exemple officiel. (Comme indiqué 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 avec vos suggestions et vos questions.
Nous aimerions connaître votre avis sur l'exposition du floutage d'arrière-plan en tant que valeur booléenne. Est-ce que cela répond à vos besoins ? Ou préférez-vous une approche plus précise, comme "light", "strong" ou "off", même si elle n'est pas compatible avec ce qui est exposé sur tous les systèmes d'exploitation ?