BILIBILI, una de las principales plataformas de contenido de entretenimiento de la Gran China y el Sudeste Asiático, aloja una base de datos masiva de contenido generado por usuarios, transmisiones en vivo y experiencias de juego que atrae a más de 330 millones de usuarios activos mensuales (MAU).
Una de las características distintivas de la plataforma de BILIBILI es la integración de los comentarios de pantalla con viñetas, una función popular en Japón y China que muestra los comentarios de los usuarios en tiempo real como texto que se desplaza en las transmisiones de video. Los comentarios con viñetas en pantalla agregan un elemento emocionante y envolvente al contenido de video en vivo, lo que mantiene a los usuarios activos y participativos, ya que les permite expresar sus propios pensamientos y responder a las reacciones de otros usuarios en tiempo real.
El desafío
Si bien los comentarios con viñetas son una forma atractiva para que los usuarios interactúen con el contenido, es importante mantener el retrato del orador sin obstrucciones para brindar la mejor experiencia del usuario. En el siguiente video, los comentarios con viñetas pueden ser disruptivos y disuadir a los usuarios de seguir mirando.
Para habilitar los comentarios de la pantalla de viñetas que fluyen sin problemas detrás del retrato de un orador, necesitas una segmentación precisa del aprendizaje automático, que puede ser difícil de ejecutar de manera eficiente en el dispositivo. Por eso, históricamente, estas funciones tan potentes debían ser compatibles con el servidor.
Dado la cantidad de contenido que BILIBILI entrega a diario, procesar grandes partes de él del servidor sería muy costoso. Por lo tanto, su equipo de desarrollo necesitaba encontrar una solución del cliente para reducir el costo. Otro desafío es que el cambio al aprendizaje automático del cliente dificulta evitar que el uso de la CPU aumente hasta el punto en que se vea afectado el rendimiento.
La solución: Segmentación de imágenes integrada en el dispositivo
Para abordar estos desafíos, los desarrolladores de BILIBILI aprovecharon la segmentación del cuerpo con MediaPipe y TensorFlow.js, un predecesor del segmentador de imágenes de MediaPipe. Esto proporcionó una API de segmentación en el dispositivo eficiente, así como modelos previamente entrenados para la segmentación de selfies y varios objetos.
Ahora, BILIBILI puede iterar y admitir la función con rapidez, a la vez que reduce los costos y mantiene el rendimiento.
Implementación
A continuación, se muestra cómo BILIBILI implementó esta solución:
- Siluetas de personajes en tiempo real: BILIBILI usó el modelo Selfie Segmenter para extraer el contorno de los personajes a lo largo del video. Esto les permitió crear una máscara que delineó los límites de los personajes.
- Integración con la capa de comentarios en vivo: Luego, combinaron el esquema de personaje extraído con la capa de comentarios en vivo usando las propiedades
mask-imagede CSS. Si configuras el área de caracteres central como transparente, los comentarios de la pantalla de viñetas pueden aparecer sin problemas detrás de los caracteres sin obstruirlos.
Diagrama que muestra cómo los desarrolladores de BILIBILI extrajeron el contorno de un personaje de un elemento de video y lo integraron con una capa de comentarios en vivo mediante el procesamiento en tiempo real de MediaPipe. - Optimizar la implementación: BILIBILI debía probar y asegurarse de que la implementación no degradara el rendimiento.
Optimización del rendimiento
Los desarrolladores de BILIBILI usaron OffscreenCanvas y Web Workers para mover tareas que requieren mucho tiempo a los trabajadores y evitar ocupar el subproceso principal. Luego, se redujo el tamaño de la máscara, ya que solo se necesita para extraer el contorno del personaje y no depende del tamaño ni la calidad de la imagen.
Después de reducir el tamaño de la máscara, el equipo de desarrollo de BILIBILI la estiró durante la composición y la fusionó con la capa de DOM para reducir la presión de renderización tanto como fuera posible.
Aumento de la duración de la sesión y las tasas de clics
Combinando el alcance y la potencia de la Web con la flexibilidad de las soluciones de IA de MediaPipe, BILIBILI entregó con éxito una experiencia de app web atractiva y potente a millones de usuarios. Además, en solo un mes después de la implementación, BILIBILI observó un aumento notable del 30% en la duración de las sesiones y una mejora del 19% en la tasa de clics de los videos de transmisión en vivo.
30 %
Aumento de la duración de la sesión
19 %
Mayor CTR
Con las soluciones gratuitas de IA web integradas en el dispositivo de MediaPipe, los desarrolladores de BILIBILI pudieron retener de manera eficiente elementos visuales cruciales y, al mismo tiempo, mantener la participación de los usuarios, garantizar un rendimiento fluido y, en última instancia, ofrecer la experiencia de transmisión de video premium que los usuarios esperan del líder de la plataforma.
