Archivado de Video con la API de Video de Vonage y React

Introducción

Grabar Video no siempre es tan sencillo como pulsar un botón de grabar diferentes proyectos necesitan diferentes resultados. En este proyecto destacado, el ingeniero de soluciones de Vonage Misha Behei analiza una aplicación de demostración que maneja las cuatro formas principales de archivar sesiones de video.

TL;DR Consulte el repo.

Múltiples modos de grabación, implementación simplificada

La Video API de Vonage ofrece múltiples maneras de grabar una sesión de video, como el archivo de sólo audio, el archivo compuesto y el archivo de transmisión individual. muestra las diversas maneras de archivar a la vez que muestra el Compositor de experiencias.

Requisitos previos

Antes de empezar, asegúrate de que tienes:

• Node.js instalado

• Una cuenta de Video API de Vonage

• Conocimientos básicos de React y TypeScript

• Git instalado localmente

Para el frontend de la aplicación, utiliza lo siguiente:

• React UI (marco de interfaz de usuario) escrito con TypeScript

• Vite (herramienta de compilación y servidor de desarrollo)

• Material UI (Biblioteca de componentes de interfaz de usuario)

• SDK JavaScript de la API de Video de Vonage

Para el backend, utilizó Node.js con Express, escrito en TypeScript (servidor).

Cómo funciona

Esta aplicación utiliza la Video API de Vonage para demostrar diferentes maneras de grabar sesiones de video. En términos simples, permite a los usuarios elegir si desean realizar alguna de las siguientes acciones:

• Graba sólo el audio

• Combine a todos los participantes en un solo Video

• Mantenga separado el Video de cada participante

• Cree una grabación de marca personalizada con elementos interactivos.

Los modos de archivo

Esta aplicación web de una sola página muestra tres modos de archivo distintos junto con la funcionalidad de Experience Composer.

Archivo sólo audio

Audio-Only Archive captura el flujo de audio sin composición de vídeo. Cuando un usuario hace clic en Iniciar un archivo de sólo audiola aplicación inicializa un único editor de Video. A pesar de que se publica el Video, sólo se graba el audio debido a la configuración del archivo de sólo audio.

Archivo compuesto

El Archivo Compuesto graba un único archivo de vídeo que contiene a todos los participantes en una vista unificada. Cuando un usuario hace clic en Iniciar archivo compuesto la aplicación inicializa un editor de vídeo y solicita permisos para compartir la pantalla. La grabación resultante combina el metraje de la webcam y el de la captura de pantalla en un único archivo.

Archivo individual

El Archivo Individual separa los flujos de vídeo de cada participante. Haciendo clic en Iniciar archivo individual inicializa dos editores de video: uno con el desenfoque de fondo habilitado y otro sin él. De manera predeterminada, la nube de la Video API de Vonage entrega las descargas como un único archivo ZIP que contiene todas las grabaciones. Este proyecto incluye un procesamiento adicional que extrae automáticamente el archivo ZIP y permite a los usuarios reproducir archivos de video individuales por separado.

Compositor de experiencias

Compositor de experiencias genera vídeos renderizados personalizados con elementos interactivos y branding. Experience Composer requiere una URL pública para acceder y grabar. Para este proyecto, he creado y desplegado una aplicación complementaria, un sencillo juego de fútbol que asigna aleatoriamente los goles al equipo local o al visitante. Cuando un usuario hace clic en Iniciar Experience Composer, Experience Composer accede a la URL del partido y lo graba mientras la aplicación inicia simultáneamente un editor de vídeo. Aunque el Experience Composer no es técnicamente una función de archivo, crea un nuevo flujo que se publica en la sesión y es grabado por la función de archivo junto con el editor de vídeo.

En la parte inferior de la página, encontrarás una lista de archivos recientes que muestra el estado del archivo (disponible/expirado/detenido), el nombre del archivo (que incluye un dato aleatorio interesante) y el ID del archivo con un enlace al inspector de archivos de Vonage. También puedes reproducir o descargar grabaciones directamente desde esta lista.

Ten en cuenta que los archivos de la Video API de Vonage sólo están disponibles durante 72 horas a menos que se configure un cubo de almacenamiento S3. Después de este período, el estado del archivo pasa de disponible a caducadopor lo que la grabación deja de estar accesible.

Ejecución del proyecto

Si quieres probarlo tú mismo, clona el repositorio repo.

Necesitará dos .env archivos

Cree el .env en el directorio backend/ y añada los siguientes valores:

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

Cree el .env en el directorio frontend/ y añada el valor VITE_OPENTOK_API_KEY valor.

Instale las dependencias tanto para el frontend como para el backend ejecutando:

npm install

Para ejecutar la demo de forma autónoma desde la línea de comandos, ejecute:

npm run dev

El servidor backend se iniciará en localhost:3345, y el frontend se ejecutará en localhost:5173.

Conclusión

¡Y eso es todo! Este proyecto demuestra las capacidades de archivo de la Video API de Vonage, mostrando cómo los desarrolladores pueden adaptar las soluciones de grabación a sus necesidades específicas, ya sea capturando sesiones de sólo audio, creando grabaciones unificadas o separando transmisiones individuales. La integración con Experience Composer muestra cómo añadir marcas personalizadas y elementos interactivos a las grabaciones. Pruebe usted mismo la demostración para comprender mejor cómo pueden incluirse estas funciones en sus propios proyectos.