BILIBILI, una de las principales plataformas de contenido de entretenimiento en la Gran China y en el Sudeste Asiático, aloja una enorme base de datos de contenido generado por usuarios, transmisiones y experiencias de videojuegos que atraen a más de 330 millones los usuarios activos (MAU).
Una de las características distintivas de la plataforma de BILIBILI es la integración de comentarios en pantalla, una función popular en Japón y China que muestra comentarios de los usuarios en tiempo real como texto en movimiento en transmisiones de video por Internet. Pantalla con viñetas los comentarios agregan un elemento emocionante y envolvente al contenido de video en vivo, lo que garantiza usuarios activos activamente permitiéndoles expresar sus propias opiniones y responder a las opiniones de otros usuarios reacciones en tiempo real.
El desafío
Si bien los comentarios en la pantalla con viñetas son una forma atractiva para que los usuarios interactúen, es importante mantener el retrato del orador sin obstrucciones la mejor experiencia del usuario. En el siguiente video, los comentarios en la pantalla de viñetas se pueden puede interrumpir a los usuarios y disuadirlos de seguir mirando el contenido.
Para habilitar comentarios en la pantalla con viñetas que fluyan sin interrupciones detrás del interlocutor vertical, necesitas una segmentación precisa del aprendizaje automático, que se puede difíciles de ejecutar de manera eficiente en el dispositivo. Por eso, históricamente, son tan poderosos y funciones deben ser compatibles con el servidor.
Dada la cantidad de contenido que BILIBILI publica diariamente, procesar grandes cantidades del servidor sería muy costoso. Por lo tanto, su equipo de desarrollo necesarios para encontrar una solución del cliente que reduzca los costos. Un desafío adicional es que migrar al aprendizaje automático del cliente dificulta mantener la desde el aumento hasta el punto en el que el rendimiento se ve obstaculizado.
La solución: Segmentación de imágenes en el dispositivo
Para abordar estos desafíos, los desarrolladores de BILIBILI aprovecharon Segmentación del cuerpo con MediaPipe y TensorFlow.js, y predecesora del segmentador de imágenes de MediaPipe. Esto proporcionó una API de segmentación integrada en el dispositivo eficiente, además de para la segmentación de selfies y varios objetos.
Ahora BILIBILI puede iterar y admitir rápidamente la función, a la vez que reduce los costos y mantener el rendimiento.
Implementación
A continuación, te mostramos cómo BILIBILI implementó esta solución:
- Contornos en tiempo real de los personajes: BILIBILI usó el modelo del Segmentador de selfies. para extraer el contorno de los caracteres a lo largo del video. Esto les permitió para crear una máscara que delimitara los límites de los caracteres.
- Integración con la capa de comentarios en vivo: Luego, combinaron el elemento extraído.
contorno de caracteres con la capa de comentarios en vivo usando CSS
mask-imagepropiedades. Al establecer el área de caracteres central como transparente, el los comentarios en la pantalla pueden aparecer sin problemas detrás de los caracteres sin y las obstruyen.
Un diagrama en el que se muestra cómo los desarrolladores de BILIBILI extrajeron el contorno de un personaje de un elemento de video y lo integraron en una capa de comentarios en vivo usando el procesamiento en tiempo real de MediaPipe. - Optimizar la implementación: BILIBILI necesitaba probar y garantizar el de la implementación no disminuyó el rendimiento.
Optimización del rendimiento
Los desarrolladores de BILIBILI usaron OffscreenCanvas y trabajadores web para mover las tareas que requieren mucho tiempo a los trabajadores para evitar que ocupen el subproceso principal Luego, redujeron el tamaño de la máscara, ya que solo era necesario extraer el carácter contorno y no depende del tamaño ni de la calidad de la imagen.
Tras reducir el tamaño de la máscara, el equipo de desarrollo de BILIBILI la estiró. durante la composición y la combinamos con la capa del DOM para reducir la representación la mayor presión posible.
Aumento de la duración de las sesiones y de las tasas de clics
Al combinar el alcance y la potencia de la Web con la flexibilidad de la tecnología de Soluciones de IA, BILIBILI entregó con éxito una app web potente y atractiva experiencia a millones de usuarios. Además, en tan solo un mes de la implementación, BILIBILI observó un notable aumento del 30% en la duración de las sesiones y una mejora del 19% en la tasa de clics de las transmisiones de videos en vivo.
(30) %
Mayor duración de la sesión
(19) %
Mayor CTR
Con las soluciones de IA web gratuitas e integradas en el dispositivo de MediaPipe, los desarrolladores de BILIBILI pudieron retener de manera eficiente los elementos visuales cruciales y mantener interesados a los usuarios garantizando un rendimiento fluido y, en última instancia, entregando el video de alta calidad de transmisión que los espectadores esperan del líder de la plataforma.
