Einen einfachen Web-Client einrichten

Dieses Tutorial führt Sie Schritt für Schritt durch die Einrichtung eines einfachen Clients für eine Web-App mit der Vonage Video API.

Übersicht

Alle Applikationen, die die Vonage Video API verwenden, benötigen sowohl eine Kunde und eine Server Komponente. Der clientseitige Code wird im Browser des Endnutzers geladen und übernimmt den Großteil der OpenTok-Funktionalität, darunter Verbindung zum Sitzung, Veröffentlichung Audio-Video Ströme zur Sitzung, und Abonnieren Sie zu den Streams anderer Clients. Weitere Informationen über Clients, Server und Sitzungen finden Sie unter Video API-Grundlagen.

In diesem Tutorial werden Sie Folgendes verwenden: OpenTok.js, die clientseitige Bibliothek von OpenTok für das Web, mit der sich schnell und einfach eine interaktive Echtzeit-Videoanwendung erstellen lässt.

In diesem Tutorial werden folgende Themen behandelt:

Geschätzte Bearbeitungszeit: 20 Minuten

Möchten Sie dieses Tutorial überspringen? Sie können direkt zum fertigen Web-Client-Code im Einfacher Video-Chat Ordner unseres Repository für die Web-Beispiel-App auf GitHub. Das Repo enthält eine README mit Dokumentation zum Ausführen und Erforschen des Codes.

Anforderungen

Für dieses Tutorial benötigen Sie:

Schritt 1: Erstellen der Projektordner und der HTML-Vorlage

Für dieses Projekt erstellen Sie eine HTML-Datei, eine JavaScript-Datei und eine CSS-Datei.

  1. Bevor Sie mit dem Code beginnen, erstellen Sie einen neuen Projektordner auf Ihrem Computer, um diese Dateien zu speichern (das folgende Beispiel heißt myproject aber Sie können es nennen, wie Sie wollen). Dann fügen Sie eine /js und /css zusammen mit leeren Dateien für index.html, app.jsund app.css in der folgenden Struktur:

    /myproject
    /js
        app.js
    /css
        app.css
    index.html

    Sobald Sie Ihr Projekt eingerichtet haben, öffnen Sie den Hauptprojektordner in Ihrem Code-Editor und gehen Sie zum Abschnitt index.html Datei.

  2. Kopieren Sie den folgenden Code (mit Hilfe des (Schaltfläche „Kopieren“) und fügen Sie ihn in Ihrer index.html-Datei im Code-Editor ein:

    <html> <head> <title> OpenTok Getting Started </title> <link href="css/app.css" rel="stylesheet" type="text/css"> <script src="https://static.opentok.com/v2/js/opentok.min.js"></script> </head> <body> <div id="videos"> <div id="subscriber"></div> <div id="publisher"></div> </div> <script type="text/javascript" src="js/app.js"></script> </body> </html>

    Der obige Code enthält Verweise auf die OpenTok.js Bibliothek sowie die soeben erstellten JS- und CSS-Dateien. Der Code enthält außerdem Herausgeber und Teilnehmer divs, die die Videostreams enthalten werden - wir werden diese Klassen verwenden, um das Layout später anzupassen.

    In diesem Beispiel wird OpenTok.js direkt von static.opentok.com geladen. OpenTok.js ist auch als NPM-Paket verfügbar. Eine Anleitung zur Verwendung des NPM-Pakets finden Sie unter https://www.npmjs.com/package/@opentok/client.

Schritt 2: Einrichtung der Authentifizierung

Ziehen Sie Ihren Rohling hoch app.js Datei in Ihrem Code-Editor - die meisten der verbleibenden Schritte werden das Hinzufügen von Code zu dieser Datei beinhalten.

Um eine Verbindung zu einer OpenTok-Sitzung herzustellen, benötigt der Client Zugriff auf bestimmte Authentifizierungsdaten – ein API-Schlüssel, Sitzungs-IDund Token. In einer Produktionsanwendung sollten diese Anmeldeinformationen von einem Server, aber um den Vorgang zu beschleunigen, werden wir die Werte vorerst einfach fest einprogrammieren.

  1. Kopieren Sie zunächst den folgenden Codeblock und fügen Sie ihn in Ihre app.js-Datei ein:

    // replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // (optional) add server code here initializeSession();

  2. Sie müssen den obigen Code anpassen, indem Sie die Werte für die apiKey, sessionId und token. Melden Sie sich dazu in Ihrem Video API-Konto, erstellen Sie entweder ein neues OpenTok-API-Projekt oder verwenden Sie ein bestehendes OpenTok-API-Projekt. Rufen Sie anschließend Ihre Projektseite auf und scrollen Sie nach unten zum Projekt-Tools Abschnitt – dort können Sie eine Sitzungs-ID und ein Token manuell generieren. Verwenden Sie den API-Schlüssel des Projekts zusammen mit der von Ihnen generierten Sitzungs-ID und dem Token, um YOUR_API_KEY, YOUR_SESSION_ID und YOUR_TOKEN im obigen Code (Achte darauf, die Anführungszeichen beizubehalten.)

Das ist wichtig: Während der Test- und Entwicklungsphase können Sie die Werte für die Sitzungs-ID und das Token weiterhin über Ihren Account abrufen, doch bevor Sie in die Produktion gehen, müssen Sie einen Server einrichten. Weitere Informationen finden Sie in der optionalen Anleitung zu Einrichten eines Servers am Ende dieses Tutorials.

Weitere Informationen zu den Veranstaltungen finden Sie unter, Token, und Server, schau dir das mal an Video API-Grundlagen.

Schritt 3: Verbindung zur Sitzung herstellen und einen Publisher erstellen

Vielleicht haben Sie bemerkt, dass die initializeSession() Methode, die im letzten Schritt aufgerufen wird, nachdem wir die Sitzungs-ID und das Token erhalten haben. Diese Methode initialisiert ein Sitzungsobjekt und stellt dann eine Verbindung zur Sitzung her, aber wir haben sie noch nicht in unserem Code definiert.

  1. Kopieren Sie den folgenden Code und fügen Sie ihn unterhalb des vorhandenen Codes in Ihrer Datei „app.js“ ein:

    // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

Einen Verlag anlegen

Die Anwendung initialisiert ein OpenTok publisher Objekt mit OT.initPublisher(). Diese Methode akzeptiert drei optionale Parameter:

  • Das DOM-Element, das durch das Publisher-Video ersetzt wird – in diesem Fall das publisher div
  • Die Eigenschaften des Verlags – in diesem Fall des insertMode, heightund width Attribute
  • Der dritte Parameter (der in unserem Code nicht vorkommt) gibt den Abschluss-Handler an

Weitere Informationen zu diesen Optionen finden Sie im OT.initPublisher() Referenzdokumentation.

Initialisierung und Herstellung einer Verbindung zur Sitzung

Die OT.initSession() Die Methode nimmt zwei Parameter entgegen – den OpenTok-API-Schlüssel und die Sitzungs-ID. Sie initialisiert eine OpenTok-Instanz und gibt diese zurück. session Objekt.

Die connect() Methode der session Das Objekt stellt die Verbindung zwischen der Client-Anwendung und der OpenTok-Sitzung her. Sie müssen die Verbindung herstellen, bevor Sie Audio- und Videostreams in der Sitzung senden oder empfangen (oder bevor Sie in irgendeiner Weise mit der Sitzung interagieren). Das connect() Die Methode nimmt zwei Parameter entgegen — einen token und eine Abschluss-Handler-Funktion function(error).

Sobald die Verbindung zur Sitzung hergestellt ist, veröffentlichen wir Inhalte in der Sitzung mit session.publish(publisher).

Wenn der Client keine Verbindung zur OpenTok-Sitzung herstellen kann, wird ein Fehlerobjekt an den Abschluss-Handler des „connect“-Ereignisses übergeben – in diesem Fall wird mithilfe von console.error().

Schritt 4: Initialisierung des Abonnenten

Schließlich möchten wir, dass die Kunden in der Lage sind abonnieren auf die Streams der anderen Teilnehmer in der Sitzung zugreifen (oder diese einsehen).

  1. In Ihrem aktuellen app.js Datei sollte ein Kommentar stehen, der besagt // Subscribe to a newly created stream. Kopieren Sie den folgenden Code und fügen Sie ihn direkt unter diesem Kommentar ein:

    session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); });

Wenn in der Sitzung ein neuer Stream erstellt wird, löst das Session-Objekt einen streamCreated Ereignis. Wenn der Client einen Stream erkennt, soll er diesen abonnieren. Dies wird im obigen Code mithilfe der session.subscribe() Methode. Diese Methode nimmt vier Parameter entgegen:

  • Das Stream-Objekt, das der Client abonniert — event.stream
  • Das DOM-Element oder die DOM-Element-ID (optional), das bzw. die durch das Abonnentenvideo ersetzt wird – in diesem Fall das subscriber div
  • Eine Reihe von Eigenschaften (optional), mit denen das Erscheinungsbild der Abonnentenansicht angepasst werden kann – in diesem Fall die insertMode, heightund width Attribute
  • Die Abschluss-Handler-Funktion (optional), die aufgerufen wird, wenn die subscribe() Die Methode wird erfolgreich ausgeführt oder schlägt fehl

Weitere Informationen zu diesen Optionen finden Sie im Session.subscribe() Referenzdokumentation.

Schritt 5: Testen Ihres Codes in einem Browser

Zu diesem Zeitpunkt wird Ihr app.js Datei sollte in etwa so aussehen (mit ein paar Anpassungen):

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } // (optional) add server code here initializeSession(); function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); }); // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, initialize a publisher and publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

In Ihrem fertigen Code sollten Sie hart kodierte Werte haben, die Folgendes ersetzen YOUR_API_KEY, YOUR_SESSION_ID und YOUR_TOKEN - wenn Sie dies noch nicht getan haben, siehe Einrichten der Authentifizierung oben.

  1. Wenn alles in Ordnung ist, können Sie Ihren Code testen, indem Sie die Datei „index.html“ in Chrome oder Firefox laden.

    Wenn Sie die Seite laden, müssen Sie dem Browser möglicherweise den Zugriff auf Ihre Webcam und Ihr Mikrofon gestatten. Danach sollte auf der Seite ein Videostream von Ihnen selbst (oder dem, was Ihre Webcam gerade aufnimmt) angezeigt werden.

  2. Wenn das geklappt hätte, Ton stummschalten Öffnen Sie anschließend einen weiteren Tab (wobei der ursprüngliche Tab geöffnet bleibt) und rufen Sie dieselbe URL auf. Sie sollten nun nach unten scrollen und ein zweites Video sehen können. Wenn Sie mit der rechten Maustaste auf eines der Videos klicken und „Element untersuchen“ auswählen, sollten Sie feststellen, dass eines der Videos den subscriber div, und das andere füllt das publisher div.

Tipp zur Fehlersuche: Wenn auf der Seite kein Video angezeigt wird, öffnen Sie die Registerkarte "Konsole" in Ihren Browser-Tools (Befehl+Option+i auf Mac, STRG+i auf Windows) und suchen Sie nach Fehlern. Das wahrscheinlichste Problem ist, dass Ihr API-Schlüssel, Ihre Sitzungs-ID oder Ihr Token nicht richtig eingerichtet ist. Da Sie Ihre Anmeldedaten fest kodiert haben, ist es auch möglich, dass Ihr Token abgelaufen ist.

Schritt 6: Ein paar kleine Anpassungen am CSS

Nun verfügen Sie über einen voll funktionsfähigen Client, der OpenTok nutzt. In diesem letzten Schritt werden lediglich einige grundlegende CSS-Anpassungen gezeigt, um ein „Bild-in-Bild“-Layout zu erstellen.

  1. Öffnen Sie Ihre leere app.css-Datei in Ihrem Code-Editor und fügen Sie den folgenden Code hinzu:

body, html { background-color: gray; height: 100%; } #videos { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #subscriber { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } #publisher { position: absolute; width: 360px; height: 240px; bottom: 10px; left: 10px; z-index: 100; border: 3px solid white; border-radius: 3px; }

  1. Sobald Sie das CSS gespeichert haben, öffnen Sie Ihren Index erneut in zwei separaten Browser-Tabs - Sie sollten nun zwei Videostreams sehen, von denen einer jedoch kleiner ist und in den größeren Videostream eingebettet ist.

Wenn Sie sich das obige CSS ansehen, können Sie sehen, dass wir dies durch Anpassung der Höhe, Breite und Position des #publisher div. Dieses "Bild-im-Bild"-Layout ist eine gängige Praxis in Videochats, aber Sie können das CSS so anpassen, dass Sie mit der Größe und Position dieser Divs spielen können, wie Sie möchten.

Herzlichen Glückwunsch! Sie haben den Lehrgang "Einrichten eines einfachen Webclients" abgeschlossen.
Sie können mit dem Code, den Sie hier entwickelt haben, weiter spielen und ihn für die Client-Seite Ihrer Anwendung anpassen, aber denken Sie daran, dass Sie die Serverkomponente Ihrer Anwendung, bevor sie in Produktion geht (siehe Einrichten Ihres Servers unten).

Nächste Schritte

Wenn Sie hier fertig sind, können Sie Ihre OpenTok-Application mit diesen hilfreichen Ressourcen weiter ausbauen und verbessern:

Einrichten Ihres Servers

Im obigen Tutorial haben wir Sie gebeten, Ihre Anmeldedaten fest einprogrammieren. Für eine Produktionsanwendung gilt jedoch, dass die sessionId und token Die Werte in Ihrem Code müssen von Ihrem Anwendungsserver generiert und an den Client übergeben werden. Hier sind einige Gründe, warum Sie in Ihrer Produktionsanwendung keine fest eingestellten Anmeldedaten verwenden sollten:

  • Token verfallen nach einer bestimmten Zeit (die bei der Generierung festgelegt wird), daher müssen regelmäßig neue generiert werden.
  • Sie können keine neuen Sitzungen dynamisch erstellen, sodass alle Nutzer Ihrer App in einem einzigen „Raum“ festsitzen würden.

Sie können Ihre Anwendung weiterhin mit fest programmierten Werten testen, aber wenn Sie bereit sind, einen Server einzurichten, gibt es dafür verschiedene Möglichkeiten:

Server-Option 1 – Starten Sie mit einem Klick einen einfachen REST-Server auf Heroku

Dies ist wahrscheinlich der schnellste Weg, einen Server in Betrieb zu nehmen, allerdings ist der Funktionsumfang dabei eingeschränkt. Klicken Sie einfach auf die Heroku-Schaltfläche unten. Sie werden dann zur Heroku-Website weitergeleitet und aufgefordert, Ihren OpenTok-API-Schlüssel und Ihr API-Geheimnis einzugeben – diese Werte finden Sie auf Ihrer Projektseite in Ihrem Video API-Konto. Falls Sie noch keinen Heroku-Account haben, müssen Sie sich registrieren (das ist kostenlos).

Deploy

Möchtest du dir den Code ansehen? Über die Schaltfläche oben wird der Servercode aus der Lernen mit OpenTok PHP GitHub-Repo. Besuchen Sie das Repo, um den Code sowie die zusätzliche Dokumentation einzusehen – Sie können das Repo sogar forken und vor der Bereitstellung Änderungen vornehmen.

Bevorzugen Sie Node.js? Besuchen Sie die Lernen mit OpenTok Node Repo für dieselbe Funktionalität mit Node.js (einschließlich Heroku-Deploy-Button).

Sobald der Server auf Heroku bereitgestellt ist (entweder PHP oder Node.js), müssen Sie Ihrem clientseitigen Code einige Zeilen hinzufügen. In Ihrer app.js Datei, dort sollte ein Kommentar zu sehen sein // (optional) add server code here.

Kopieren Sie den folgenden Code und ersetzen Sie damit // (optional) add server code here und die initializeSession() Rufe in deiner app.js-Datei Folgendes auf:

// (optional) add server code here var SERVER_BASE_URL = 'https://YOURAPPNAME.herokuapp.com'; fetch(SERVER_BASE_URL + '/session').then(function(res) { return res.json() }).then(function(res) { apiKey = res.apiKey; sessionId = res.sessionId; token = res.token; initializeSession(); }).catch(handleError);

Sie müssen Folgendes ersetzen: https://YOURAPPNAME.herokuapp.com durch die tatsächliche URL Ihrer Heroku-App ersetzen – diese finden Sie auf Ihrer App-Seite auf der Heroku-Website.

Der obige Code nutzt Ajax, um eine Anfrage an die /Sitzung Endpunkt (https://YOURAPPNAME.herokuapp.com/session), was eine HTTP-Antwort zurückgeben sollte, die die Sitzungs-ID, das Token und den API-Schlüssel im JSON-Format enthält, die dann den entsprechenden Variablen zugewiesen werden.

Diese /session Der Endpunkt gibt stets dieselbe Sitzungs-ID zurück, generiert jedoch bei jedem Aufruf ein neues Token – dadurch erhält jeder Client ein eindeutiges Token.

Server-Option 2 – Komplette Neuerstellung mithilfe der Server-SDKs

Option 1 nutzt REST-Endpunkte zur Übertragung von Anmeldedaten an den Client, doch dies ist nur eine von vielen Möglichkeiten, einen Server mit OpenTok zu implementieren. Wenn Sie ein höheres Maß an Anpassung wünschen, können Sie sich die Dokumentation von OpenTok ansehen. Dokumentation zum Server-SDK für die Serversprache Ihrer Wahl (verfügbar für PHP, Node.js, Java, .NET, Python und Rubinrot). Die Dokumentation behandelt den Einrichtungsprozess und die verschiedenen Methoden, die Sie zum Generieren von Sitzungen und Tokens benötigen, sowie weitere serverseitige Funktionen.

Server-Option 3 – Verwenden Sie eine unserer Client-Server-Beispielanwendungen für das Web

Wir haben einfache Beispiel-Apps mit fertigem Client-Server-Code für jede serverseitige Sprache (PHP, Node.js, Java, .NET, Python und Ruby) entwickelt. Diese enthalten bereits fertige Clients, sodass Sie den in diesem Tutorial eingerichteten Client-Code nicht benötigen.

Um die Beispiel-Apps für Ihre bevorzugte Sprache anzusehen, besuchen Sie unsere Seite „Code-Beispiele“ und wählen Sie eine der serverseitigen Sprachen unter Einfaches Client-Server-Modell für das Web.