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 aterrizaje donde los usuarios pueden crear salas o unirse a ellas.
- A sala de espera para previsualizar dispositivos de audio y vídeo y establecer 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 ver los archivos disponibles.
- Selectores de dispositivos de entrada/salida para cámaras, micrófonos y altavoces.
- Efectos de fondo incluyendo desenfoque, imágenes predefinidas y cargas personalizadas (la compatibilidad con navegadores varía).
- Supresión del ruido controles.
- Funciones configurables impulsado por un
config.jsoncolocado en la carpetapublicdirectorio. - Herramientas de guardia incluyendo chat, reacciones, pantalla compartida y archivo.
- Detección activa de altavoces y un diseño dinámico que se adapta a los cambios de la red y de los participantes.
Arquitectura
La aplicación de referencia web consta de un frontend y un backend:
Frontend (React + Vite):
Implementa el flujo de aterrizaje, la sala de espera, la interfaz de usuario de la reunión, el gestor de diseño, el chat, las reacciones, los efectos de fondo, 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 más habituales, como la generación de documentación y el linting, 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 pantallaincluyendo el zoom de abonado (si se dispone de procesador multimedia).
- 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 activa de altavoces.
- Responsable de diseño con modos de cuadrícula, altavoz activo y pantalla compartida.
- Gestión dinámica de baldosas que conserva el ancho de banda y se ajusta a los cambios de los participantes.
- Lista de participantes con indicadores de activación/desactivación de audio.
- Archivo compuesto para grabar las reuniones.
- Panel informativo de la reunión con una URL de sala compartible.
- Herramienta de información para presentar asuntos de guardia.
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 características se definen en config.json.
Se proporciona un archivo de configuración de ejemplo (config.example.json).
Este archivo le permite personalizar:
- diseño por defecto,
- comportamiento audio-on-join,
- disponibilidad de efectos de fondo,
- funciones de reunión basadas en roles.
Personalización del tema y la interfaz de usuario
La personalización de la interfaz de usuario se gestiona mediante valores en config.json y mediante componentes frontales editables.
Consulte el LÉEME del repositorio para ver la lista completa de campos admitidos.
Próximos pasos
Para instalar, configurar y ejecutar la aplicación de referencia web, siga las instrucciones del archivo README del repositorio: