Video multipartito con la API de Video de Vonage
La Video API de Vonage te permite crear casi cualquier experiencia de video que desees. Un caso de uso común que tienen los desarrolladores es el de varios usuarios en una sola sala, como una reunión con un equipo. En muchos casos, estas sesiones de video necesitarán ser grabadas. Hacer ambas cosas es fácil con la Video API de Vonage.
En este tutorial
La Video API de Vonage te permite armar rápidamente una sala y colocar a los participantes dentro de ella. Repasaremos cómo poner en marcha una demostración con nuestras demostraciones existentes para que no tengas que escribir ningún código, pero también explicaremos qué hace el código en segundo plano.
- Ver la demostración - Echa un vistazo a la demo sin escribir código
- Cómo funciona la demostración - El lado del cliente - Qué hace el código del lado del cliente
- Cómo funciona la demostración - El lado del servidor - Qué hace el código del lado del servidor
Requisitos previos
Para completar el tutorial, necesitas:
- A Account de Vonage - para su clave y secreto API
Ver la demostración
Si quieres echar un vistazo a la demo antes de escribir ningún código, tenemos un servidor web de muestra y código JavaScript para probar cómo es una videollamada básica. Todo el código es de código abierto y está disponible públicamente, así que puedes probar la demo y luego usar el código para hacer tus propias modificaciones.
Iniciar el servidor Node.js
El vídeo de demostración requiere un servidor backend para manejar cosas como la creación de tokens de cliente para la autorización y la gestión general de la sesión. Mientras que usted puede construir esto en cualquier idioma que desee, tenemos un servidor pre-construido que puede utilizar para empezar en el Servidor de aprendizaje por vídeo de Vonage (Node.js) en Code Hub. Desde el Documentación para desarrolladores, haz clic en "Code Hub" en la barra de navegación superior y, a continuación, desplázate hacia abajo y busca la tarjeta de "Vonage Video Learning Server (Node.js)". Haz clic en ella para abrirla.
Obtendrás una descripción de lo que hace este proyecto. Por ahora, hagamos clic en "Obtener código" para que podamos cargarlo en el editor en línea Code Hub. Haz click en "Crear un nuevo entorno de desarrollo". Nombra el espacio de trabajo "Vonage Video Demo" ya que podemos usar este backend para múltiples demos. Esta demostración requiere que se le asigne un número, ya que el servidor de aprendizaje admite llamadas telefónicas a través de SIP. Aunque no lo utilizaremos en esta demostración, haz clic en "Asignar un número" para asignar un número existente de Vonage o compra uno nuevo para utilizarlo en demostraciones posteriores.
Code Hub creará una aplicación automáticamente para ti, incluyendo la configuración de las claves públicas y privadas que utilizará nuestra aplicación. Una vez creado el espacio de trabajo, entrarás en el editor de código, que es una versión en línea de Visual Studio Code. Siéntase libre de seguir a lo largo de las partes posteriores de esta demostración para ver el código, y puede editar este código según sea necesario para sus propios proyectos.
Para ejecutar la aplicación, haz clic en "Ver" en la parte superior del editor, y luego en "Terminal". Esto abrirá una línea de comandos en la que podemos ejecutar comandos. Todo lo que tenemos que hacer es escribir vcr deploy y se implementará el código. Esto tomará unos momentos, ya que empaqueta el código y lo ejecuta en los servidores de Vonage Code Hub. Deberemos tomar nota de la "dirección de host de instancia" que se muestra cerca del final.
Si todo funciona correctamente, debería poder visitar la "dirección del host de instancia" y aparecerá la siguiente página:
Probar el Front End
El servidor backend funciona directamente con todas nuestras demos preconstruidas, incluida esta demo individual. Vaya a https://github.com/Vonage-Community/video-api-web-samples/tree/main/Archivingque es el código fuente de la parte de front-end de esta demo. Esta muestra permite a múltiples usuarios con la URL unirse a un chat de voz, y crear grabaciones de la sesión llamadas Archivos.
La forma más sencilla de ejecutar esta demo es hacer clic en el botón "Abrir en Stackblitz" del README.
Esto abrirá el proyecto en Stackblitz. Al igual que con el servidor backend, puede navegar por el código y modificarlo aquí si lo desea. Para este demo, todo lo que necesitamos hacer es abrir el proyecto js/config.js e introduzca la URL de la instancia de Code Hub en el archivo SAMPLE_SERVER_BASE_URL variable:
Una vez guardado el archivo, puede actualizar la vista de demostración en la parte derecha de Stackblitz y su navegador debería pedirle que permita su micrófono y cámara. Una vez que lo permitas, tu imagen debería aparecer en la esquina inferior de la barra lateral. Si copias la URL de Stackblitz encima del panel de demostración y lo visitas en tu dispositivo móvil, otro ordenador, o se lo das a un amigo, ¡cualquiera que se una debería estar conectado a tu demostración!
Cómo funciona la demostración
Configurar una aplicación de Vonage
Para que nuestra aplicación de video funcione, necesitamos que nuestro cliente y servidor se comuniquen con los servidores de Vonage. Code Hub configura esto por nosotros, pero si estás ejecutando el código localmente o quieres saber qué implica una aplicación de video, se configura como cualquier otra API. Necesitamos configurar una aplicación de Vonage para alojar toda la configuración de nuestra aplicación, además de ayudarnos a generar los elementos necesarios para realizar la autenticación.
Diríjase a su Panel de control del cliente de Vonage e inicie sesión. Una vez iniciada la sesión:
- Haz clic en "Applications" en "Build".
- Haga clic en "Crear una nueva aplicación".
- Dale un nombre a la aplicación, como "Demostración de vídeo básica".
- Haga clic en "Generar clave pública y privada", lo que le hará descargar un archivo llamado
private.key. Guarde este archivo para más tarde. - Desplácese hacia abajo y active "Vídeo". Dejaremos estos valores vacíos por ahora.
- Haga clic en "Generar nueva aplicación" para crear la aplicación.
Una vez creada la aplicación, anote el ID de la aplicación. Si está ejecutando el código localmente, lo necesitaremos para configurar el backend. Si está utilizando Code Hub, el código del servidor ya tiene acceso al ID de la Aplicación y a la Clave Privada.
El lado del cliente
La parte cliente de la demostración consta de dos partes diferentes: algunos elementos HTML para colocar las fuentes de vídeo y, a continuación, JavaScript para obtener la información de inicio de sesión y comunicarse con los servidores de Vonage Video.
Dado que se trata de una demostración para navegador, utilizamos el SDK de JavaScript que se encuentra en https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jse incluirlo en una etiqueta script en nuestro HTML en index.html.
Para añadir gente a una sala, sólo necesitamos dos elementos: algún sitio donde poner al usuario actual, por ejemplo, Tú, al que llamaremos "publicador". Luego necesitamos algún lugar para poner a cualquier otra persona que se una, a la que "suscribirás". Los pondremos en un elemento "suscriptor".
Crearemos dos div y asignar a uno de ellos un ID de publisher y el otro un ID de subscriber. Haremos referencia a estos elementos en el JavaScript cuando se visite la página, y para cuando detectemos que otro usuario ha entrado en la videollamada.
También creamos dos botones para iniciar y detener los archivos, así como un marcador de posición para rellenar con la URL del archivo una vez que se haya terminado de generar.
Vídeo de manipulación
Por el lado de JavaScript, primero obtendremos información sobre la propia videollamada. Para conectarnos a la videollamada, necesitamos un ID de aplicación, un ID de sesión y un token.
- En ID de aplicación es un identificador que el SDK del cliente utiliza para hacer referencia a diferentes configuraciones para nuestra aplicación de video del lado de Vonage.
- En ID de sesión es una sesión de vídeo específica a la que queremos conectarnos, ya que una única Applications puede tener varias sesiones de vídeo concurrentes a la vez.
- En Ficha es un token de autenticación JWT que le permite unirse a una sesión específica con derechos específicos.
Aunque puede generar el identificador de sesión y el token con antelación, en el mundo real los generará bajo demanda. Nuestro código representa cómo lo harías. Vamos a mostrar cómo se crea la información en un poco, pero vamos a tomar esa información desde el servidor backend que desplegamos.
Una vez que tengamos toda la información de conexión, podemos seguir adelante y llamar al SDK JavaScript de Vonage Video, que se encarga de todo el trabajo para conectarnos a la Video API de Vonage en el front end. Primero, tomamos un objeto de sesión con OT.initSession(). A continuación, empezamos a escuchar en el streamCreated evento con session.on(). Esto nos permite establecer una llamada de retorno para que se ejecute cuando se cree un flujo desde otro editor. En este caso, utilizamos session.subscribe() para conectarse al evento entrante, y empujarlo en el subscriber div que configuramos en el HTML. También escuchamos el sessionDisconnected para saber cuando el otro usuario se desconecta, pero todo lo que hacemos para esta demostración es sólo registrar que nos dimos cuenta de que se fueron.
A continuación, creamos el publisher objeto con OT.initPublisher(). Le decimos a qué div debe adjuntarse (publisher), y algunas opciones básicas de formato. Esto conecta su cámara y micrófono a la Video API.
A continuación, llamamos session.connect() para conectarse a la sesión, utilizando el token JWT de conexión que obtuvimos del servidor. ¡Eso es todo lo que se necesita para que dos personas se unan a una sala!
Manipulación de archivos
La gestión real de los archivos se maneja en el lado del servidor de la aplicación, pero necesitamos una manera de decirle al sistema que inicie y detenga los archivos. Vamos a tomar los botones que hemos añadido a la HTML, así como el <span> para volcar una URL más tarde. Ya que estamos, también ocultaremos el botón "Detener", ya que no necesitamos mostrarlo hasta que iniciemos un archivo.
Lanzaremos algunas peticiones HTTP a nuestro servidor backend para iniciar y detener el archivado. Adjuntaremos una función a los eventos de clic de nuestros botones de inicio y detención. La aplicación del servidor tendrá código para comunicarse con la API de Video de Vonage para manipular los archivos.
Lo último que tenemos que hacer es escuchar los eventos JavaScript relacionados con el archivado. Se trata de un archiveStarted y un archiveStopped evento. Esto le permite al SDK saber que estas operaciones se están realizando, y podemos ajustar nuestra interfaz de usuario en función de lo que está sucediendo. Es mejor manejar esto con el SDK en lugar de las funciones de escucha de eventos que creamos anteriormente, ya que sabemos inmediatamente cuándo la propia Video API de Vonage ha realizado las acciones.
Cuando se inicia el archivo, ocultamos el botón "Iniciar" y mostramos el botón "Detener". Cuando el archivo se detiene, ocultamos el botón "Detener" y rellenamos nuestro <span> con la URL para ver el archivo. Esta URL es parte del servidor backend que desplegamos anteriormente, y no es la URL donde se almacena el archivo en sí. Para ello, tendrás que ver los eventos del lado del servidor.
El lado del servidor
La parte del lado del servidor de cualquier aplicación de Vonage Video se utiliza para manejar la creación de sesiones, la generación de tokens de autenticación y tareas administrativas como iniciar y detener archivos. Para esta demostración, todo lo que nos preocupa es crear sesiones y tokens para que los usuarios puedan unirse a la sala. Si bien la API en sí es una API REST y se la puede llamar como se desee, te recomendamos que utilices la función SDK de Vonage Node que maneja toda la autenticación y las llamadas HTTP por ti. Puede instalarlo en su propia aplicación con:
El código de demostración ya lo tiene preinstalado. Si está ejecutando el código localmente, tendrá que ejecutar:
para descargar todas las dependencias y, a continuación, copie .envcopy a un nuevo archivo llamado .env. Deberá rellenar la información solicitada en .env como el ID de la aplicación, la ubicación de la clave privada en el disco y tu clave y secreto de API de Vonage.
Creación de la sesión e incorporación a la misma
Lo primero que hacemos es buscar si ya tenemos una sesión para la sala que estamos generando. Mantenemos un diccionario en memoria en roomToSessionIdDictionaryy si la sala ya tiene una sesión, simplemente extraemos la sesión del diccionario. Luego usamos el Vonage Video Node SDK para crear un token de cliente llamando a vonage.video.generateClientToken()pasándole el ID de sesión y un objeto con alguna configuración. Por el momento todo lo que hacemos es configurar el usuario a un moderator para esta sencilla demostración. A continuación, devolvemos el ID de aplicación, el ID de sesión y el token configurados al front-end.
Si la sesión no existe, creamos una nueva con vonage.video.createSession(). Esto contacta a la API de Vonage y crea una sesión a la que los usuarios pueden conectarse. No tenemos ninguna configuración específica para esta sesión, pero aquí sería donde configuraríamos cosas como reglas de archivo y cómo se debe manejar la sesión, como enrutamiento o peer-to-peer. Entonces como antes creamos un token, y enviamos toda esa información de vuelta al navegador.
Manipulación de archivos
Al igual que con la mayoría de las funciones administrativas y de gestión de la Video API de Vonage, la gestión de archivos se maneja a través de la API REST y nuestros SDK de servidor. Tomamos las solicitudes del lado del cliente para iniciar y detener un archivo, las asignamos a una ruta en nuestro servidor backend y llamamos a vonage.video.startArchive() para iniciar un archivo, y vonage.video.stopArchive() para detener un archivo en ejecución.
Cuando iniciemos un archivo, devolveremos al cliente la información de archivo que se genere. De esta forma sabrá qué archivo detener más tarde. Cuando detenemos el archivo, devolvemos también su estado por si el cliente necesita actualizar algo.
Estas llamadas generarán en última instancia el archiveStarted y archiveStopped Eventos SDK que escuchamos.
Para ver el archivo, tenemos que asegurarnos de que el propio archivo está disponible. Cuando el usuario hace clic en el enlace en el front-end para ver el archivo, se filtra a través de una ruta en el servidor back-end que puede comprobar que el archivo está realmente listo. Si el estado es availableredirigimos a la URL de almacenamiento real del vídeo. A continuación, dejamos que el navegador muestre de forma nativa el vídeo archivado, ya que la mayoría de los principales navegadores admiten el formato MP4.
Conclusión
En este tutorial, viste lo que entra en el servidor backend para una sesión de video multipartita, cómo crear un cliente web para que los usuarios se unan a una sesión y se vean y escuchen entre sí, cómo grabar una sesión de video y verla, así como un vistazo a lo fácil que es usar Vonage Code Hub y Stack Blitz para probar rápidamente muestras.