BILIBILI setzt auf die On-Device-KI-basierte Web-KI-Lösung von MediaPipe, um die Nutzerfreundlichkeit von Videostreams zu verbessern und die Sitzungsdauer um 30 % zu erhöhen

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI, eine der führenden Unterhaltungsplattformen in Großchina und Südostasien eine riesige Datenbank mit von Nutzern erstellten Inhalten Sendungen und Gaming-Erlebnisse, die monatlich mehr als 330 Millionen aktive Nutzer.

Eines der charakteristischen Merkmale der Plattform von BILIBILI ist die Integration von Kommentare mit Aufzählungszeichen, eine in Japan und China beliebte Funktion, Zuschauerfeedback in Echtzeit als Lauftext in Videostreams Bullet-Screen Kommentare fügen Live-Video-Content ein spannendes und immersives Element hinzu, aktiv eingebunden werden, indem sie ihre eigenen Gedanken äußern und darauf reagieren an die Inhalte anderer Zuschauer in Echtzeit.

Die Herausforderung

Kommentare, die mit einem Bullet-Screen versehen werden, bieten Zuschauern eine ansprechende Interaktionsmethode. ist es wichtig, dass das Porträt des Sprechers User Experience zu schaffen. Im folgenden Video können Kommentare mit Aufzählungspunkten zum störend sein und Zuschauer davon abhalten, sich das Video weiter anzusehen.

</ph>

Originalzustand: Die ersten Videos zeigen eine sprechende Person mit Kommentare scrollen über den Bildschirm, über das Gesicht des Sprechers.

Kommentare mit Aufzählungszeichen, die nahtlos hinter dem Lautsprecher oder benötigen Sie eine genaue Segmentierung des maschinellen Lernens, effizient auf dem Gerät zu laufen. Daher sind historisch gesehen solche müssen serverseitig unterstützt werden.

In Anbetracht der Menge an Inhalten, die BILIBILI täglich bereitstellt, verarbeitet BILIBILI große Datenmengen, Serverseite sehr teuer wären. Das Entwicklungsteam eine clientseitige Lösung zur Kostensenkung zu finden. Eine weitere Herausforderung dass die Umstellung auf clientseitiges maschinelles Lernen es schwierig macht, von einem Anstieg der Nutzung bis zu dem Punkt, an dem die Leistung beeinträchtigt ist.

</ph>

Ziel: BILIBILI wollte schließlich, dass die Kommentare auf der Bullet-Screen-Seite gescrollt werden können. von rechts nach links hinter dem Lautsprecher, damit das Gesicht des Sprechers nicht verdeckt wird.

Die Lösung: Bildsegmentierung auf dem Gerät

Um diese Herausforderungen anzugehen, nutzten die Entwickler von BILIBILI Body Segmentation with MediaPipe und TensorFlow.js ein Vorgänger des Image Segmenter von MediaPipe. Dies ermöglichte eine effiziente Segmentierungs-API auf dem Gerät sowie vortrainierte für die Selfie- und Multi-Objekt-Segmentierung.

BILIBILI kann die Funktion jetzt schnell iterieren und unterstützen und gleichzeitig die Kosten senken und die Aufrechterhaltung der Leistung.

Implementierung

So hat BILIBILI diese Lösung implementiert:

Zeichenkonturen in Echtzeit: BILIBILI verwendete das Selfie-Segmentierungsmodell. um den Umriss der Zeichen im Video zu extrahieren. So konnten sie um eine Maske zu erstellen, die die Zeichengrenzen abgrenzt.
Integration mit der Live-Kommentarebene: Anschließend wurden die extrahierten Zeichenumriss mit der Live-Kommentarebene mithilfe von CSS erstellen mask-image Eigenschaften. Indem Sie den zentralen Zeichenbereich als transparent festlegen, Kommentare mit Bullet-Screens können nahtlos hinter den Figuren angezeigt werden, die sie behindern. <ph type="x-smartling-placeholder">
</ph>
Ein Diagramm, das zeigt, wie die Entwickler von BILIBILI mithilfe von Echtzeitdaten von MediaPipe eine Zeichenbegrenzung aus einem Videoelement extrahiert und in eine Live-Kommentarebene eingebunden haben.
Implementierung optimieren: BILIBILI musste die Implementierung testen und sicherstellen, Implementierung hat die Leistung nicht beeinträchtigt.

Leistungsoptimierung

BILIBILIs Entwickler nutzten OffscreenCanvas und Web Workers, um zeitaufwendige Aufgaben auf Worker verschieben, damit sie nicht den Hauptthread belegen müssen. Gehen Sie dann so vor: wurde die Größe der Maske reduziert, da nur das Zeichen extrahiert werden muss. Umrisse und sind nicht von der Bildgröße oder -qualität abhängig.

Nach der Reduzierung der Maskengröße dehnte das Entwicklungsteam von BILIBILI die Maske. und mit der DOM-Ebene zusammengeführt, um das Rendering so viel Druck wie möglich aus.

Eine blaue Figur in einem Feld zeigt auf ein identisches Minibild. Eine gepunktete Linie zeigt auf einen kleinen schwarzen Kasten mit einem transparenten Zeichen. Der kleine schwarze Kasten zeigt auf einen identischen größeren Kasten. Diese Minimierung und die Live-Kommentare, dargestellt durch blaue Linien, entsprechen den zusammengeführten Ergebnissen von Kommentaren, die hinter dem Zeichen fließen. — Diagramm, das zeigt, wie BILIBILI die Maskengröße minimiert und mit einer gestreckten Maske zusammengeführt hat

Längere Sitzungsdauer und höhere Klickraten

Durch die Kombination der Reichweite und Leistungsfähigkeit des Webs mit der Flexibilität der MediaPipe-Plattform Mit KI-Lösungen konnte BILIBILI eine leistungsstarke und ansprechende Webanwendung bereitstellen. für Millionen von Nutzern. Schon einen Monat nach der Implementierung BILIBILI verzeichnete eine deutliche Steigerung der Sitzungsdauer um 30% und eine Verbesserung um 19 %. die Klickrate von Videos per Livestream.

30 _%

Längere Sitzungsdauer

19 _%

Höhere CTR

Mit den kostenlosen On-Device-KI-Lösungen von MediaPipe können die Entwickler von BILIBILI wichtige visuelle Elemente effizient beizubehalten und gleichzeitig das Interesse der Zuschauer aufrechtzuerhalten. für eine reibungslose Leistung und schließlich die Bereitstellung von Premiumvideos Streaming-Erlebnis, das Zuschauer vom Plattformleiter erwarten.

Zitat von Jun Liu, Senior Engineer bei BILIBILI: Mit der Lösung von MediaPipe konnten wir Entwicklungskosten sparen, ohne uns auf das Erstellen eines Portrait-Extraktionsmodells zu konzentrieren.