Die Hintergrundunschärfe ist eine beliebte Funktion in modernen Videokonferenzanwendungen. Dabei wird automatisch zwischen dem Hintergrund und der Person vor der Kamera unterschieden. Die Umgebung wird unscharf gestellt, während der Fokus auf die Person gerichtet bleibt.
Mit der Background Blur API können Sie im Web Hintergründe unkenntlich machen. Mit dieser API können Web-Apps das Betriebssystem bitten, den Hintergrundunschärfeeffekt effizient auf den Videofeed einer Kamera anzuwenden. So entfällt die aufwendige manuelle Anwendung des Effekts über Frameworks für maschinelles Lernen wie TensorFlow.js, Mediapipe oder cloudbasierte Lösungen, bei denen jeder Videoframe einzeln verarbeitet werden muss.
Background Blur API aktivieren
Die Background Blur API ist in Chrome standardmäßig nicht aktiviert. Sie kann aber in Chrome 114 getestet werden, indem Sie die Funktion explizit aktivieren. Sie können sie lokal aktivieren, indem Sie unter chrome://flags/#enable-experimental-web-platform-features das Flag „Experimentelle Webplattform-Funktionen“ aktivieren.
Damit die Funktion für alle Besucher Ihrer App aktiviert werden kann, läuft derzeit ein Test für Ursprünge, der mit Chrome 117 (3. November 2023) endet. Wenn du am Test teilnehmen möchtest, registriere dich und füge entweder im HTML- oder im HTTP-Header ein Meta-Element mit dem Token für den Ursprungstest ein. Weitere Informationen finden Sie unter Erste Schritte mit Ursprungstests.
Änderungen am Weichzeichnen des Hintergrunds beobachten
Anhand der booleschen backgroundBlur-Einstellung eines MediaStreamTrack kannst du feststellen, ob das Betriebssystem den Hintergrund des Mediengeräts unscharf macht. Außerdem wird ein "configurationchange"-Ereignis für ein MediaStreamTrack ausgelöst, wenn der Nutzer das Weichzeichnen des Hintergrunds in einer Betriebssystemoption ein- oder ausschaltet.
Im folgenden Code-Snippet wird veranschaulicht, wie Änderungen an der Hintergrundunschärfe auf einem Mediengerät überwacht werden, für das der Nutzer Zugriff gewährt hat.
// 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"}`);
}
});
Weichgezeichneten Hintergrund ein-/ausschalten
Anhand der backgroundBlur-Arrayfunktion eines MediaStreamTrack können Sie feststellen, ob Sie die Hintergrundunschärfe auf dem Mediengerät steuern können. Wenn er nicht definiert ist oder nur einen Wert enthält ([true] oder [false]), können Sie das Weichzeichnen des Kamerahintergrunds nicht steuern. Wenn er zwei Werte enthält, können Sie die Methode applyConstraints() auf einem MediaStreamTrack verwenden, um das Betriebssystem aufzufordern, den Hintergrundunschärfeeffekt für den Videofeed der Kamera zu aktivieren oder zu deaktivieren. Das zurückgegebene Versprechen wird bei Erfolg erfüllt und bei Fehler abgelehnt.
Das folgende Code-Snippet zeigt, wie die Hintergrundunschärfe der Kamera auf einem Mediengerät gesteuert wird, für das der Nutzer Zugriff gewährt hat.
// 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"}`);
}
Plattformunterstützung
Die Background Blur API ist in Chrome 114 für ChromeOS, macOS und Windows verfügbar.
Unter ChromeOS und macOS können Sie derzeit nur Änderungen an der Hintergrundunschärfe beobachten, die der Nutzer über die Benutzeroberfläche seines Betriebssystems vornehmen kann, z. B. über das Steuerfeld in macOS. Unter Windows können Sie das Weichzeichnen des Hintergrunds beobachten und steuern.
Demo
Im offiziellen Beispiel können Sie die Hintergrundunschärfe ein- und ausschalten und die Änderungen beobachten. Wie bereits erwähnt, ist die Verfügbarkeit dieser Funktionen von der Unterstützung der Plattform abhängig.
Feedback
Das Feedback von Entwicklern ist in dieser Phase sehr wichtig. Bitte melden Sie Probleme auf GitHub, wenn Sie Vorschläge und Fragen haben.
Wir würden gerne wissen, ob die Hintergrundunschärfe als boolescher Wert Ihren Anforderungen entspricht oder ob ein detaillierterer Ansatz wie „leicht“, „stark“ oder „aus“ besser geeignet wäre, auch wenn er möglicherweise nicht mit den Einstellungen auf allen Betriebssystemen kompatibel ist.