BILIBILI, l'une des principales plates-formes de contenus de divertissement en Chine et en Asie du Sud-Est, héberge une base de données massive de contenus générés par les utilisateurs, de diffusions en direct et d'expériences de jeu qui attirent plus de 330 millions d'utilisateurs actifs par mois (MAU).
L'une des caractéristiques distinctives de la plate-forme BILIBILI est l'intégration des commentaires sur le flux vidéo, une fonctionnalité populaire au Japon et en Chine qui affiche les commentaires des spectateurs en temps réel sous forme de texte défilant dans les flux vidéo. Les commentaires en bulles ajoutent un élément excitant et immersif aux contenus vidéo en direct. Ils permettent aux spectateurs de rester activement engagés en leur permettant d'exprimer leurs propres pensées et de répondre aux réactions des autres spectateurs en temps réel.
Problématique
Bien que les commentaires sur le carrousel soient un moyen engageant pour les spectateurs d'interagir avec le contenu, il est important de ne pas masquer le portrait de l'intervenant pour une expérience utilisateur optimale. Dans la vidéo suivante, les commentaires sur le screen peuvent être gênants et décourager les spectateurs de continuer à regarder.
Pour permettre aux commentaires du flux de commentaires de s'afficher en arrière-plan du portrait d'un intervenant, vous avez besoin d'une segmentation précise du machine learning, qui peut être difficile à exécuter efficacement sur l'appareil. C'est pourquoi, historiquement, de telles fonctionnalités puissantes devaient être prises en charge côté serveur.
Compte tenu de la quantité de contenu diffusée quotidiennement par BILIBILI, le traitement de grandes parties de celui-ci côté serveur serait très coûteux. Son équipe de développement devait donc trouver une solution côté client pour réduire les coûts. Autre défi : le passage au machine learning côté client rend difficile l'empêchement de l'augmentation de l'utilisation du processeur au point de nuire aux performances.
La solution: segmentation d'images sur l'appareil
Pour relever ces défis, les développeurs de BILIBILI ont exploité la segmentation du corps avec MediaPipe et TensorFlow.js, un prédécesseur du segmenteur d'images de MediaPipe. Cela a fourni une API de segmentation efficace sur l'appareil, ainsi que des modèles pré-entraînés pour la segmentation de selfie et multi-objet.
BILIBILI peut désormais itérer et prendre en charge rapidement la fonctionnalité, tout en réduisant les coûts et en maintenant les performances.
Implémentation
Voici comment BILIBILI a implémenté cette solution:
- Contours des personnages en temps réel: BILIBILI a utilisé le modèle Selfie Segmenter pour extraire le contour des personnages tout au long de la vidéo. Cela leur a permis de créer un masque qui délimitait les limites des caractères.
- Intégration à la couche de commentaires en direct: il a ensuite fusionné le contour des caractères extraits avec la couche de commentaires en direct à l'aide des propriétés CSS
mask-image. En définissant la zone des caractères centraux sur "transparent", les commentaires du panneau de suivi peuvent apparaître en arrière-plan des personnages sans les masquer.
Diagramme montrant comment les développeurs de BILIBILI ont extrait un contour de personnage à partir d'un élément vidéo et l'ont intégré à une couche de commentaires en direct à l'aide du calcul en temps réel de MediaPipe. - Optimiser l'implémentation: BILIBILI devait tester et s'assurer que l'implémentation n'affectait pas les performances.
Optimisation des performances
Les développeurs de BILIBILI ont utilisé OffscreenCanvas et Web Workers pour déplacer les tâches fastidieuses vers les workers, afin d'éviter d'occuper le thread principal. Il a ensuite réduit la taille du masque, car il n'est nécessaire que pour extraire le contour du personnage et ne dépend pas de la taille ni de la qualité de l'image.
Après avoir réduit la taille du masque, l'équipe de développement de BILIBILI a étiré le masque lors de la composition et l'a fusionné avec la couche DOM pour réduire autant que possible la pression de rendu.
Augmentation de la durée des sessions et des taux de clics
En combinant la couverture et la puissance du Web à la flexibilité des solutions d'IA de MediaPipe, BILIBILI a réussi à offrir une expérience d'application Web puissante et attrayante à des millions d'utilisateurs. Et en seulement un mois d'implémentation, BILIBILI a enregistré une augmentation notable de la durée des sessions de 30% et une amélioration de 19% du taux de clics sur les vidéos en streaming en direct.
30 %
Durée de session accrue
19 %
Augmenter le CTR
Grâce aux solutions d'IA Web sans frais sur l'appareil de MediaPipe, les développeurs de BILIBILI ont pu conserver efficacement des éléments visuels cruciaux tout en maintenant l'engagement des spectateurs, en assurant des performances fluides et, en fin de compte, en offrant l'expérience de streaming vidéo premium que les spectateurs attendent du leader de la plate-forme.
