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.
  • Bereich „Erweiterte Einstellungen“: Konfigurieren Sie die Video- und Audioeinstellungen des Publishers, um die Stream-Qualität und -Leistung zu optimieren. Passen Sie Parameter wie Auflösung, Bitrate, Bildrate, Audio-Codec und Audiopegel an die Streaming-Anforderungen an. Verwenden Sie das Echtzeit-Überwachungsfenster, um den Zustand des Streams zu überwachen. Diese Funktion bietet einen sofortigen Einblick in die Stream-Leistung und hilft dabei, Probleme schnell zu identifizieren und ein stabiles, hochwertiges Streaming-Erlebnis sowohl für Publisher als auch für Zuschauer zu gewährleisten.

Architektur

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

  • Frontend (React + Vite):
    Implementiert den Landing-Flow, den Warteraum, die Benutzeroberfläche für Besprechungen, den Layout-Manager, den Chat, Reaktionen, Hintergrundeffekte, erweiterte Einstellungen, 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.
  • Erweiterte Einstellungen um Video und Audio zu konfigurieren und die Überwachbarkeit zu prüfen.

Personalisierung

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

Konfiguration der Merkmale

Feature-Flags werden in einem Shell-Skript als Umgebungsvariablen definiert vcrBuild.env.sh, die bei der Erstellung eingebettet werden. Folgendes können Sie anpassen:

  • Standardlayout und -auflösung
  • Verhalten von Audio und Video beim Beitritt
  • unterstützte Sprachen und Ländereinstellungen
  • Verfügbarkeit von Funktionen während des Anrufs (Archivierung, Untertitel, Chat, Bildschirmfreigabe, Emojis)
  • Erweiterte Einstellungen (Bitrate, Bildfrequenz, Rauschunterdrückung, Codec-Priorität)
  • Geräteauswahl und Mikrofon-/Kamera-Steuerung
  • Benachrichtigungsdauer

Thema und UI-Anpassung

Um das visuelle Design der App anzupassen, bearbeiten Sie designTokens.json und laufen:

yarn sync:theme-tokens

Dadurch werden Ihre Design-Tokens mit dem Designsystem der Anwendung synchronisiert.

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: