Die Hintergrundunschärfe ist eine beliebte Funktion in modernen Videokonferenzanwendungen. Sie unterscheidet automatisch den Hintergrund von der Person vor der Kamera, sodass die Umgebung unscharf wird, während der Fokus auf der Person 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. Wenn der Nutzer die Hintergrundunschärfe über eine Betriebssystemfunktion aktiviert oder deaktiviert, wird außerdem ein "configurationchange"-Ereignis auf einem MediaStreamTrack ausgelöst.
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 der Wert nicht definiert ist oder nur einen Wert ([true] oder [false]) enthält, können Sie die Hintergrundunschärfe der Kamera 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"}`);
}
Plattform-Support
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 die Hintergrundunschärfe beobachten und steuern.
Demo
Im offiziellen Beispiel können Sie die Hintergrundunschärfe ein- und ausschalten und die Änderungen beobachten. Wie bereits erwähnt, hängt die Verfügbarkeit dieser Funktionen von der Unterstützung durch die Plattform ab.
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.