Introducción a la aplicación de referencia web

La Web Reference App es una aplicación de videoconferencia de código abierto creada con React y la API de Video de Vonage. Demuestra cómo implementar una sesión moderna y multipartita en la web mediante un frontend modular, un backend ligero y funciones configurables que se adaptan a diferentes escenarios de reunión.

Qué incluye

La aplicación de referencia web proporciona un flujo de reuniones completo y bloques de construcción de conferencias comunes:

A página de destino donde los usuarios pueden crear salas o unirse a ellas.
A sala de espera para previsualizar los dispositivos de audio y vídeo y configurar un nombre de visualización.
A sala de vídeo que admite hasta 25 participantes.
A página posterior a la llamada para volver a la página de inicio y consultar los archivos disponibles.
Selectores de dispositivos de entrada/salida para cámaras, micrófonos y altavoces.
Efectos de fondo incluidas las imágenes desenfocadas, las imágenes predefinidas y las subidas personalizadas (la compatibilidad con los navegadores varía).
Supresión del ruido controles.
Funciones configurables impulsado por un config.json archivo ubicado en el public directorio.
Herramientas para llamadas en curso incluyendo chat, reacciones, pantalla compartida y archivo.
Detección de altavoces activos y un diseño dinámico que se adapta a los cambios de la red y de los participantes.
Panel de configuración avanzada: Configura los ajustes de vídeo y audio del emisor para optimizar la calidad y el rendimiento de la transmisión. Ajusta parámetros como la resolución, la tasa de bits, la frecuencia de fotogramas, el códec de audio y los niveles de audio para que se adapten a los requisitos de la transmisión. Utiliza el panel de observabilidad en tiempo real para supervisar el estado de la transmisión. Esta función ofrece una visibilidad inmediata del rendimiento de la transmisión, lo que ayuda a identificar problemas rápidamente y a mantener una experiencia de transmisión estable y de alta calidad tanto para los emisores como para los espectadores.

Arquitectura

La aplicación Web Reference consta de una parte front-end y una parte back-end:

Frontend (React + Vite):
Implementa el flujo de bienvenida, la sala de espera, la interfaz de usuario de las reuniones, el gestor de maquetación, el chat, las reacciones, los efectos de fondo, la configuración avanzada, la herramienta de informes y la pantalla posterior a la llamada.
Backend (Express):
Genera los ID de sesión y los tokens requeridos por la API de Video de Vonage.
Pruebas y herramientas:
Playwright se utiliza para las pruebas de integración, incluidas las comparaciones de capturas de pantalla.
Los flujos de trabajo habituales, como la comprobación de código y la generación de documentación, se gestionan mediante scripts de Yarn.

Características principales

La experiencia de la reunión incluye:

Aterrizaje y salas de espera con la configuración completa del dispositivo.
Compartir pantalla, incluido el zoom del abonado (cuando el procesador multimedia lo admita).
Chat en grupo y reacciones emoji.
Supresión del ruido ajustes.
Efectos de fondo (desenfoque e imagen), compatible con los tipos de archivo JPG, PNG, GIF y BMP.
Detección de altavoces activos.
Responsable de diseño con modos de cuadrícula, altavoz activo y pantalla compartida.
Gestión dinámica de mosaicos que conserva el ancho de banda y se ajusta a los cambios de los participantes.
Lista de participantes con indicadores de audio activado/desactivado.
Archivo compuesto para grabar las reuniones.
Panel informativo sobre la reunión con una URL de la habitación que se puede compartir.
Herramienta de generación de informes para presentar asuntos de guardia.
Configuración avanzada para configurar el vídeo y el audio, y comprobar la observabilidad.

Personalización

La aplicación de referencia web permite configurar las funciones y la interfaz de usuario sin modificar el código fuente.

Configuración de funciones

Los indicadores de función se definen como variables de entorno en un script de shell vcrBuild.env.sh, integrado en el momento de la compilación. Puedes personalizar:

diseño y resolución predeterminados
Comportamiento del audio y el vídeo al incorporarse a la llamada
idiomas y configuraciones regionales compatibles
disponibilidad de funciones durante la llamada (archivo, subtítulos, chat, pantalla compartida, emojis)
ajustes avanzados (velocidad de bits, frecuencia de fotogramas, supresión de ruido, prioridad de códecs)
Selección de dispositivos y controles del micrófono y la cámara
duración de la notificación

Personalización del tema y de la interfaz de usuario

Para personalizar el tema visual de la aplicación, edita designTokens.json y corre:

yarn sync:theme-tokens

Esto sincroniza tus tokens de diseño con el sistema de temas de la aplicación.

Próximos pasos

Para instalar, configurar y ejecutar la aplicación de referencia web, siga las instrucciones del archivo README del repositorio: