Eine Collaboration-Anwendung, die mit dem twilio-video.js-SDK und React.js erstellt wurde

Blog

Eine Collaboration-Anwendung, die mit dem twilio-video.js-SDK und React.js erstellt wurde

Eine Collaboration-Anwendung, die mit dem twilio-video.js-SDK und React.js erstellt wurde

Twilio Video React App Diese Anwendung zeigt eine Multi-Party-Videoanwendung, die mit twilio-video.js und Create React App erstellt wurde.

Merkmale

Anforderungen

Node.js-Version NPM-Version
10+ 6+

Browser-Unterstützung

Siehe Browser-Support-Tabelle für twilio-video.js-SDK .

Einstieg

Lauf |_+_| um alle Abhängigkeiten zu installieren.

Der schnellste Weg, um loszulegen, ist die Verwendung der Twilio-CLI:

  1. Installieren und konfigurieren Sie die Twilio CLI .
  2. Lauf |_+_| um das Support-Plugin der App zu installieren.
  3. Lauf |_+_|

Dadurch wird die Anwendung als Twilio-Funktion und geben Sie einen Link zur App an. Weitere Informationen finden Sie in der Dokumentation zum WebRTC Twilio Cli-Plugin .

mein verizon hat passwort vergessen

Der Link und das Passwort verfallen nach einer Woche. Um eine neue Instanz der App bereitzustellen, führen Sie |_+_| aus.

Ausführen des lokalen Tokenservers

Diese Anwendung erfordert ein Zugriffstoken, um eine Verbindung zu einem Raum herzustellen. Das enthaltene lokale Token Server stellt der Anwendung Zugriffstoken zur Verfügung. Führen Sie die folgenden Schritte aus, um den lokalen Tokenserver einzurichten:

  • Erstellen Sie ein Konto im Twilio-Konsole .
  • Klicken Sie auf „Einstellungen“ und notieren Sie sich Ihre Konto-SID.
  • Erstellen Sie einen neuen API-Schlüssel im Abschnitt API-Schlüssel unter Programmierbare Videotools in der Twilio-Konsole. Notieren Sie sich die SID und das Geheimnis des neuen API-Schlüssels.
  • Speichern Sie Ihre Konto-SID, API-Schlüssel-SID und API-Schlüsselgeheimnis in einer neuen Datei namens |_+_| in der Root-Ebene der Anwendung (Beispiel unten).
npm install

Nun ist der lokale Tokenserver (siehe server.js ) können Zugangsmarken ausgeben, um sich mit einem Raum zu verbinden.

Ausführen der App

twilio plugins:install @twilio-labs/plugin-rtc

Dadurch wird der lokale Tokenserver gestartet und die App im Entwicklungsmodus ausgeführt. Offen http://localhost:3000 um die Anwendung im Browser anzuzeigen.

Die Seite wird neu geladen, wenn Sie Änderungen am Quellcode in |_+_| vornehmen.
Sie werden auch alle Linting-Fehler in der Konsole sehen.

npm run deploy:twilio-cli

Dadurch wird ein eigenständiger Tokenserver ausgeführt.

Der Tokenserver läuft auf Port 8081 und erwartet ein |_+_| Anfrage beim |_+_| route mit den folgenden Abfrageparametern:

npm run deploy:twilio-cli -- --override

Die Antwort ist ein Token, mit dem eine Verbindung zu einem Raum hergestellt werden kann.

Probieren Sie es mit diesem Beispiel aus |_+_| Befehl:

.env

Mehrere Teilnehmer in einem Raum

Wenn Sie sehen möchten, wie sich die Anwendung bei mehreren Teilnehmern verhält, können Sie einfach |_+_| . öffnen in mehreren Registerkarten in Ihrem Browser und verbinden Sie sich mit verschiedenen Benutzernamen mit demselben Raum.

Wenn Sie andere Teilnehmer in einen Raum einladen möchten, muss jeder Teilnehmer außerdem über eine eigene Installation dieser Anwendung verfügen und denselben Raumnamen und dieselbe Konto-SID verwenden (der API-Schlüssel und das Geheimnis können unterschiedlich sein).

Gebäude

TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx TWILIO_API_KEY_SID=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx TWILIO_API_KEY_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Dieses Skript erstellt die statischen Assets für die Anwendung im |_+_| Verzeichnis.

ein Wörterbuch-Python initialisieren

Tests

Diese Anwendung verfügt über Komponententests (mit Ist ) und E2E-Tests (mit Zypresse ). Sie können die Tests mit den folgenden Skripten ausführen.

Unit-Tests

npm start

Dadurch werden alle Unit-Tests mit Jest ausgeführt und die Ergebnisse an die Konsole ausgegeben.

E2E-Tests

src/

Dies öffnet den Cypress Test Runner. Wenn es geöffnet ist, wählen Sie eine Testdatei zum Ausführen aus.

Hinweis: Stellen Sie sicher, dass Sie den Abschnitt „Erste Schritte“ abschließen, bevor Sie diese Tests durchführen. Diese Cypress-Tests werden mit echten Twilio-Räumen verbunden, sodass Ihnen jede genutzte Zeit in Rechnung gestellt werden kann.

Anwendungsarchitektur

Der Stand dieser Anwendung (mit wenigen Ausnahmen) wird von der Raumobjekt die vom SDK bereitgestellt wird. Die |_+_| Objekt enthält alle Informationen über den Raum, mit dem der Benutzer verbunden ist. Die Klassenhierarchie der |_+_| Objekt kann eingesehen werden Hier .

Eine gute Möglichkeit, das Raumobjekt kennenzulernen, besteht darin, es in der Browserkonsole zu erkunden. Wenn Sie mit einem Raum verbunden sind, stellt die Anwendung das Raumobjekt als Fenstervariable bereit: |_+_|.

Da das Twilio Video SDK die |_+_| . verwaltet Objektzustand, es kann als Quelle der Wahrheit verwendet werden. Es ist nicht notwendig, ein Tool wie Redux zu verwenden, um den Raumzustand zu verfolgen. Die |_+_| Objekt und die meisten untergeordneten Eigenschaften sind Event-Emitter , was bedeutet, dass wir diese Ereignisse abonnieren können, um React-Komponenten zu aktualisieren, wenn sich der Raumzustand ändert.

Reagieren Sie Haken kann verwendet werden, um Ereignisse zu abonnieren und Komponenten-Re-Renderings auszulösen. Diese Anwendung verwendet häufig die |_+_| und |_+_| Hooks, um Änderungen im Raumstatus zu abonnieren. Hier ist ein einfaches Beispiel:

npm run server

In diesem Hook ist das |_+_| Hook wird verwendet, um die |_+_| . zu abonnieren Ereignis, das vom |_+_| . ausgegeben wird Objekt. Wenn dieses Ereignis ausgegeben wird, wird das |_+_| wird aufgerufen, die |_+_| . aktualisiert Variable und lösen Sie ein erneutes Rendern aller Komponenten aus, die diesen Hook verbrauchen.

Weitere Informationen zur Verwendung von React-Hooks mit dem Twilio Video SDK finden Sie in diesem Tutorial: https://www.twilio.com/blog/video-chat-react-hooks . Um alle Hooks zu sehen, die von dieser Anwendung verwendet werden, schauen Sie im |_+_| Verzeichnis.

Aufbau

Die |_+_| Funktion aus dem SDK akzeptiert a Konfigurationsobjekt . Das Konfigurationsobjekt für diese Anwendung finden Sie in src/index.ts . In diesem Objekt aktivieren wir 1) die Erkennung dominanter Sprecher, 2) aktivieren die Netzwerkqualitäts-API und 3) bieten verschiedene Optionen zum Konfigurieren der Bandbreitenprofil .

Einstellungen für die Verfolgungspriorität

Diese Anwendung ändert dynamisch die Priorität von Remote-Videospuren, um eine optimale Zusammenarbeit zu ermöglichen. Jede Videospur, die im Hauptvideobereich angezeigt wird, hat |_+_| rief es an (siehe die Videospur Komponente), wenn die Komponente montiert ist. Diese höhere Priorität ermöglicht das Rendern der Spur mit einer hohen Auflösung. |_+_| wird aufgerufen, wenn die Komponente ausgehängt wird, sodass die Priorität der Spur auf ihre Veröffentlichungspriorität (niedrig) gesetzt wird.

Google-Authentifizierung mit Firebase (optional)

Diese Anwendung kann so konfiguriert werden, dass Benutzer authentifiziert werden, bevor sie die App verwenden. Sobald sich Nutzer mit ihren Google-Anmeldeinformationen bei der App angemeldet haben, wird ihr Firebase-ID-Token in den Authorization-Header der HTTP-Anfrage aufgenommen, die zum Abrufen eines Zugriffstokens verwendet wird. Das Firebase-ID-Token kann dann verifiziert durch den Server, der Zugriffstoken für die Verbindung mit einem Raum ausgibt.

Sehen .env.Beispiel eine Erläuterung der Umgebungsvariablen, die gesetzt werden müssen, um die Google-Authentifizierung zu aktivieren.

Download-Details:

Autor: twilio

GitHub: https://github.com/twilio/twilio-video-app-react

#reactjs #javascript