BILIBILI ist eine der führenden Plattformen für Unterhaltungsinhalte in Greater China und Südostasien. Sie beherbergt eine riesige Datenbank mit von Nutzern erstellten Inhalten, Livestreams und Gaming-Inhalten, die mehr als 330 Millionen monatlich aktive Nutzer (MAU) anzieht.
Eines der Merkmale der BILIBILI-Plattform ist die Integration von Bullet-Screen-Kommentaren. Diese beliebte Funktion in Japan und China zeigt Zuschauerfeedback in Echtzeit als scrollenden Text in Videostreams an. Bullet-Screen-Kommentare verleihen Live-Videoinhalten ein spannendes und immersives Element. Zuschauer können ihre eigenen Gedanken äußern und in Echtzeit auf die Reaktionen anderer Zuschauer reagieren.
Die Herausforderung
Bullet-Screen-Kommentare sind eine ansprechende Möglichkeit für Zuschauer, mit Inhalten zu interagieren. Für eine optimale Nutzererfahrung ist es jedoch wichtig, dass das Porträt des Sprechers nicht verdeckt wird. Im folgenden Video können Kommentare im Bullet-Point-Format ablenken und Zuschauer davon abhalten, sich das Video weiter anzusehen.
Damit Kommentare im Bullet-Screen-Format nahtlos hinter dem Porträt eines Sprechers eingeblendet werden können, ist eine genaue Segmentierung mithilfe von maschinellem Lernen erforderlich. Diese lässt sich auf Geräten jedoch nur schwer effizient ausführen. Aus diesem Grund mussten solche leistungsstarken Funktionen bisher serverseitig unterstützt werden.
Angesichts der Menge an Inhalten, die BILIBILI täglich bereitstellt, wäre die serverseitige Verarbeitung großer Teile davon sehr teuer. Das Entwicklungsteam musste also eine clientseitige Lösung finden, um die Kosten zu senken. Eine weitere Herausforderung besteht darin, dass es beim Wechsel zu clientseitigem maschinellem Lernen schwierig ist, zu verhindern, dass die CPU-Auslastung so stark ansteigt, dass die Leistung beeinträchtigt wird.
Die Lösung: On-Device-Bildsegmentierung
Um diese Herausforderungen zu meistern, nutzten die Entwickler von BILIBILI die Körpersegmentierung mit MediaPipe und TensorFlow.js, einen Vorgänger des Bildsegmentierungstools von MediaPipe. So konnten wir eine effiziente On-Device-Segmentierungs-API sowie vortrainierte Modelle für die Segmentierung von Selfies und mehreren Objekten entwickeln.
BILIBILI kann die Funktion jetzt schnell iterieren und unterstützen und gleichzeitig die Kosten senken und die Leistung beibehalten.
Implementierung
So hat BILIBILI diese Lösung implementiert:
- Figurenkonturen in Echtzeit: BILIBILI hat das Selfie-Segmentierungsmodell verwendet, um die Konturen der Figuren im gesamten Video zu extrahieren. So konnte er eine Maske erstellen, die die Grenzen der einzelnen Zeichen abgrenzte.
- Integration in die Livekommentarebene: Anschließend wurden die extrahierten Schriftzeichenkonturen mithilfe von CSS-
mask-image-Eigenschaften in die Livekommentarebene eingefügt. Wenn du den zentralen Bereich für die Charaktere als transparent festlegst, können die Kommentare auf dem Bullet-Screen nahtlos hinter den Charakteren angezeigt werden, ohne sie zu verdecken.
Ein Diagramm, das zeigt, wie die Entwickler von BILIBILI mithilfe der Echtzeitverarbeitung von MediaPipe einen Charakterumriss aus einem Videoelement extrahierten und in eine Livekommentarebene einbetteten. - Implementierung optimieren: BILIBILI musste testen und dafür sorgen, dass die Implementierung die Leistung nicht beeinträchtigt.
Leistungsoptimierung
Die Entwickler von BILIBILI verwendeten OffscreenCanvas und Web Worker, um zeitaufwendige Aufgaben an Worker zu übergeben, um den Hauptthread nicht zu belegen. Anschließend reduzierte er die Größe der Maske, da sie nur zum Extrahieren des Schriftzugs benötigt wird und nicht von der Bildgröße oder -qualität abhängt.
Nachdem das Entwicklungsteam von BILIBILI die Größe der Maske reduziert hatte, dehnte es sie während der Komposition und verschmolz sie mit der DOM-Ebene, um den Rendering-Druck so weit wie möglich zu reduzieren.
Längere Sitzungsdauer und höhere Klickraten
Durch die Kombination der Reichweite und Leistungsfähigkeit des Webs mit der Flexibilität der KI-Lösungen von MediaPipe konnte BILIBILI Millionen von Nutzern eine leistungsstarke und ansprechende Web-App bieten. Bereits nach einem Monat konnte BILIBILI eine deutliche Steigerung der Sitzungsdauer um 30% und eine Verbesserung der Klickrate bei Livestream-Videos um 19% verzeichnen.
30 %
Längere Sitzungsdauer
19 %
Höhere CTR
Mit den kostenlosen On-Device-KI-Lösungen von MediaPipe konnten die Entwickler von BILIBILI wichtige visuelle Elemente effizient beibehalten und gleichzeitig die Zuschauer bei Laune halten. So konnten sie eine reibungslose Leistung gewährleisten und letztendlich das Premium-Videostreaming bieten, das Zuschauer von der führenden Plattform erwarten.
