Démarrer avec l'application de référence Web

L'application de référence Web est une application de vidéoconférence open-source construite avec React et l'API Video de Vonage. Elle montre comment mettre en œuvre une session moderne et multipartite sur le web en utilisant un frontend modulaire, un backend léger et des fonctionnalités configurables qui s'adaptent à différents scénarios de réunion.

Ce qu'il comprend

L'application de référence Web fournit un flux complet de réunions et des éléments de base pour les conférences :

A page d'atterrissage où les utilisateurs peuvent créer ou rejoindre des espaces.
A salle d'attente pour prévisualiser les appareils audio et vidéo et définir un nom d'affichage.
A salle vidéo supportant jusqu'à 25 participants.
A page d'après-appel pour revenir à la page d'accueil et consulter les archives disponibles.
Sélecteurs de dispositifs d'entrée/sortie pour les caméras, les microphones et les haut-parleurs.
Effets de fond y compris le flou, les images prédéfinies et les téléchargements personnalisés (la prise en charge par les navigateurs varie).
Suppression du bruit des contrôles.
Caractéristiques configurables par l'intermédiaire d'un config.json placé dans le fichier public répertoire.
Outils de garde y compris le chat, les réactions, le partage d'écran et l'archivage.
Détection active du haut-parleur et un la mise en page dynamique qui s'adapte aux changements du réseau et des participants.
Panneau « Paramètres avancés »: Configurez les paramètres vidéo et audio de l'éditeur afin d'optimiser la qualité et les performances du flux. Ajustez des paramètres tels que la résolution, le débit binaire, la fréquence d'images, le codec audio et les niveaux audio afin de répondre aux exigences de diffusion. Utilisez le panneau de surveillance en temps réel pour surveiller l'état de la diffusion. Cette fonctionnalité offre une visibilité immédiate sur les performances de la diffusion, ce qui permet d'identifier rapidement les problèmes et de garantir une expérience de diffusion stable et de haute qualité, tant pour les diffuseurs que pour les spectateurs.

Architecture

L'application de référence Web se compose d'un frontend et d'un backend :

Frontend (React + Vite) :
Implémente le flux d'accueil, la salle d'attente, l'interface utilisateur des réunions, le gestionnaire de mise en page, le chat, les réactions, les effets d'arrière-plan, les paramètres avancés, l'outil de reporting et l'écran post-appel.
Backend (Express) :
Génère les identifiants de session et les jetons requis par l'API Video de Vonage.
Essais et outillage :
Playwright est utilisé pour les tests d'intégration, y compris les comparaisons de captures d'écran.
Les flux de travail courants, tels que le linting et la génération de documentation, sont gérés par des scripts Yarn.

Principales caractéristiques

L'expérience de la réunion comprend :

Salles d'attente et d'embarquement avec une configuration complète de l'appareil.
Partage d'écrany compris le zoom sur l'abonné (lorsque le processeur de média est disponible).
Chat de groupe et réactions des emoji.
Suppression du bruit des paramètres.
Effets de fond (flou et image), prenant en charge les types de fichiers JPG, PNG, GIF et BMP.
Détection active du haut-parleur.
Responsable de la mise en page avec les modes grille, haut-parleur actif et partage d'écran.
Gestion dynamique des tuiles qui préserve la bande passante et s'adapte aux changements de participants.
Liste des participants avec des indicateurs d'activation et de désactivation de l'audio.
Archivage composé pour l'enregistrement des réunions.
Panneau d'information sur les réunions avec une URL de salle partageable.
Outil de reporting pour soumettre les questions relatives à l'appel.
Paramètres avancés pour configurer la vidéo et l'audio, et vérifier la capacité de surveillance.

Personnalisation

L'application de référence Web permet de configurer les fonctionnalités et l'interface utilisateur sans modifier le code source.

Configuration des fonctionnalités

Les indicateurs de fonctionnalité sont définis sous forme de variables d'environnement dans un script shell vcrBuild.env.sh, intégrées lors de la compilation. Vous pouvez personnaliser :

mise en page et résolution par défaut
Comportement de l'audio et de la vidéo lors de la connexion
langues et paramètres régionaux pris en charge
disponibilité des fonctionnalités pendant les appels (archivage, sous-titres, chat, partage d'écran, emojis)
paramètres avancés (débit binaire, fréquence d'images, réduction du bruit, priorité des codecs)
Sélection de l'appareil et commandes du microphone et de la caméra
durée de la notification

Personnalisation du thème et de l'interface utilisateur

Pour personnaliser le thème visuel de l'application, modifiez designTokens.json et courir :

yarn sync:theme-tokens

Cela permet de synchroniser vos jetons de conception avec le système de thèmes de l'application.

Prochaines étapes

Pour installer, configurer et exécuter l'application de référence Web, suivez les instructions du README du référentiel :