Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde

Als wir alle begannen, unsere Arbeits- und Kommunikationsweise zu ändern, mussten die meisten von uns Online-Kommunikationstools wie Zoom, Skype, Microsoft Teams, Jitsi oder BigBlueButton verwenden. Die Teilnahme an einer Videokonferenz im Büro ist nicht dasselbe wie die Teilnahme an einer Videokonferenz von zu Hause aus, da wir vielleicht private Gegenstände haben, die wir anderen nicht zeigen möchten. Dabei kann es sich um Familienfotos oder persönliche Gegenstände handeln, oder auch nur darum, dass der Raum ein wenig unordentlich ist und wir nicht möchten, dass man das sieht.

Einführung von virtuellen Hintergründen

Die meisten der oben genannten Videokonferenzplattformen bieten einen „virtuellen Hintergrund“ oder eine „Blur“-Funktion. Diese Funktion ermöglicht es den Nutzern, ihren Hintergrund zu ändern, ohne dass ein Greenscreen erforderlich ist. Um dies zu erreichen, werden – sehr einfach erklärt – Algorithmen des maschinellen Lernens eingesetzt, um Menschen vom Hintergrund zu unterscheiden.

Bei LionGate verwenden wir BigBlueButton für unsere Online-Lehrplattform „vicole“, und leider fehlte BigBlueButton die Funktion des virtuellen Hintergrunds, die sowohl von unseren Kunden als auch von den Leuten, die BigBlueButton genau wie wir verwenden, sehr gefragt war. Daher boten wir an, das Projekt zu unterstützen und die Funktion selbst zu entwickeln. Außerdem trugen wir zu dem Projekt bei, indem wir einen Open-Source-Beitrag zu BigBlueButton leisteten, den jeder nutzen darf, sobald er/sie dem Projekt hinzugefügt wurde.

Die ersten Schritte und das Verständnis der Technologie dahinter

Nachdem wir angeboten hatten, die Funktion für BigBlueButton bereitzustellen, mussten wir zunächst herausfinden, welche Schritte notwendig waren. Als Open-Source- und webbasierte Videokonferenzplattform haben wir uns zunächst Jitsi und deren Implementierung der Funktion angeschaut. Nachdem wir ihren Quellcode gelesen hatten, sahen wir, dass sie von einem anderen Open-Source-Projekt eines Github-Benutzers namens „Volcomix“ inspiriert wurden. Dies war eine große Entdeckung für unser Verständnis des Konzepts, da Volcomix die Schritte, die zum Erreichen des Endergebnisses erforderlich sind, sehr gut dokumentiert und mit einer funktionierenden Demo untermauert hat.

Wir folgten den Schritten von Volcomix und Jitsi und verwendeten das Google Meet Segmentation Model von Anfang Januar, als das Modell unter der Apache-Lizenz Version 2 veröffentlicht wurde, was bedeutete, dass es Open-Source war. Das Modell wurde nur als TFLite-Datei zur Verfügung gestellt, so dass wir das TFLite-Modell in Web Assembly einbauen mussten, genau wie Volcomix und Jitsi es taten. Danach ging es darum, die Funktion zu implementieren, indem wir den Code an die in BigBlueButton verwendeten Verfahren anpassten.

Anpassen des Features an BigBlueButton

Der Web-Client von BigBlueButton verwendet React und Meteor. Es musste ein Meteor-Web-Handler erstellt werden, um die Web-Assembly-Dateien zu laden, wenn sie vom Benutzer angefordert werden, obwohl sich dies als suboptimaler Ansatz herausstellte, da hier andere Alternativen dafür diskutiert werden. Nach dem Laden des Modells wird der Videostream des Benutzers entweder durch ein vom Benutzer gewähltes Hintergrundbild oder durch einen virtuellen Unschärfeeffekt ersetzt und dann an ein HTML-Canvas-Element übergeben. Der ersetzte Stream wird dann mit Hilfe der Funktion HTMLCanvasElement.captureStream() als MediaStream-Objekt zurückgegeben. Das oben erwähnte HTML-Canvas-Element ist nur virtuell, d. h. es ist für den Benutzer nicht sichtbar. Zusammengefasst sieht der gesamte Prozess wie das folgende Diagramm aus:

.

Das ist soweit alles gut, aber wir sehen den Effekt nur lokal. Um den Effekt den anderen Teilnehmern der Konferenz zu zeigen, müssen wir unseren Stream freigeben. Nachdem wir also das MediaStream-Objekt haben, können wir die Videospur ersetzen, die in der WebRTC RTCPeerConnection verwendet wird.  Nachdem der Stream ersetzt wurde und die RTC-Protokolle eingerichtet wurden, können die Benutzer den Stream der anderen mit virtuellen Hintergründen sehen. Da der Effekt auf der Seite des sendenden Nutzers angewendet wird, kommt es auf den Systemen der empfangenden Nutzer zu keiner zusätzlichen Leistungsverschlechterung.

Schlussbemerkungen

Obwohl die Funktion so funktioniert, wie sie jetzt ist, muss sie noch etwas verfeinert werden, und es gibt Verbesserungen, die zum Zeitpunkt der Erstellung dieses Blogbeitrags in Arbeit sind. Ein großartiger Aspekt von Open-Source-Projekten ist, dass jeder die Probleme finden und zu dem Projekt beitragen kann, so wie wir es als LionGate getan haben. Dies war eine großartige Gelegenheit, einem Projekt etwas zurückzugeben, das wir auch selbst gerne nutzen.

Wenn Sie eine Live-Demonstration sehen möchten, können Sie www.vicole.de besuchen und es selbst ausprobieren.


Lassen Sie uns reden.

Ihr Kontakt bei LionGate: Bartu Bazna, Software-Entwickler