Video-Archivierung mit der Vonage Video API und React

Einführung

Die Aufnahme von Videos ist nicht immer so einfach wie das Drücken einer Aufnehmen Taste zu drücken; verschiedene Projekte benötigen unterschiedliche Ergebnisse. In diesem Projekt-Spotlight stellt Vonage Solutions Engineer Misha Behei eine Demo-Anwendung vor, die die vier wichtigsten Möglichkeiten zur Archivierung von Videositzungen bietet.

TL;DR Schauen Sie sich das Repo.

Mehrere Aufzeichnungsmodi, vereinfachte Implementierung

Die Vonage Video API bietet mehrere Möglichkeiten, eine Videositzung aufzuzeichnen, wie z. B. die reine Audioarchivierung, die zusammengesetzte Archivierung und die Archivierung einzelner Streams. zeigt die verschiedenen Möglichkeiten der Archivierung und zeigt auch den Erlebnis-Komponist.

Voraussetzungen

Bevor Sie beginnen, vergewissern Sie sich, dass Sie alles haben:

• Node.js installiert

• Ein Vonage Video API-Konto

• Ein grundlegendes Verständnis von React und TypeScript

• Git lokal installiert

Für das Frontend der Anwendung verwendet er Folgendes:

• React UI (UI-Framework) geschrieben mit TypeScript

• Vite (Build-Tool und Entwicklungsserver)

• Material UI (UI-Komponenten-Bibliothek)

• Vonage Video API JavaScript SDK

Für das Backend verwendete er Node.js mit Express, geschrieben in TypeScript (Server).

Wie es funktioniert

Diese Anwendung nutzt die Vonage Video API, um verschiedene Möglichkeiten zur Aufzeichnung von Videositzungen zu demonstrieren. Einfach ausgedrückt, kann der Benutzer wählen, ob er eine der folgenden Aktionen durchführen möchte:

• Nur den Ton aufnehmen

• Kombinieren Sie alle Teilnehmer in einem einzigen Video

• Halten Sie die Videos der einzelnen Teilnehmer getrennt

• Erstellen Sie eine benutzerdefinierte Aufnahme mit interaktiven Elementen.

Die Archivierungsmodi

Diese einseitige Webanwendung demonstriert drei verschiedene Archivierungsmodi neben der Experience Composer-Funktionalität.

Nur-Audio-Archiv

Das Nur-Audio-Archiv nimmt den Audiostrom ohne Videokomposition auf. Wenn ein Benutzer auf Starten eines reinen Audioarchivsklickt, initialisiert die Anwendung einen einzelnen Video-Publisher. Obwohl das Video veröffentlicht wird, wird aufgrund der Konfiguration des Nur-Audio-Archivs nur Audio aufgezeichnet.

Zusammengesetztes Archiv

Composed Archive zeichnet eine einzelne Videodatei auf, die alle Teilnehmer in einer einheitlichen Ansicht enthält. Wenn ein Benutzer auf Zusammengesetztes Archiv starten, initialisiert die Anwendung einen Videoverlag und fordert die Berechtigung zur Bildschirmfreigabe an. Die resultierende Aufzeichnung kombiniert sowohl Webcam- als auch Screen-Capture-Material in einer einzigen Datei.

Individuelles Archiv

Individuelles Archiv trennt die Video-Streams für jeden Teilnehmer. Klicken Sie auf . Individuelles Archiv starten werden zwei Video-Publisher initialisiert: einer mit aktivierter Hintergrundunschärfe und einer ohne. Standardmäßig liefert die Vonage Video API Cloud Downloads als eine einzige ZIP-Datei, die alle Aufnahmen enthält. Dieses Projekt beinhaltet eine zusätzliche Verarbeitung, die die ZIP-Datei automatisch extrahiert und es den Benutzern ermöglicht, einzelne Videodateien separat abzuspielen.

Erlebnis-Komponist

Experience Composer erzeugt individuell gerenderte Videos mit interaktiven Elementen und Branding. Für den Zugriff und die Aufzeichnung benötigt der Experience Composer eine öffentlich zugängliche URL. Für dieses Projekt habe ich eine Begleitanwendung erstellt und bereitgestellt, ein einfaches Fußballspiel, bei dem die Tore nach dem Zufallsprinzip entweder dem Heim- oder dem Auswärtsteam zugewiesen werden. Wenn ein Benutzer auf Experience Composer starten, greift der Experience Composer auf die URL des Spiels zu und zeichnet es auf, während die Anwendung gleichzeitig einen Video-Publisher initialisiert. Obwohl der Experience Composer technisch gesehen keine Archivierungsfunktion ist, erstellt er einen neuen Stream, der in der Sitzung veröffentlicht und von der Archivierungsfunktion zusammen mit dem Video-Publisher aufgezeichnet wird.

Unten auf der Seite finden Sie eine Liste der letzten Archive mit dem Archivstatus (verfügbar/abgelaufen/gestoppt), dem Archivnamen (mit einer interessanten Zufallsinformation) und der Archiv-ID mit einem Link zum Vonage-Archivinspektor. Sie können auch Aufnahmen direkt aus dieser Liste abspielen oder herunterladen.

Beachten Sie, dass Vonage Video API-Archive nur 72 Stunden lang verfügbar sind, es sei denn ein S3-Speicher-Bucket konfiguriert ist. Nach diesem Zeitraum geht der Archivstatus von verfügbar zu Abgelaufenüber, wodurch die Aufzeichnung nicht mehr zugänglich ist.

Durchführung des Projekts

Wenn Sie dies selbst ausprobieren möchten, klonen Sie das Repo.

Sie benötigen zwei .env Dateien

Erstellen Sie die .env Datei im Verzeichnis backend/ und fügen Sie die folgenden Werte hinzu:

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

Erstellen Sie die .env Datei im Verzeichnis frontend/ Verzeichnis und fügen Sie den VITE_OPENTOK_API_KEY Wert hinzu.

Installieren Sie die Abhängigkeiten für Frontend und Backend durch Ausführen von:

npm install

Um die Demo eigenständig von der Kommandozeile aus zu starten, führen Sie:

npm run dev

Der Backend-Server wird gestartet unter localhost:3345, und das Frontend läuft unter localhost:5173.

Schlussfolgerung

Und das war's! Dieses Projekt demonstriert die Archivierungsmöglichkeiten der Video API von Vonage und zeigt, wie Entwickler Aufzeichnungslösungen auf ihre spezifischen Bedürfnisse zuschneiden können, sei es die Erfassung von reinen Audiositzungen, die Erstellung einheitlicher Aufnahmen oder die Trennung einzelner Streams. Die Experience Composer-Integration zeigt, wie man Aufzeichnungen mit individuellem Branding und interaktiven Elementen versehen kann. Probieren Sie die Demo selbst aus, um besser zu verstehen, wie diese Funktionen in Ihre eigenen Projekte integriert werden können.