Erste Schritte mit der Webreferenz-App

Die Web Reference App ist eine Open-Source-Videokonferenzanwendung, die mit React und der Vonage Video API entwickelt wurde. Sie zeigt, wie man moderne Mehrparteien-Sitzungen im Web implementiert, indem man ein modulares Frontend, ein leichtgewichtiges Backend und konfigurierbare Funktionen verwendet, die sich an verschiedene Meeting-Szenarien anpassen.

Web Landing Page

Was es beinhaltet

Die Web Reference App bietet einen vollständigen Meetingablauf und gemeinsame Konferenzbausteine:

  • A Zielseite wo Benutzer Räume erstellen oder ihnen beitreten können.
  • A Wartezimmer zur Vorschau von Audio- und Videogeräten und zum Festlegen eines Anzeigenamens.
  • A Videoraum unterstützt bis zu 25 Teilnehmer.
  • A Nachgesprächsseite um zur Landing Page zurückzukehren und die verfügbaren Archive anzuzeigen.
  • Selektoren für Eingangs-/Ausgangsgeräte für Kameras, Mikrofone und Lautsprecher.
  • Hintergrund-Effekte einschließlich Unschärfe, voreingestellte Bilder und benutzerdefinierte Uploads (die Browserunterstützung variiert).
  • Rauschunterdrückung Kontrollen.
  • Konfigurierbare Merkmale angetrieben durch eine config.json Datei, die im Verzeichnis public Verzeichnis.
  • Tools für den Bereitschaftsdienst einschließlich Chat, Reaktionen, Bildschirmfreigabe und Archivierung.
  • Aktive Lautsprechererkennung und eine dynamisches Layout die sich an Veränderungen im Netz und bei den Teilnehmern anpasst.

Architektur

Die Web Reference App besteht aus einem Frontend und einem Backend:

  • Frontend (React + Vite):
    Implementiert den Landing Flow, den Warteraum, die Meeting-UI, den Layout-Manager, den Chat, die Reaktionen, die Hintergrundeffekte, das Berichtstool und den Bildschirm nach dem Anruf.

  • Backend (Express):
    Erzeugt die Sitzungs-IDs und Token, die von der Vonage Video API benötigt werden.

  • Tests und Werkzeuge:
    Playwright wird für Integrationstests, einschließlich Screenshot-Vergleichen, verwendet.
    Gängige Arbeitsabläufe wie Linting und Dokumentationserstellung werden über Garnskripte verwaltet.

Hauptmerkmale

Das Erlebnis der Begegnung umfasst:

  • Landeplätze und Warteräume mit vollständiger Einrichtung des Geräts.
  • Bildschirmfreigabeeinschließlich Teilnehmerzoom (wenn die Unterstützung des Medienprozessors verfügbar ist).
  • Gruppen-Chat und Emoji-Reaktionen.
  • Rauschunterdrückung Einstellungen.
  • Hintergrund-Effekte (unscharf und bildbasiert) und unterstützt die Dateitypen JPG, PNG, GIF und BMP.
  • Aktive Lautsprechererkennung.
  • Layout-Manager mit Raster-, Aktivlautsprecher- und Bildschirmfreigabemodus.
  • Dynamische Kachelverwaltung das Bandbreite spart und sich an Änderungen der Teilnehmer anpasst.
  • Teilnehmerliste mit Anzeigen zum Ein- und Ausschalten des Tons.
  • Zusammengesetzte Archivierung für die Aufzeichnung von Sitzungen.
  • Informationstafel zur Sitzung mit einer gemeinsam nutzbaren Raum-URL.
  • Berichtswerkzeug für die Einreichung von Fragen zum Bereitschaftsdienst.

Personalisierung

Die Web Reference App unterstützt die Konfiguration von Funktionen und Benutzeroberflächen ohne Änderung des Quellcodes.

Konfiguration der Merkmale

Merkmalskennzeichen sind definiert in config.json.
Eine Beispielkonfigurationsdatei wird bereitgestellt (config.example.json).
Mit dieser Datei können Sie die Einstellungen anpassen:

  • Standard-Layout,
  • Audio-on-join-Verhalten,
  • Verfügbarkeit von Hintergrundeffekten,
  • rollenbasierte Meeting-Funktionen.

Thema und UI-Anpassung

Die UI-Anpassung erfolgt über Werte in config.json und durch editierbare Frontend-Komponenten.

Eine vollständige Liste der unterstützten Felder finden Sie in der README des Repositorys.

Web Main Room

Nächste Schritte

Um die Web Reference App zu installieren, zu konfigurieren und auszuführen, folgen Sie den Anweisungen im README des Repositorys: