Erstellen eines einfachen Video-Chats mit der Vonage Video API

In dieser Reihe von Tutorials werden wir die Vonage Video API (ehemals TokBox OpenTok) und was Sie damit bauen können. Die Video-API ist sehr robust und in hohem Maße anpassbar. In jedem Beitrag zeigen wir, wie eine bestimmte Funktion mithilfe der API implementiert wird, beginnend mit dem einfachsten Audio-Video-Chat.

Da diese Anwendung etwas serverseitigen Code erfordert, werden wir Glitch um die Einrichtung zu erleichtern. Sie können den Code auch von diesem Glitch-Projekt herunterladen und auf dem Server oder der Hosting-Plattform Ihrer Wahl bereitstellen (je nach den Anforderungen Ihrer Plattform müssen Sie möglicherweise einige Konfigurationsänderungen vornehmen).

In dieser Serie werden wir keine Frontend-Frameworks verwenden, sondern nur Vanilla-Javascript, um den Schwerpunkt auf die Video-API selbst zu legen. Am Ende dieses Tutorials sollten Sie in der Lage sein, einen Audio-Video-Chat mit einem Freund zu starten, indem Sie einen Link mit ihm teilen.

Screenshot of video chat

Den gesamten Code für diese Anwendung finden Sie in diesem GitHub-Repository oder neu gemischt auf Glitch.

Voraussetzungen

Bevor wir beginnen, benötigen Sie ein Vonage Video API-Konto, das Sie kostenlos erstellen können hier. Sie benötigen außerdem Node.js installiert haben (wenn Sie nicht Glitch verwenden).

Ein API-Projekt erstellen

Nachdem Sie sich bei Ihrem Konto angemeldet haben, sehen Sie Ihre Dashboard-Oberfläche. Sie können ein neues Projekt erstellen, indem Sie Neues Projekt erstellen in der linken Seitenleiste wählen.

Es werden Ihnen 2 Optionen angeboten, einbetten oder API. Wählen Sie die API-Option, indem Sie auf die Schaltfläche Benutzerdefiniertes Projekt erstellen Schaltfläche.

Im nächsten Schritt werden Sie nach Ihrem Projektnamen und dem gewünschten Codec gefragt. Geben Sie Ihrem Projekt einen beliebigen Namen, und wählen Sie die vorgeschlagene Codec-Option VP8 vor. Einzelheiten über den Unterschied zwischen VP8 und H.264 finden Sie hier.

Sobald Ihr Projekt erstellt ist, haben Sie Zugriff auf Ihren API-Schlüssel und Ihr Geheimnis. Jedes Projekt hat seinen eigenen API-Schlüssel und sein eigenes Geheimnis.

Einrichten auf Glitch

Wenn Sie sich entschieden haben, Glitch nicht zu verwenden, können Sie diesen Teil überspringen und direkt zum Code-Walkthrough und zur Erklärung im nächsten Abschnitt übergehen.

Wählen Sie auf der Glitch-Startseite Neues Projekt in der oberen rechten Ecke der Seite und wählen Sie die Option hallo-express aus, wodurch Sie eine Node-Anwendung mit installiertem Express erhalten.

Glitch landing page

Sie können zusätzliche Bibliotheken über die Befehlszeile installieren, indem Sie die Konsole aufrufen. Klicken Sie auf die Option Werkzeuge unten in der linken Seitenleiste und klicken Sie dann auf Protokolle.

Screenshot showing the location of the Tools button

Installieren Sie das Vonage Video API Server SDK mit dem folgenden Befehl:

pnpm install opentok --save

Beachten Sie die Verwendung von pnpm anstelle von npm, der auf Glitch der bevorzugte Paketmanager ist. Er macht das Gleiche wie npm.

Screenshot of Glitch terminal after opentok is installed

Sobald das erledigt ist, löschen Sie die server.js Datei, um den unnötigen Platzhaltercode zu entfernen.

Screenshot of the server.js file on Glitch

Rufen Sie die Datei .env und fügen Sie Ihren API-Schlüssel und Ihr Geheimnis aus Ihrem Vonage Video API-Projekt hinzu.

Screenshot of the .env file on Glitch

Grundlegende Projektstruktur

So sieht die Ordnerstruktur aus, wenn du einen neuen Glitch startest hello-express Projekt startet:

Folder structure of the project

Unsere Anwendung besteht aus zwei Seiten: einer Landing Page, auf der die Benutzer eine Sitzung einrichten können (wir nennen sie "Raum", und spätere Teilnehmer können demselben "Raum" beitreten), und dann die eigentliche Videochatseite.

Fügen wir eine landing.html Datei in den Ordner views Ordner eine Datei hinzu, indem wir auf die Schaltfläche Neue Datei in der linken Seitenleiste klicken. Benennen Sie die Datei views/landing.html und fügen Sie das folgende Markup in die Seite ein. Die Seite wird ein einfaches Formularelement mit einer Eingabe enthalten, die es den Benutzern ermöglicht, einen Raumnamen einzugeben. Sie können das folgende Markup verwenden, wenn Sie Ihr eigenes nicht von Grund auf neu schreiben wollen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Basic Video Chat</title>
    <meta name="description" content="A basic audio-video chat application" />
    <link
      id="favicon"
      rel="icon"
      href="https://tokbox.com/developer/favicon.ico"
      type="image/x-icon"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/style.css" />
  </head>

  <body>
    <header>
      <h1>The most basic video chat</h1>
    </header>

    <main>
      <form id="registration" class="registration">
        <label>
          <span>Room</span>
          <input
            type="text"
            name="room-name"
            placeholder="Enter room name"
            required
          />
        </label>
        <button>Enter</button>
      </form>
    </main>
  </body>
</html>

Creating a new file in your Glitch project

Die Seite index.html Seite wird vorerst auch relativ spärlich sein, eine Seite mit zwei div Elementen, eines für den Abonnenten und eines für den Herausgeber. Was diese Begriffe bedeuten, werden wir im Abschnitt "Vonage Video API" dieses Tutorials erläutern.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Basic Video Chat</title>
    <meta name="description" content="A basic audio-video chat application" />
    <link
      id="favicon"
      rel="icon"
      href="https://tokbox.com/developer/favicon.ico"
      type="image/x-icon"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/style.css" />
  </head>

  <body>
    <header>
      <h1>The most basic video chat</h1>
    </header>

    <main>
      <div id="subscriber" class="subscriber"></div>
      <div id="publisher" class="publisher"></div>
    </main>
    
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

Für die server.js Datei entfernen wir den unnötigen Platzhaltercode. Es sollte etwas wie dieses übrig bleiben:

const express = require("express");
const app = express();

app.use(express.static("public"));

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

Zu guter Letzt sollten wir auch die vorhandenen Stile in der style.css Datei, damit wir sie durch unsere eigenen ersetzen können, sobald wir alles verkabelt haben.

Im Folgenden finden Sie einen allgemeinen Überblick darüber, wie die Vonage Video API funktioniert, um Menschen miteinander zu verbinden und ihnen einen Videochat zu ermöglichen:

• Schritt 1: Die Sitzung wird von Ihrem Anwendungsserver erstellt

• Schritt 2: Ein Client lädt die Anwendung und der Server erstellt ein Token

• Schritt 3: Der Client stellt eine Verbindung her und beginnt mit dem Streaming zur Sitzung

• Schritt 4: Ein neuer Client verbindet sich mit der Sitzung

• Schritt 5: Die Clients abonnieren die Streams der jeweils anderen

Eine vollständige Einführung mit animierten GIFs, die den gesamten Ablauf zeigen, finden Sie auf der Vonage Video API-Dokumentationsseite.

Initialisierung einer Sitzung

Wie eingangs erwähnt, heißt TokBox OpenTok jetzt Vonage Video API. Wir haben keine Änderungen an unseren Paketnamen vorgenommen, so dass Sie in Ihrem Code weiterhin auf OpenTok verweisen werden. Beginnen Sie mit der Instanziierung eines OpenTok-Objekts mit Ihrem API-Schlüssel und Geheimnis in der server.js Datei.

const OpenTok = require("opentok");
const OT = new OpenTok(process.env.API_KEY, process.env.API_SECRET);

Lassen Sie uns die Routen für unsere beiden Seiten so ändern, dass die Benutzer beim ersten Laden die Landing Page sehen, auf der sie einen Raumnamen eingeben können, um eine Sitzung zu starten. Sobald dies erfolgreich war, werden sie auf die Hauptseite der Anwendung weitergeleitet, auf der das Video gerendert wird.

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/landing.html");
});

app.get("/session/:room", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

In unserer landing.html Datei fügen wir einen Event-Handler für die Formularübermittlung hinzu, der POST den Raumnamen an unseren Server übermittelt. Da es sich um vier Zeilen Code handelt, fügen wir ihn als Skript-Tag unten auf der Seite ein.

const form = document.getElementById("registration");
form.addEventListener("submit", event => {
  event.preventDefault();
  location.pathname = `/session/${form.elements["room-name"].value}`;
});

Das bedeutet, dass wir die POST Route in der server.js Datei behandeln. Das folgende Stück Code ist ziemlich lang, daher sind Erklärungen als Kommentare im Code enthalten. Im Wesentlichen geht es darum, dass auf der Grundlage des auf der Landing Page eingegebenen Raumnamens geprüft wird, ob eine Sitzung vorhanden ist, oder bei Bedarf eine neue erstellt wird. Jede Sitzung hat eine eindeutige Sitzungs-ID, die es anderen Personen ermöglicht, der Sitzung beizutreten.

Dieser Code generiert dann die Anmeldedaten, die der Client benötigt, um eine Verbindung zur Sitzung herzustellen. Sie bestehen aus der Sitzungs-ID, einem Token und dem API-Schlüssel. Diese Anmeldeinformationen werden als Antwort an den Client zurückgegeben.

let sessions = {};

app.post("/session/:room", (request, response) => {
  const roomName = request.params.room;
  // Check if the session already exists
  if (sessions[roomName]) {
    // Generate the token
    generateToken(roomName, response);
  } else {
    // If the session does not exist, create one
    OT.createSession((error, session) => {
      if (error) {
        console.log("Error creating session:", error);
      } else {
        // Store the session in the sessions object
        sessions[roomName] = session.sessionId;
        // Generate the token
        generateToken(roomName, response);
      }
    });
  }
});

function generateToken(roomName, response) {
  // Configure token options
  const tokenOptions = {
    role: "publisher",
    data: `roomname=${roomName}`
  };
  // Generate token with the OpenTok SDK
  let token = OT.generateToken(
    sessions[roomName],
    tokenOptions
  );
  // Send the required credentials back to to the client
  // as a response from the fetch request
  response.status(200);
  response.send({
    sessionId: sessions[roomName],
    token: token,
    apiKey: process.env.API_KEY
  });
}

Verbinden mit der Sitzung, Abonnieren und Veröffentlichen

Auf der Client-Seite erstellen wir zunächst ein Sitzungsobjekt mit dem API-Schlüssel und der Sitzungs-ID aus der Antwort. Außerdem müssen wir ein Publisher-Objekt erstellen, das das div-Element mit dem id=publisher durch Ihren Video-Feed ersetzt.

Wir verbinden uns mit der Sitzung mit der session.connect() Methode, und wenn sie erfolgreich ist, veröffentlichen wir unseren Videostream mit der session.publish() Methode.

Wir werden auch auf das Ereignis streamCreated Ereignis, damit wir Benutzer abonnieren können, die der Sitzung beitreten, nachdem wir eine Verbindung zur Sitzung hergestellt haben.

// Create a session object with the session ID
const session = OT.initSession(apiKey, sessionId);

// Create a publisher
const publisher = OT.initPublisher(
  "publisher", // should match the ID of an element in your HTML
  {
    insertMode: "append",
    width: "100%",
    height: "100%"
  },
  handleCallback
);

// Connect to the session
session.connect(token, error => {
  // If the connection is successful, initialize the publisher and publish to the session
  if (error) {
    handleCallback(error);
  } else {
    session.publish(publisher, handleCallback);
  }
});

// Subscribe to a newly created stream
session.on("streamCreated", event => {
  session.subscribe(
    event.stream,
    "subscriber",
    {
      insertMode: "append",
      width: "100%",
      height: "100%"
    },
    handleCallback
  );
});

// Callback handler
function handleCallback(error) {
  if (error) {
    console.log("error: " + error.message);
  } else {
    console.log("callback success");
  }
}

Wenn das Formular für den Zimmernamen eingereicht wird, stellen wir eine POST Anfrage an die /session/:room Route und verwenden die Daten aus der Antwort, um die oben beschriebene Funktionalität auszuführen. Dazu verpacken wir das Ganze in eine Funktion namens initializeSession() wie folgt:

fetch(location.pathname, { method: "POST" })
  .then(res => {
    return res.json();
  })
  .then(res => {
    const apiKey = res.apiKey;
    const sessionId = res.sessionId;
    const token = res.token;
    initializeSession(apiKey, sessionId, token);
  })
  .catch(handleCallback);

function initializeSession(apiKey, sessionId, token) {
  // Create a session object with the sessionId
  const session = OT.initSession(apiKey, sessionId);

  // Create a publisher
  const publisher = OT.initPublisher(
    "publisher",
    {
      insertMode: "append",
      width: "100%",
      height: "100%"
    },
    handleCallback
  );

  // Connect to the session
  session.connect(token, error => {
    // If the connection is successful, initialize the publisher and publish to the session
    if (error) {
      handleCallback(error);
    } else {
      session.publish(publisher, handleCallback);
    }
  });

  // Subscribe to a newly created stream
  session.on("streamCreated", event => {
    session.subscribe(
      event.stream,
      "subscriber",
      {
        insertMode: "append",
        width: "100%",
        height: "100%"
      },
      handleCallback
    );
  });
}

Etwas Styling zum Aufräumen

Die allgemeine Funktionalität unseres Videochats ist fertig, so dass nur noch einige Stile hinzugefügt werden müssen, um das Layout anzupassen. Die ursprünglichen zwei div Elemente (für Teilnehmer und Herausgeber) werden durch ihre jeweiligen Video-Feeds ersetzt.

Markup when publisher is publishing to the session

Dies ist der einfachste Layout-Stil, bei dem Ihr Publisher-Videostream in der unteren linken Ecke der Seite angezeigt wird, während die anderen Teilnehmer des Streams den gesamten Hintergrund der Seite einnehmen.

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  text-align: center;
  padding: 0.5em;
}

main {
  flex: 1;
  display: flex;
  position: relative;
}

input,
button {
  font-size: inherit;
  padding: 0.5em;
}

.registration {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.registration input[type="text"] {
  display: block;
  margin-bottom: 1em;
}

.subscriber {
  width: 100%;
  height: 100%;
  display: flex;
}

.publisher {
  position: absolute;
  width: 25vmin;
  height: 25vmin;
  min-width: 8em;
  min-height: 8em;
  align-self: flex-end;
}

Mit diesen Stilen erhalten Sie den einfachsten Videochat mit dem einfachsten Layout, das Sie bereits zu Beginn dieses Lernprogramms gesehen haben.

Screenshot of landing page

Screenshot of video chat

Anschließend können Sie beliebige visuelle Gestaltungselemente wie Schriftarten, Farben und sogar Logobilder hinzufügen, um das Ganze zu verschönern.

Was kommt als Nächstes?

Es gibt noch weitere Funktionen, die wir mit der Vonage Video API aufbauen können und die in zukünftigen Tutorials behandelt werden, aber in der Zwischenzeit können Sie mehr auf unserer umfassenden Dokumentationsseite. Wenn Sie auf Probleme stoßen oder Fragen haben, wenden Sie sich an uns auf unserem Gemeinschaft Slack. Vielen Dank fürs Lesen!