Camera-achtergrond vervagen

François Beaufort
François Beaufort
GitHub

Achtergrondvervaging is een populaire functie in moderne videoconferentietoepassingen. Het maakt automatisch onderscheid tussen de achtergrond en de persoon voor de camera, waardoor de omgeving onscherp wordt en de focus op het individu blijft.

De Background Blur API biedt mogelijkheden voor het verbergen van achtergronden op internet. Deze API maakt het mogelijk dat webapps het besturingssysteem vragen om het achtergrondvervagingseffect efficiënt toe te passen op de videofeed van een camera. Dit elimineert de kostbare noodzaak voor handmatige toepassing van het effect via machine learning-frameworks zoals TensorFlow.js, Mediapipe of cloudgebaseerde oplossingen, waarbij elk videoframe afzonderlijk moet worden verwerkt.

Foto met achtergrondonscherpte uit- en ingeschakeld.
Foto met achtergrondonscherpte uitgeschakeld (links) en ingeschakeld (rechts).

Schakel de Achtergrondvervaging-API in

Standaard is de Background Blur API niet ingeschakeld in Chrome, maar er kan mee worden geëxperimenteerd in Chrome 114 door de functionaliteit expliciet in te schakelen. U kunt het lokaal activeren door de vlag 'Experimental Web Platform features' in te schakelen op chrome://flags/#enable-experimental-web-platform-features .

Om dit voor alle bezoekers van uw app mogelijk te maken, loopt er momenteel een origin-proefperiode die eindigt in Chrome 117 (3 november 2023). Om deel te nemen aan de proefperiode dient u zich aan te melden en een meta-element met het oorspronkelijke proeftoken in de HTML- of HTTP-header op te nemen. Raadpleeg voor meer informatie het bericht Aan de slag met origin-proefversies .

Observeer veranderingen in de achtergrondonscherpte

Met de booleaanse instelling backgroundBlur op een MediaStreamTrack kunt u weten of het besturingssysteem achtergrondvervaging toepast op het media-apparaat. Wanneer de gebruiker achtergrondvervaging in- of uitschakelt via een besturingssysteem, wordt bovendien een "configurationchange" -gebeurtenis geactiveerd op een MediaStreamTrack .

Het volgende codefragment illustreert hoe u wijzigingen in de achtergrondvervaging kunt controleren op een media-apparaat waartoe de gebruiker toegang heeft verleend.

// 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"}`);
  }
});

Schakel achtergrondvervaging in

Met de backgroundBlur arraymogelijkheid op een MediaStreamTrack weet u of u achtergrondvervaging op het media-apparaat kunt regelen. Als de waarde niet gedefinieerd is of slechts één waarde bevat ( [true] of [false] ), kunt u de achtergrondonscherpte van de camera niet controleren. Als het twee waarden bevat, kunt u de methode applyConstraints() op een MediaStreamTrack gebruiken om het besturingssysteem te verzoeken het achtergrondvervagingseffect over te schakelen naar de videofeed van de camera. De geretourneerde belofte zal bij succes worden opgelost en bij fouten worden afgewezen.

Het volgende codefragment illustreert hoe u de achtergrondvervaging van de camera kunt regelen op een media-apparaat waartoe de gebruiker toegang heeft verleend.

// 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"}`);
}

Platformondersteuning

De Background Blur API is beschikbaar in Chrome 114 op ChromeOS, macOS en Windows.

Met ChromeOS en macOS kunt u momenteel alleen wijzigingen in de achtergrondvervaging waarnemen die de gebruiker kan aanbrengen via de gebruikersinterface van het besturingssysteem, zoals het Controlecentrum in macOS. Met Windows kunt u achtergrondonscherpte observeren en controleren.

Demo

Je kunt achtergrondvervaging inschakelen en veranderingen waarnemen door met het officiële voorbeeld te spelen. (Zoals eerder vermeld, is de beschikbaarheid van deze functies afhankelijk van de ondersteuning van het platform.)

Een webapp die veranderingen in de achtergrondonscherpte van de camera observeert.

Feedback

Feedback van ontwikkelaars is in deze fase erg belangrijk, dus plaats problemen op GitHub met suggesties en vragen.

We willen graag uw mening horen over de vraag of het blootstellen van achtergrondvervaging als een Booleaanse waarde aan uw behoeften voldoet, of dat een meer gedetailleerde aanpak zoals 'licht', 'sterk', 'uit' geschikter zou zijn, ook al is dat misschien niet het geval. compatibel met wat zichtbaar is op alle besturingssystemen.

Heldenafbeelding door Ayo Ogunseinde .