Hallo Welt

Richten Sie in wenigen Minuten einen einfachen, browserbasierten Audio-Video-Chat ein.

Voraussetzungen

Einrichtung der OpenTok-Grundfunktionen clientseitiger Code Im Internet ist das relativ einfach, aber Sie benötigen ein paar Dinge, um sicherzustellen, dass alles ordnungsgemäß funktioniert:

  • Chrome- oder Firefox-Browser – OpenTok funktioniert mit verschiedene Browser, für diese Demo empfehlen wir jedoch die Verwendung von Chrome oder Firefox
  • Webcam und Mikrofon – Ihr Browser wird Sie auffordern, den Zugriff darauf zu gewähren

Richten Sie mit OpenTok einen einfachen Audio-Video-Chat ein

Nachfolgend finden Sie eine bearbeitbares HTML-Dokument geladen mit dem OpenTok.js Bibliothek. Befolgen Sie die Schritte unter dem HTML-Dokument, um schnell einen einfachen OpenTok-Chat einzurichten.

Siehe den Pen „Hello World“ einbetten (@tokbox) am CodePen.

Schritt 1 von 5: Authentifizierung

Kopieren Sie den folgenden Codeausschnitt und fügen Sie ihn in die HTML Dokument unter // credentials (verwenden Sie das (Kopieren-Schaltfläche.)

var apiKey = 'Wird generiert...';
var sessionId = 'Wird generiert...';
var Token = 'Wird generiert...';

Sie müssen eine gültige Prüfung bestehen API-Schlüssel, Sitzungs-IDund Token beim Herstellen einer Verbindung zu einer OpenTok-Sitzung. Diese Anmeldedaten werden in der Regel von Ihrem Server Aber dieses Mal haben wir sie für Sie erstellt.

OK, ich habe es hinzugefügt

Schritt 2 von 5: Mit der Sitzung verbinden und einen Publisher erstellen

Kopieren Sie den folgenden Codeausschnitt und fügen Sie ihn in die HTML Dokument unter // connect to session. Dadurch wird ein Publisher-Video erstellt, weshalb Ihr Browser möglicherweise um Zugriff auf Ihre Kamera und Ihr Mikrofon bittet.

var session = OT.initSession(apiKey, sessionId);

// Publisher erstellen
var publisher = OT.initPublisher();
Sitzung.verbinden(token, function(err) {
       // publish publisher
       
});

Dieser Code initialisiert die Sitzung und Herausgeber und dann verlinkt zur Sitzung. Ihr Video sollte nun im Ausgabebereich angezeigt werden.

OK, ich sehe mein Video. Zurück zum vorherigen Schritt

Wird das Video nicht angezeigt? Versuchen Sie doch einmal, auf die    Symbol in Ihrer Adressleiste, um die Berechtigungen für Ihre Webcam anzupassen.

Schritt 3 von 5: Den Verlag veröffentlichen

Kopieren Sie den folgenden Codeausschnitt und fügen Sie ihn in die HTML Dokument unter // publish publisher.

session.publish(publisher);

Dieser Code veröffentlicht den Audio-Video-Stream über Ihre Webcam und Ihr Mikrofon in die Sitzung.

OK, ich habe es hinzugefügt. Zurück zum vorherigen Schritt

Schritt 4 von 5: Abonnenten anlegen

Kopieren Sie den folgenden Codeausschnitt und fügen Sie ihn in die HTML Dokument unter // create subscriber. Möglicherweise müssen Sie im HTML-Dokument nach unten scrollen.

session.on('streamCreated', function(event) {
   Sitzung.abonnieren(event.stream);
});

Mit diesem Code können Sie abonnieren zu neuen Streams, die von anderen Clients in der Sitzung veröffentlicht werden.

OK, ich habe es hinzugefügt. Zurück zum vorherigen Schritt

Schritt 5 von 5: Fügen Sie einen zweiten Videoteilnehmer hinzu, um einen Eins-zu-Eins-Videochat zu starten

Schalten Sie den Lautsprecher Ihres Computers stumm (um eine Rückkopplung zu vermeiden). Klicken Sie anschließend auf die Schaltfläche unten, um einen zweiten Client in einem neuen Browser-Tab zu starten (mit Codepen). Dadurch sollte ein zweiter Publisher erstellt werden, und Sie sehen zwei Videostreams auf der Seite.

Wenn Sie auf die Schaltfläche unten klicken, wird ein Codepen in einem neuen Tab Ihres Browsers geöffnet; anschließend können Sie zu diesem Tab zurückkehren.

Zurück zum vorherigen Schritt

Das war's!

Sie haben soeben einen (sehr) einfachen 1:1-Videochat mit OpenTok eingerichtet. Das ist ein großartiger erster Schritt, aber der hier verwendete Code ist eine Minimalimplementierung, die darauf ausgelegt ist, OpenTok schnell in Aktion zu sehen. Bevor Sie eine Produktionsanwendung starten können, müssen Sie noch einige weitere Einstellungen vornehmen, darunter die Bereitstellung eines Servers.

Nächste Schritte:

Zurück zum vorherigen Schritt