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
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 type="x-smartling-placeholder"></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 type="x-smartling-placeholder"></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.
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.
<ph type="x-smartling-placeholder"></ph>
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.