A BILIBILI, uma das principais plataformas de entretenimento da Grande China e do Sudeste Asiático, hospeda um banco de dados enorme de conteúdo gerado pelo usuário, transmissões ao vivo e experiências de jogos que atraem mais de 330 milhões de usuários ativos por mês (MAU).
Um dos recursos distintos da plataforma BILIBILI é a integração de comentários de tela de marcadores, um recurso popular no Japão e na China que exibe feedback do espectador em tempo real como texto rolante em transmissões de vídeo. Os comentários de tela com marcadores adicionam um elemento empolgante e imersivo ao conteúdo de vídeo ao vivo, mantendo os espectadores engajados ao permitir que eles expressem os próprios pensamentos e respondam às reações de outros espectadores em tempo real.
O desafio
Embora os comentários de tela com marcadores sejam uma maneira interessante de os espectadores interagirem com o conteúdo, é importante manter o retrato do orador desobstruído para a melhor experiência do usuário. No vídeo abaixo, os comentários de tela com marcadores podem ser perturbadores e desencorajar os espectadores a continuar assistindo.
Para ativar comentários de tela de lista que fluem sem problemas por trás do retrato de um orador, você precisa de segmentação precisa de aprendizado de máquina, que pode ser difícil de executar de maneira eficiente no dispositivo. É por isso que, historicamente, esses recursos poderosos precisam ter suporte do lado do servidor.
Considerando a quantidade de conteúdo que o BILIBILI serve diariamente, processar grandes porções dele no servidor seria muito caro. Então, a equipe de desenvolvimento precisou encontrar uma solução do lado do cliente para reduzir o custo. Outro desafio é que a migração para o aprendizado de máquina do lado do cliente dificulta a manutenção do uso da CPU a ponto de prejudicar o desempenho.
A solução: segmentação de imagens no dispositivo
Para resolver esses desafios, os desenvolvedores do BILIBILI aproveitaram a segmentação do corpo com o MediaPipe e o TensorFlow.js, um antecessor do segmentador de imagem do MediaPipe. Isso forneceu uma API de segmentação eficiente no dispositivo, além de modelos pré-treinados para segmentação de selfie e de vários objetos.
Agora, a BILIBILI pode iterar e oferecer suporte ao recurso rapidamente, reduzindo custos e mantendo a performance.
Implementação
Confira como a BILIBILI implementou essa solução:
- Contornos de personagens em tempo real: a BILIBILI usou o modelo Selfie Segmenter para extrair o contorno dos personagens em todo o vídeo. Isso permitiu criar uma máscara que delimitou os limites dos caracteres.
- Integração com a camada de comentários em tempo real: em seguida, eles mesclaram o contorno de caractere
extraído com a camada de comentários em tempo real usando as propriedades
mask-imagedo CSS. Ao definir a área do caractere central como transparente, os comentários da tela de marcadores podem aparecer perfeitamente atrás dos caracteres sem os obstruir.
Diagrama mostrando como os desenvolvedores do BILIBILI extraíram o contorno de um personagem de um elemento de vídeo e o integraram a uma camada de comentários em tempo real usando a computação em tempo real do MediaPipe. - Otimizar a implementação: a BILIBILI precisava testar e garantir que a implementação não degradasse o desempenho.
Otimização de desempenho
Os desenvolvedores da BILIBILI usaram OffscreenCanvas e Web Workers para mover tarefas demoradas para os workers, evitando ocupar a linha de execução principal. Em seguida, eles reduziram o tamanho da máscara, já que ela só é necessária para extrair o contorno do personagem e não depende do tamanho ou da qualidade da imagem.
Depois de reduzir o tamanho da máscara, a equipe de desenvolvimento da BILIBILI estendeu a máscara durante a composição e a mesclou com a camada DOM para reduzir a pressão de renderização o máximo possível.
Aumento na duração da sessão e nas taxas de cliques
Ao combinar o alcance e o poder da Web com a flexibilidade das soluções de IA do MediaPipe, a BILIBILI conseguiu oferecer uma experiência de app da Web poderosa e envolvente para milhões de usuários. E, em apenas um mês de implementação, a BILIBILI teve um aumento significativo de 30% na duração da sessão e uma melhoria de 19% na taxa de cliques de vídeos de transmissão ao vivo.
30 %
Aumento na duração da sessão
19 %
CTR maior
Com as soluções de IA na Web e sem custo do MediaPipe, os desenvolvedores do BILIBILI conseguiram reter elementos visuais importantes de forma eficiente, mantendo o engajamento dos espectadores, garantindo um desempenho tranquilo e, por fim, oferecendo a experiência de streaming de vídeo premium que os espectadores esperam da plataforma líder.
