BILIBILI usa a solução de IA da Web no dispositivo da MediaPipe para melhorar a UX do stream de vídeo e aumentar a duração da sessão em 30%

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI, uma das principais plataformas de conteúdo de entretenimento da Grande China e Sudeste Asiático, hospeda um enorme banco de dados de conteúdo gerado pelo usuário, transmissões e experiências de jogos, atraindo mais de 330 milhões de usuários ativos (MAU).

Um dos recursos característicos da plataforma do BILIBILI é a integração comentários em tópicos, um recurso popular no Japão e na China que exibe feedback dos espectadores em tempo real como texto de rolagem em streams de vídeo. Tela de marcadores os comentários adicionam um elemento empolgante e imersivo ao conteúdo do vídeo ao vivo, mantendo espectadores ativamente envolvidos, permitindo que expressem seus próprios pensamentos e respondam para outros espectadores reações em tempo real.

O desafio

Os comentários na tela são uma maneira envolvente de interação dos espectadores com o conteúdo, é importante manter o retrato desobstruído para a melhor experiência do usuário. No vídeo a seguir, os comentários em formato de marcador podem ser perturbador e desencoraja os espectadores de continuarem assistindo.

Estado original: os vídeos iniciais mostram uma pessoa falando, com rolando os comentários pela tela, sobre o rosto de quem está apresentando.

Para permitir que os comentários em tópicos apareçam na tela com facilidade, atrás do comando do apresentador. retrato, você precisa de uma segmentação precisa de machine learning, que pode ser difícil de ser executado de forma eficiente no dispositivo. É por isso que, historicamente, tanto recursos precisam ter suporte no lado do servidor.

Considerando a quantidade de conteúdo que BILIBILI veicula diariamente, o processamento de grandes do lado do servidor seriam muito caras. A equipe de desenvolvimento da empresa necessário para encontrar uma solução do lado do cliente para reduzir o custo. Um novo desafio é que a migração para o machine learning do lado do cliente dificulta manter aumento do uso até o ponto em que o desempenho é prejudicado.

Objetivo: no final, o BILIBILI queria que os comentários na tela rolassem. da direita para a esquerda atrás do alto-falante, de modo a não bloquear o rosto dele.

A solução: segmentação de imagens no dispositivo

Para enfrentar esses desafios, os desenvolvedores do BILIBILI aproveitaram Segmentação de corpo com MediaPipe e TensorFlow.js; um antecessor do segmentador de imagem do MediaPipe. Isso proporcionou uma API eficiente de segmentação no dispositivo, assim como modelos para segmentação de selfies e vários objetos.

O BILIBILI agora pode iterar e oferecer suporte rapidamente ao recurso, além de reduzir custos. e manter o desempenho.

Implementação

Veja como o BILIBILI implementou esta solução:

Contorno de personagens em tempo real: o BILIBILI usou o modelo do Segmentador de selfies. para extrair o contorno dos caracteres ao longo do vídeo. Isso permitiu que eles para criar uma máscara que delineia os limites dos caracteres.
Integração com a camada de comentários em tempo real: depois, mesclaram as imagens contorno de caractere com a camada de comentários ao vivo usando CSS mask-image propriedades. Ao definir a área central do personagem como transparente, o os comentários na tela com marcadores podem aparecer perfeitamente atrás dos caracteres sem obstruindo-as.

Um diagrama que mostra como os desenvolvedores do BILIBILI extrairam o contorno de um caractere de um elemento de vídeo e o integraram a uma camada de comentários ao vivo usando a computação em tempo real do MediaPipe.
Otimizar a implementação: BILIBILI necessário para testar e garantir a implementação não prejudicou o desempenho.

Otimização de desempenho

Os desenvolvedores do BILIBILI usaram OffscreenCanvas e Web Workers para mover tarefas demoradas para workers, evitando ocupar a linha de execução principal. Depois, eles reduziram o tamanho da máscara, já que ela só é necessária para extrair o caractere contorno e não depende do tamanho ou da qualidade da imagem.

Depois de reduzir o tamanho da máscara, a equipe de desenvolvimento do BILIBILI estendeu a máscara durante a composição e mesclou com a camada DOM para reduzir a renderização o máximo possível de pressão.

Um caractere azul em uma caixa aponta para uma pequena imagem idêntica. Uma linha pontilhada aponta para uma pequena caixa preta com um caractere transparente. A pequena caixa preta aponta para uma caixa maior idêntica. Esse processo de minimização mais os comentários ao vivo, representado por linhas azuis, é igual aos resultados mesclados de comentários que aparecem atrás do caractere. — Um diagrama que demonstra como o BILIBILI minimizou o tamanho da máscara e a mescla com uma máscara esticada.

Aumento da duração da sessão e das taxas de cliques

Ao combinar o alcance e o poder da Web com a flexibilidade do soluções de IA, a BILIBILI criou um app da Web poderoso e envolvente com sucesso para milhões de usuários. E, em apenas um mês de implementação, O BILIBILI teve um aumento notável de 30% na duração da sessão e uma melhoria de 19% na taxa de cliques dos vídeos de transmissão ao vivo.

30 _%

Aumento da duração da sessão

19 _%

CTR maior

Com as soluções de IA da Web sem custo financeiro e no dispositivo do MediaPipe, os desenvolvedores do BILIBILI podem reter de forma eficiente elementos visuais cruciais, mantendo os espectadores envolvidos, garantindo um bom desempenho e, por fim, entregando os melhores experiência de streaming que os espectadores esperam dos líderes da plataforma.

Citação de Jun Liu, engenheiro sênior da BILIBILI: a solução do MediaPipe nos ajudou a economizar custos de desenvolvimento sem nos concentrarmos na criação de um modelo de extração de retrato.