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.

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'atterrissage, la salle d'attente, l'interface utilisateur de réunion, le gestionnaire de mise en page, le chat, les réactions, les effets d'arrière-plan, l'outil de rapport et l'écran de fin d'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.

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 drapeaux de caractéristiques sont définis dans config.json.
Un exemple de fichier de configuration est fourni (config.example.json).
Ce fichier vous permet de personnaliser :

la mise en page par défaut,
le comportement de l'audio-on-join,
la disponibilité des effets de fond,
des capacités de réunion basées sur les rôles.

Personnalisation du thème et de l'interface utilisateur

La personnalisation de l'interface utilisateur est gérée par des valeurs dans config.json et par le biais de composants frontaux modifiables.

Se référer au README du référentiel pour la liste complète des champs supportés.

Prochaines étapes

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