Vonage Video Express

Abschreibungshinweis

Vonage Video Express ist jetzt veraltet. Während die Bibliothek für bestehende Integrationen weiterhin verfügbar ist, empfehlen wir allen neuen Projekten und Kunden, die migrieren möchten, die Verwendung der Video API-Referenzanwendung.

Warum die Veränderung?

Die Video API-Referenzanwendung bietet eine robuste, moderne und anpassbare Grundlage für die Entwicklung von Multiparty Video Applications. Es bietet:

  • Bewährte Praktiken: Aktuelle Implementierung der Core Video SDKs.
  • Produktionsreife UI: Hochgradig anpassbare Komponenten für Web, iOS und Android.
  • Erweiterte Funktionen: Bessere Unterstützung für komplexe Layouts und moderne Browserfunktionen.

Nächste Schritte:

Erste Schritte

Vonage Video Express ist eine JavaScript-Bibliothek zur schnellen Erstellung einer Webanwendung für Videokonferenzen mit mehreren Teilnehmern. Videokonferenz-Webanwendung zu erstellen. Sie setzt auf der Vonage Video API für JavaScript auf.

Wichtige Hinweise:

Bevor Sie Video Express nutzen, müssen Sie das Video Express-Add-on für Ihren Account aktivieren.

  1. Gehen Sie zu Ihrem Video API Account und klicken Sie Account-Einstellungen im Menü auf der linken Seite.
  2. In der Liste der Account-Erweiterungenfinden Video-Express und klicken Sie Zum Account hinzufügen. Befolgen Sie anschließend die weiteren Anweisungen, um das Add-on zu aktivieren.

Vonage Video Express 1.0 unterstützt derzeit 25 Teilnehmer gleichzeitig in einem Raum. Wenn Sie mehr als 25 Personen zu einer Sitzung hinzufügen, müssen Sie sicherstellen, dass die Netzwerk- und Hardware-Leistung der Teilnehmer ausreichend ist.

Ein schneller Start

  1. Installieren Sie das Video Express-Paket:
  • Einbau über die npm Paket

    npm i --save @vonage/video-express
  • Wir können auch ein Skript-Tag in der <head> Abschnitt der HTML-Seite, um Vonage Video Express in unsere Anwendung

    <script src="https://static.opentok.com/v1/js/video-express.js"></script>
    
  1. Derzeit enthält Vonage Video Express keine Standard-Benutzeroberfläche. Sie müssen also CSS hinzufügen hinzufügen, um die Raumkomponenten in Ihrer Anwendung zu gestalten:

Für einen schnellen Start kopieren Sie die video-express-styles.css Datei und fügen Sie sie in Ihre head Abschnitt:

<link rel="stylesheet" href="/path/to/video-express-styles.css" media="screen" charset="utf-8">
  1. Hinzufügen einer div Element innerhalb der body Abschnitt. Dies wird der Raumcontainer. Das SDK wird alle seine DOM-Komponenten innerhalb dieses Containers anhängen:
<body>
  <div id="roomContainer"></div>
</body>
  1. Verwenden Sie dieses Codeschnipsel, um einen Raum schaffen und an beitreten die Videokonferenz. Um das Raumobjekt zu erstellen, müssen Sie Ihren OpenTok-API-Schlüssel, eine OpenTok- Sitzungs-ID und ein Token für die Sitzung angeben:
<script type="text/javascript">
  const room = new VideoExpress.Room({
    apiKey: '', // add your OpenTok API key
    sessionId: '', // add your OpenTok Session ID
    token: '', // add your OpenTok token
    roomContainer: 'roomContainer',
  });

  room.join();
</script>

Lesen Sie die OpenTok-Entwicklerhandbücher unter Erstellung von Sitzungen und Token-Erstellung.

Weitere Ressourcen

Siehe die Video Express API-Referenz und Entwicklerhandbuch.

Und sehen Sie sich diese Beispiel-Apps auf GitHub an:

  • Video-Express-React-App — Eine Videokonferenz-App für mehrere Teilnehmer, die mit Video Express und Create React App erstellt wurde. Zusätzlich zu den von Video Express bereitgestellten Funktionen bietet die App die Auswahl von Räumen und Teilnehmernamen, Archivierung (Aufzeichnung) und vieles mehr.

  • Vonage Video Express iOS und Android Demo — eine App, die Video Express in Web-Views (wie z. B. WKWebView unter iOS und WebView unter Android) für mobile Apps nutzt.