){kind=small}
Crea un Twitch personal con la Video API y los componentes web de Vonage
Tiempo de lectura: 5 minutos
El post ha sido actualizado para incluir la versión de marzo de 2022 de la Video API de Vonage con un aumento de participantes interactivos simultáneos en vivo, transmisiones HLS de baja latencia y el nuevo Vonage Experience Composer.
Para empezar, definamos algunas cosas y establezcamos expectativas. Twitch es una plataforma gigantesca que permite a la gente retransmitir e interactuar con los espectadores. En Wikipedia: "En febrero de 2020, tenía 3 millones de retransmisores mensuales y 15 millones de usuarios activos diarios, con 1,4 millones de usuarios concurrentes de media".
Construir algo de esa envergadura requiere mucho más de lo que se puede aprender en una sola entrada de blog. En su lugar, el alcance de este artículo se orientará hacia la creación de una especie de "Twitch personal". Menos conciertos en estadios de estrellas del pop y más artistas locales/independientes en una cafetería. Un lugar donde la persona que retransmite pueda leer los mensajes de la sala de chat.
En esencia, la aplicación final permitirá a un presentador retransmitir junto con sus invitados a una audiencia e interactuar con ellos a través de un chat de texto. Además, es una oportunidad para mostrar cómo se pueden integrar Web Components en una aplicación existente para añadir funcionalidades adicionales.
La aplicación existente antes mencionada es la aplicación de muestra de transmisión creada para mostrar las capacidades de transmisión de la Video API de Vonage. Para agregar un chat de texto, el Componentes web de interfaz de usuario de Client SDK se utilizarán.
La Video API de Vonage ofrece dos maneras de compartir sesiones de video con las audiencias.
Retransmisiones de Video interactivas en directo - En esta opción, los presentadores (anfitrión e invitado) y los espectadores están conectados a la sesión de vídeo. Los presentadores publican y se suscriben a los flujos de audio y vídeo de los demás, mientras que los espectadores sólo se suscriben a los flujos individuales de los presentadores. (Nota: Se puede permitir a los espectadores publicar sus streams puesto que ya están conectados a la sesión). Como todo el mundo está suscrito al flujo de los demás, la latencia es menor, pero hay un límite máximo para el número de participantes basado en el número de flujos de publicación. Ese límite es de 15.000 participantes interactivos simultáneos en directo. En la documentación hay una tabla muy útil para determinar el número de espectadores posibles.
Retransmisiones en directo - Los presentadores siguen publicando y suscribiéndose a las retransmisiones de los demás, pero hay una única retransmisión combinada que consumen los espectadores. La fusión de los flujos añadirá algo de latencia para el espectador. Se pueden emitir tanto flujos HLS como RTMP. La última versión introduce una opción de emisión HLS de baja latencia que reduce en gran medida la latencia a unos 4 a 6 segundos. Esta opción se acerca más a la forma en que Twitch, YouTube, Facebook y otros manejan las transmisiones en directo. También está la nueva opción HLS DVR que permite a los espectadores pausar y reanudar las emisiones en directo.
La muestra de transmisión de la Video API de Vonage puede hacer ambas cosas, pero aquí nos concentraremos en la opción de transmisión en vivo para nuestra aplicación personal de Twitch.
¿Qué es una retransmisión en directo de Twitch sin un chat? Para añadir esa funcionalidad, el Client SDK UI Web Components se utilizarán. Más concretamente, los componentes vc-messages, vc-text-inputy vc-typing-indicator .
Añadir Web Components a una aplicación existente que no has creado puede implicar tomar algunas consideraciones más que si fuera un proyecto nuevo o uno que estás construyendo actualmente. Estas son algunas de las cosas que tuve en cuenta al añadir un chat a la aplicación de ejemplo Broadcast.
¿Hay espacio en la aplicación existente para añadir los componentes web? Dependiendo del diseño, puede que sea necesario reorganizarlo. Resulta útil planificar con antelación cómo se desea que sea el resultado final y, a continuación, sumergirse en el código para ver qué es lo que hay que mover. Por suerte, el diseño de la aplicación de ejemplo de Broadcast no era demasiado complejo. Sólo tuve que hacer la sección de Video un poco más estrecha para crear algo de espacio para la interfaz de chat. Esto implicó principalmente CSS.
Para integrar mejor el chat en la aplicación, puede dar estilo a los Web Components para que coincidan con otros elementos de la interfaz de usuario.
Acabamos de tratar el tema de la integración de los Web Components en la interfaz de usuario de la aplicación, pero ¿qué hay de la integración en la experiencia del usuario? ¿Qué cosas necesitan los Web Components para funcionar y están ya disponibles en la aplicación?
Por ejemplo, el chat requiere un nombre de usuario para que todo el mundo sepa quién ha escrito qué mensaje. No sería una gran experiencia si después de iniciar sesión en una aplicación con un nombre de usuario y contraseña, el usuario tuviera que volver a introducir su nombre de usuario para unirse al chat. El ámbito de la aplicación de ejemplo Broadcast implicaba el inicio de sesión, así que simplemente añadí un campo de entrada para que el usuario añadiera el nombre de usuario que le gustaría utilizar en el chat.
Los componentes web de la interfaz de usuario del Client SDK también necesitan conocer el Id. de conversación para poder enviar y mostrar los mensajes en el chat correcto. La aplicación de ejemplo Broadcast utiliza parámetros en la URL para pasar alguna información sobre el flujo, acabo de añadir otro para el Id de Conversación para que todo el mundo se una al mismo chat.
Una cosa más. ¿Alguna vez has entrado en una página de Twitch donde hay una retransmisión en directo y el vídeo se estaba reproduciendo, pero el volumen estaba silenciado? Bueno, eso es debido a la política de reproducción automática de muchos navegadores. Para estar en consonancia con la política, he silenciado la transmisión de vídeo por defecto y he añadido un botón para desactivarlo y activarlo.
Si desea ver en acción la aplicación creada, puede remezclar el proyecto proyecto Glitch. Ejecutando un script de configuración e introduciendo un par de Claves API y Secretos, tú también puedes tener tu propio Twitch personal.
Mantente atento a una próxima publicación del blog donde incorporaremos el nuevo Vonage Experience Composer. Piensa en él como una forma de capturar la pantalla de toda tu aplicación (transmisiones de video, interfaz de usuario, chat y todo) que luego se puede usar para grabaciones y/o transmisiones.
Como siempre, si tienes alguna pregunta o comentario, no dudes en conectarte con nosotros en nuestro canal Slack de la comunidad.