Das Weichzeichnen des Hintergrunds ist eine beliebte Funktion in modernen Anwendungen für Videokonferenzen. Der Hintergrund wird automatisch vom Hintergrund der Person vor der Kamera unterschieden. Die Umgebung wird weichgezeichnet, während die Person im Fokus bleibt.
Mit der Background Blur API stehen im Web Funktionen zur Hintergrundverbergung zur Verfügung. Mit dieser API können Webanwendungen das Betriebssystem auffordern, den Effekt zum Weichzeichnen des Hintergrunds effizient auf den Videofeed einer Kamera anzuwenden. Dadurch entfällt die kostspielige manuelle Anwendung des Effekts durch ML-Frameworks 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, kann jedoch in Chrome 114 getestet werden, indem die Funktion explizit aktiviert wird. Sie können sie lokal aktivieren, indem Sie unter chrome://flags/#enable-experimental-web-platform-features das Flag „Experimental Web Platform features“ (Experimentelle Webplattform-Features) aktivieren.
Um sie für alle Besucher Ihrer App zu aktivieren, läuft derzeit ein Ursprungstest und endet in Chrome 117 (3. November 2023). Wenn Sie am Test teilnehmen möchten, registrieren Sie sich und fügen Sie ein Meta-Element mit dem Ursprungstesttoken entweder im HTML- oder im HTTP-Header ein. Weitere Informationen finden Sie im Beitrag Erste Schritte mit Ursprungstests.
Änderungen an der Weichzeichnung des Hintergrunds beobachten
Mit der booleschen Einstellung backgroundBlur für eine MediaStreamTrack können Sie feststellen, ob das Betriebssystem auf dem Mediengerät den Hintergrund weichzeichnen soll. Außerdem wird ein "configurationchange"-Ereignis für ein MediaStreamTrack ausgelöst, wenn der Nutzer das Weichzeichnen des Hintergrunds über eine Betriebssystemvariante ein- oder ausschaltet.
Das folgende Code-Snippet zeigt, wie Sie Änderungen am Weichzeichnen des Hintergrunds auf einem Mediengerät beobachten können, dem 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 aktivieren/deaktivieren
Mit der backgroundBlur-Arrayfunktion für MediaStreamTrack können Sie feststellen, ob Sie das Weichzeichnen des Hintergrunds auf dem Mediengerät steuern können. Wenn es nicht definiert ist oder nur einen Wert ([true] oder [false]) enthält, können Sie das Weichzeichnen des Kamerahintergrunds nicht steuern. Wenn sie zwei Werte enthält, können Sie die Methode applyConstraints() für ein MediaStreamTrack verwenden, um das Betriebssystem anzufordern, den Effekt zum Weichzeichnen des Hintergrunds auf den Videofeed der Kamera umzuschalten. Das zurückgegebene Promise wird bei Erfolg aufgelöst und bei Fehler abgelehnt.
Das folgende Code-Snippet zeigt, wie Sie das Weichzeichnen des Kamerahintergrunds auf einem Mediengerät steuern, auf 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.
Bei ChromeOS und macOS können Sie derzeit nur Änderungen beim Weichzeichnen des Hintergrunds beobachten, die Nutzer über die Benutzeroberfläche des Betriebssystems wie das Control Center unter macOS vornehmen können. Mit Windows können Sie das Weichzeichnen des Hintergrunds beobachten und steuern.
Demo
Sie können den Hintergrund weichzeichnen und Änderungen beobachten, indem Sie mit dem offiziellen Sample spielen. (Wie bereits erwähnt, hängt die Verfügbarkeit dieser Funktionen von der Unterstützung der Plattform ab.)
Feedback
Entwicklerfeedback ist in dieser Phase sehr wichtig. Bitte melde Probleme auf GitHub und stelle Fragen und Vorschläge bereit.
Wir würden gerne Ihre Meinung dazu hören, ob die Bereitstellung der Hintergrundunschärfe als boolescher Wert Ihren Anforderungen entspricht oder ob ein detaillierterer Ansatz wie „hell“, „stark“ oder „aus“ besser geeignet wäre, auch wenn dies möglicherweise nicht mit der Darstellung auf allen Betriebssystemen kompatibel ist.
Nützliche Links
- Erklärung
- Spezifikation
- Chromium-Tracking-Programmfehler
- ChromeStatus.com-Eintrag
- TAG-Überprüfung
- Experimentierfreude
Hero-Image von Ayo Ogunseinde