One-on-One-Video mit der Vonage Video API

Mit der Video API von Vonage können Sie so gut wie jedes gewünschte Videoerlebnis erstellen. Einer der häufigsten Anwendungsfälle für Entwickler ist der Bedarf an einfachen One-on-One-Videositzungen, z. B. ein Arzt mit einem Patienten oder ein Schadensregulierer mit einem Kunden.

In diesem Lernprogramm

Mit der Vonage Video API können Sie schnell einen Raum zusammenstellen und Teilnehmer hineinsetzen. Wir gehen darauf ein, wie Sie eine Demo mit unseren bestehenden Demos zum Laufen bringen, so dass Sie keinen Code schreiben müssen, aber wir werden auch erklären, was der Code im Hintergrund tut.

Siehe die Demo - Probieren Sie die Demo aus, ohne Code zu schreiben
Wie die Demo funktioniert - Die Client-Seite - Was der Code auf der Client-Seite macht
So funktioniert die Demo - Die Serverseite - Was der serverseitige Code macht

Voraussetzungen

Um das Tutorial abzuschließen, benötigen Sie:

A Vonage-Konto - für Ihren API-Schlüssel und Ihr Geheimnis

Siehe die Demo

Wenn Sie die Demo ausprobieren möchten, bevor wir den Code schreiben, haben wir einen Beispiel-Webserver und JavaScript-Code, um zu testen, wie ein einfacher Videoanruf aussieht. Der gesamte Code ist quelloffen und öffentlich zugänglich, so dass Sie die Demo ausprobieren und dann den Code verwenden können, um Ihre eigenen Änderungen vorzunehmen.

Starten Sie den Node.js-Server

Die Video-Demo erfordert einen Backend-Server, der Dinge wie die Erstellung von Client-Tokens für die Autorisierung und die allgemeine Sitzungsverwaltung übernimmt. Sie können dies in jeder beliebigen Sprache erstellen, aber wir haben einen vorgefertigten Server, den Sie für den Anfang verwenden können, und zwar unter Vonage Video Learning Server (Node.js) auf Code Hub. Von der Dokumentation für EntwicklerKlicken Sie in der oberen Navigationsleiste auf "Code Hub" und scrollen Sie dann nach unten, um die Karte für "Vonage Video Learning Server (Node.js)" zu finden. Klicken Sie darauf, um sie zu öffnen.

Sie erhalten eine Beschreibung dessen, was dieses Projekt tut. Klicken wir zunächst auf "Code abrufen", damit wir ihn in den Code Hub Online-Editor laden können. Klicken Sie auf "Create a new development environment". Nennen Sie den Arbeitsbereich "Vonage Video Demo", da wir dieses Backend für mehrere Demos verwenden können. Dieser Demo muss eine Nummer zugewiesen werden, da der Lernserver Telefonanrufe über SIP unterstützt. Wir werden diese Funktion in dieser Demo nicht verwenden. Klicken Sie auf "Nummer zuweisen", um eine vorhandene Nummer von Vonage zuzuweisen, oder erwerben Sie eine neue Nummer, die Sie bei späteren Demos verwenden können.

Code Hub wird automatisch eine Anwendung für Sie erstellen, einschließlich der Einrichtung der öffentlichen und privaten Schlüssel, die unsere Anwendung verwenden wird. Sobald der Arbeitsbereich erstellt ist, werden Sie in den Code-Editor weitergeleitet, der eine Online-Version von Visual Studio Code ist. Sie können die weiteren Teile dieser Demo verfolgen, um den Code zu sehen, und Sie können diesen Code nach Bedarf für Ihre eigenen Projekte bearbeiten.

Um die Anwendung auszuführen, klicken Sie oben im Editor auf "Ansicht" und dann auf "Terminal". Dadurch wird eine Befehlszeile geöffnet, in der wir Befehle ausführen können. Alles, was wir tun müssen, ist Folgendes einzugeben vcr deploy und der Code wird bereitgestellt. Dies wird einige Augenblicke dauern, da der Code verpackt und auf den Vonage Code Hub Servern ausgeführt wird. Notieren Sie sich die "Instanz-Host-Adresse", die am Ende ausgegeben wird.

Wenn alles richtig funktioniert, sollten Sie die "Instance-Host-Adresse" aufrufen können und die folgende Seite angezeigt bekommen:

Testen Sie das Frontend

Der Backend-Server funktioniert direkt mit allen unseren vorgefertigten Demos, einschließlich dieser Einzel-Demo. Gehen Sie rüber zu https://github.com/Vonage-Community/video-api-web-samples/tree/main/Basic Video Chatdas ist der Quellcode für den Front-End-Teil dieser Demo. Mit diesem Beispiel können zwei Benutzer mit der URL an einem Voice-Chat teilnehmen.

Der einfachste Weg, diese Demo zu starten, ist ein Klick auf die Schaltfläche "Open in Stackblitz" in der README.

Dadurch wird das Projekt in Stackblitz geöffnet. Wie beim Backend-Server können Sie hier den Code durchsuchen und ändern, wenn Sie möchten. Für diese Demo müssen wir nur das Projekt js/config.js Datei und fügen Sie die URL der Code Hub-Instanz in die SAMPLE_SERVER_BASE_URL variabel:

Sobald Sie die Datei gespeichert haben, können Sie die Demo-Ansicht auf der rechten Seite von Stackblitz aktualisieren und Ihr Browser sollte Sie auffordern, Ihr Mikrofon und Ihre Kamera zuzulassen. Sobald Sie dies zulassen, sollte Ihr Bild in der unteren Ecke der Seitenleiste erscheinen. Wenn Sie die Stackblitz-URL oberhalb des Demo-Fensters kopieren und auf Ihrem mobilen Gerät oder einem anderen Computer aufrufen oder einem Freund geben, sollte jeder, der sich anmeldet, mit Ihrer Demo verbunden werden!

So funktioniert die Demo

Konfigurieren einer Vonage-Applikation

Damit unsere Videoanwendung funktioniert, müssen unser Client und unser Server mit den Vonage-Servern kommunizieren können. Code Hub konfiguriert dies für uns, aber wenn Sie den Code lokal ausführen oder wissen möchten, was das bedeutet, wird eine Video-App wie eine andere API konfiguriert. Wir müssen eine Vonage Application einrichten, die die gesamte Konfiguration für unsere Anwendung enthält und uns dabei hilft, die notwendigen Elemente für die Authentifizierung zu generieren.

Gehen Sie zu Ihrem Vonage Kunden Dashboard und melden Sie sich an. Sobald Sie eingeloggt sind:

Klicken Sie auf "Applications" unter "Build".
Klicken Sie auf "Eine neue Anwendung erstellen".
Geben Sie der Anwendung einen Namen, z. B. "Basic Video Demo".
Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren", woraufhin Sie eine Datei namens private.key. Bewahren Sie diese Datei für später auf.
Scrollen Sie nach unten und schalten Sie "Video" ein. Wir lassen diese Werte vorerst leer.
Klicken Sie auf "Neue Anwendung generieren", um die Anwendung zu erstellen.

Sobald die Anwendung erstellt ist, notieren Sie sich die Application ID. Wenn Sie den Code lokal ausführen, benötigen wir diese zur Konfiguration des Backends. Wenn Sie Code Hub verwenden, hat der Servercode bereits Zugriff auf die Application ID und den Private Key.

Die Kundenseite

Der client-seitige Teil der Demo besteht aus zwei verschiedenen Teilen - einigen HTML-Elementen, um die Video-Feeds einzubinden, und einigen JavaScript-Elementen, um Anmeldeinformationen abzurufen und mit den Vonage Video-Servern zu kommunizieren.

Da es sich um eine Browser-Demo handelt, verwenden wir das JavaScript-SDK, das sich unter https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jsund fügen es in ein Skript-Tag in unserem HTML-Code ein. index.html.

Um Personen zu einem Raum hinzuzufügen, benötigen wir nur zwei Elemente - einen Platz für den aktuellen Benutzer, z. B. Sie, den wir "Herausgeber" nennen. Dann brauchen wir einen Platz für alle anderen Personen, die einem Raum beitreten und die Sie "abonnieren" werden. Wir werden sie in einem "Abonnenten"-Element unterbringen.

Wir werden zwei div Elemente und geben einem eine ID von publisher und die andere eine ID von subscriber. Wir verweisen auf diese Elemente im JavaScript, wenn die Seite besucht wird und wenn wir feststellen, dass ein anderer Benutzer den Videoanruf getätigt hat.

Auf der JavaScript-Seite werden wir zunächst einige Informationen über den Videoaufruf selbst erhalten. Um eine Verbindung mit dem Videoanruf herzustellen, benötigen wir eine Application ID, eine Session ID und ein Token.

Die Applikation ID ist ein Bezeichner, den das Client SDK verwendet, um verschiedene Einstellungen für unsere Video-App auf der Vonage-Seite zu referenzieren.
Die Sitzungs-ID ist eine bestimmte Videositzung, zu der wir eine Verbindung herstellen möchten, da eine einzelne Applikation mehrere gleichzeitige Videositzungen haben kann.
Die Token ist ein JWT-Authentifizierungstoken, mit dem Sie einer bestimmten Sitzung mit bestimmten Rechten beitreten können.

Sie können die Sitzungs-ID und das Token zwar im Voraus generieren, aber in der Realität werden Sie diese bei Bedarf erzeugen. Unser Code stellt dar, wie Sie das tun würden. Wir werden in Kürze zeigen, wie die Informationen erstellt werden, aber wir werden diese Informationen vom Backend-Server abrufen, den wir bereitgestellt haben.

Sobald wir alle Verbindungsinformationen haben, können wir das Vonage Video JavaScript SDK aufrufen, das die Verbindung zur Vonage Video API am Frontend herstellt. Zuerst holen wir uns ein Sitzungsobjekt mit OT.initSession(). Wir beginnen dann mit dem Abhören der streamCreated Veranstaltung mit session.on(). Dies ermöglicht es uns, einen Callback zu setzen, der ausgeführt wird, wenn ein Stream von einem anderen Publisher erstellt wird. In diesem Fall verwenden wir session.subscribe() um eine Verbindung zu dem eingehenden Ereignis herzustellen und es in die subscriber div, das wir in der HTML-Datei eingerichtet haben. Wir achten auch auf die sessionDisconnected Ereignis, um zu wissen, wann der andere Benutzer die Verbindung trennt, aber in dieser Demo protokollieren wir nur, dass er gegangen ist.

Dann erstellen wir die publisher Objekt mit OT.initPublisher(). Wir sagen ihm, an welches div es anhängen soll (publisher), und einige grundlegende Formatierungsoptionen. Dadurch werden Ihre Kamera und Ihr Mikrofon mit der Video API verbunden.

Wir rufen dann session.connect() um sich mit der Sitzung zu verbinden, wobei das JWT-Token verwendet wird, das wir vom Server erhalten haben. Das ist alles, was zwei Personen brauchen, um einem Raum beizutreten!

Die Server-Seite

Der serverseitige Teil jeder Vonage Video-Anwendung dient der Erstellung von Sitzungen, der Erzeugung von Authentifizierungstoken und administrativen Aufgaben wie dem Starten und Stoppen von Archiven. In dieser Demo geht es nur um die Erstellung von Sitzungen und Token, damit Benutzer dem Raum beitreten können. Obwohl die API selbst eine REST-API ist und nach Belieben aufgerufen werden kann, empfehlen wir Ihnen die Verwendung der Vonage Node SDK die alle Authentifizierungs- und HTTP-Aufrufe für Sie erledigt. Sie können es in Ihrer eigenen Anwendung mit installieren:

Im Democode ist es bereits vorinstalliert. Wenn Sie den Code lokal ausführen, müssen Sie ihn ausführen:

um alle Abhängigkeiten herunterzuladen, und kopieren Sie dann .envcopy in eine neue Datei mit dem Namen .env. Sie müssen die geforderten Informationen in folgende Felder eintragen .env wie die Application ID, den Speicherort des privaten Schlüssels auf der Festplatte und Ihren Vonage API-Schlüssel und -Geheimnis.

Erstellung einer Sitzung und Beitritt zur Sitzung

Als Erstes schauen wir nach, ob es bereits eine Sitzung für den Raum gibt, den wir erstellen. Wir halten ein In-Memory-Wörterbuch in roomToSessionIdDictionaryund wenn der Raum bereits eine Sitzung hat, ziehen wir die Sitzung einfach aus dem Wörterbuch. Anschließend verwenden wir das Vonage Video Node SDK, um ein Client-Token zu erstellen, indem wir vonage.video.generateClientToken()und übergibt ihm die Sitzungs-ID und ein Objekt mit einer Konfiguration. Im Moment ist alles, was wir tun, den Benutzer auf eine moderator Rolle für diese einfache Demo. Anschließend werden die konfigurierte Application ID, Session ID und das Token an das Frontend zurückgegeben.

Wenn die Sitzung nicht existiert, wird eine neue Sitzung mit vonage.video.createSession(). Dadurch wird die Vonage-API kontaktiert und eine Sitzung erstellt, mit der sich die Benutzer verbinden können. Wir haben keine spezifischen Einstellungen für diese Sitzung, aber hier würden wir Dinge wie Archivierungsregeln einrichten und wie die Sitzung behandelt werden soll, wie Routing oder Peer-to-Peer. Dann erstellen wir wie zuvor ein Token und senden all diese Informationen zurück an den Browser.

Schlussfolgerung

In diesem Tutorial haben Sie gesehen, was in den Backend-Server für eine einfache One-on-One-Videositzung eingeht, wie man einen Web-Client erstellt, mit dem Benutzer einer Sitzung beitreten und sich gegenseitig sehen und hören können, und wie einfach es ist, den Vonage Code Hub und Stack Blitz zum schnellen Testen von Beispielen zu verwenden.