Aufbau einer Basis-Videogesprächsplattform mit Netlify-Funktionen

Obwohl Sie mit der Vonage Video API mit sehr wenig Code beginnen können, benötigen Sie dennoch einen Server, um die Session- und Token-Generierung zu handhaben. Wenn Sie einen Server haben, auf dem Sie eine einfache Express.js-Anwendung hosten können, haben wir einen schönen Blogbeitrag über die Erstellung eines einfachen Videochats, aber nicht jeder hat einen.

Dies ist die Geburtsstunde der serverlosen Funktionen, die im Web gehostet werden und nur dann ausgeführt werden, wenn sie benötigt werden. Vorbei sind die Zeiten, in denen man für eine kleine Anwendung einen ganzen Server verwalten musste. Netlify bietet eine wunderbare, niedrige Barriere für die Erstellung und das Hosting von serverlosen Funktionen.

Um den Überblick über die Sitzungen in Ihrer Anwendung zu behalten, benötigen Sie auch eine gehostete Datenbank. FaunaDB hat eine ähnlich niedrige Einstiegshürde und wird in diesem Tutorial verwendet. Lassen Sie uns beginnen...

Der vollständige Code ist auf GitHub verfügbar unter https://github.com/nexmo-community/netlify-functions-video-conf

Voraussetzungen

• Node.js auf Ihrem Rechner installiert

• A Vonage Video-API-Konto

• A Fauna-Konto

• A Netlify-Konto

• A GitHub-Konto

Legen Sie ein neues Verzeichnis an und navigieren Sie mit Ihrem Terminal dorthin, dann erstellen Sie eine package.json Datei durch Eingabe von npm init -y. Sobald dies abgeschlossen ist, installieren Sie die Projektabhängigkeiten, indem Sie npm install encoding faunadb netlify-lambda opentok.

Ein Vonage Video-API-Projekt erstellen

Öffnen Sie Ihr Vonage Video-API-Dashboard und erstellen Sie ein neues API-Projekt. Sie können es beliebig nennen und den Codec als VP8 belassen.

Erstellen Sie eine Datei in Ihrem Projektverzeichnis mit dem Namen .env und fügen Sie darin Ihren API-Schlüssel und Ihr Geheimnis wie folgt ein:

VONAGE_KEY=YOUR_KEY
VONAGE_SECRET=YOUR_SECRET

Eine Netlify-Funktion lokal einrichten

Mit dem Paket netlify-lambda können Sie Netlify-Funktionen auf Ihrem eigenen Rechner ausführen. Um loszulegen, fügen Sie zwei Skripte zu package.json:

"netlify:serve": "netlify-lambda serve functions/src",
"netlify:build": "netlify-lambda build functions/src"

Erstellen Sie ein functions Verzeichnis und einen src Ordner darin. In dem src Ordner erstellen Sie eine hello.js Datei. Mit dieser grundlegenden Funktion können Sie testen, ob alles richtig eingerichtet ist.

Erstellen Sie eine netlify.toml Datei und fügen Sie darin die folgende Konfiguration ein:

[build]
  functions = "./functions/build"

Diese Konfiguration teilt Netlify mit, dass die von Ihnen erstellten Funktionen in dem Verzeichnis ./functions/build zu finden sind, das noch nicht existiert. Führen Sie npm run netlify:serve in Ihrem Terminal aus, und ein build Verzeichnis wird erscheinen. Die Dateien in diesem Verzeichnis werden automatisch generiert und aktualisiert, also halten Sie Ihre Änderungen in srcein, sonst werden sie möglicherweise überschrieben.

Fügen Sie Folgendes in Ihre hello.js Datei ein:

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Content-Type'
}
 exports.handler = async (event, context) => {
  try {
    return { headers, statusCode: 200, body: 'ok' }
  } catch(e) {
    console.error('Error', e)
    return { headers, statusCode: 500, body: 'Error: ' + e }
  }
}

Öffnen Sie ein neues Terminal und testen Sie Ihren Endpunkt, indem Sie curl http://localhost:9000/hello. Sie sollten eine Antwort von ok.

Einrichten einer Fauna-Datenbank

Jede Vonage-Videositzung hat eine Sitzungs-ID, die Sie speichern und später wieder abrufen können müssen. In dieser Anwendung werden sie auch einen Namen haben, den die Benutzer verwenden können, um auf die Sitzungen zu verweisen.

Melden Sie sich an Ihrer Fauna DB-Konsole und erstellen Sie eine neue Datenbank. In dieser Datenbank erstellen Sie eine neue Sammlung namens sessionsan, die Ihre Sitzungs-ID und Namen speichern wird.

Einen Datenbankindex erstellen

Indizes werden verwendet, um allgemeine Suchvorgänge in unserer Datenbank zu definieren. Klicken Sie auf . Indizes in der Seitenleiste und erstellen Sie einen neuen Index mit den folgenden Einstellungen:

• Quellensammlung: Sitzungen

• Index Name: sessions_by_name

• Begriffe: data.name

• Einzigartig: geprüft

Dieser Index ist nun vorhanden, um Sitzungen nach ihrem freundlichen Namen zu suchen, den Sie in einer Eigenschaft namens name.

Einen FaunaDB-Zugangsschlüssel erhalten

Zum Schreiben und Lesen von Daten in dieser Datenbank benötigen Sie einen Zugangsschlüssel. Klicken Sie auf . Sicherheit in der Seitenleiste und erstellen Sie einen neuen Schlüssel mit einer Administratorrolle. Kopieren Sie das Geheimnis des Schlüssels und fügen Sie die folgende Zeile am Ende Ihrer .env Datei hinzu:

FAUNA_SECRET=YOUR_SECRET

Erstellen und Speichern einer Videositzung

Kopieren Sie den gesamten Inhalt Ihrer Datei und fügen Sie ihn in eine neue hello.js Datei in eine neue session.js Datei im selben Verzeichnis ein. Fügen Sie ganz oben in der Datei Folgendes ein:

import dotenv from 'dotenv'
dotenv.config()
 import faunadb, { query as q } from 'faunadb'
const client = new faunadb.Client({ secret: process.env.FAUNA_SECRET })
 const OpenTok = require("opentok");
const OT = new OpenTok(process.env.VONAGE_KEY, process.env.VONAGE_SECRET);

Dies lädt Ihre .env Datei in die Anwendung, importiert und initialisiert die Clients FaunaDB und OpenTok (jetzt Vonage Video API).

Fügen Sie ganz unten in Ihrer Datei eine createSession Funktion:

const createSession = (name) => {
  return new Promise((resolve, reject) => {
    OT.createSession(async (error, session) => {
      try {
        if(error) { throw error }
         // Send document to FaunaDB
        const document = await client.query(
          q.Create(
            q.Collection('sessions'), 
            { data: { name, id: session.sessionId }}
          )
        )
        
        resolve(document)
      } catch(e) {
        reject(e)
      }
    })
  })
}

Diese Funktion nimmt einen freundlichen Sitzungsnamen, erstellt eine neue Sitzungs-ID über den Vonage Video API-Client und speichert sie in unserer Fauna-Datenbank.

Schließlich aktualisieren Sie den Inhalt des exports.handler try-Block zu folgendem:

if (event.httpMethod == 'OPTIONS') {
  return { 
    headers: { ...headers, 'Allow': 'POST' }, 
    statusCode: 204 
  }
}
 const { name } = JSON.parse(event.body)
const document = await createSession(name)
 return { 
  headers, 
  statusCode: 200, 
  body: JSON.stringify(document) 
}

Wenn Sie eine Anfrage von einer Anwendung auslösen, sendet diese möglicherweise eine OPTIONS-HTTP-Anfrage, um zu fragen, welche Methoden erlaubt sind. Wenn dies der Fall ist, geben Sie einen zusätzlichen Allow Kopfzeile zurück. Durch die Rückgabe wird der Rest des Codes übersprungen.

Sobald unsere Hauptanfrage gesendet wurde, erhalten Sie den vom Client gesendeten Namenswert und erstellen eine neue Sitzung. Da der Textkörper in der Antwort eine Zeichenkette sein muss, wird das zurückgegebene Dokument in eine Zeichenkette umgewandelt und an den Benutzer zurückgegeben.

Probieren Sie es aus! Starten Sie Ihre netlify-lambda-Anwendung neu, öffnen Sie Ihr Terminal, und führen Sie diesen Befehl aus:

curl --header "Content-Type: application/json" --request POST --data '{"name": "kevins-call"}' http://localhost:9000/session

Die Antwort sollte ein vollständiges Dokument aus FaunaDB sein. In Ihrer FaunaDB-Konsole sollten Sie nun Ihr gespeichertes Dokument sehen.

Showing a new entry in the FaunaDB Console

Versuchen Sie, den curl-Befehl erneut auszuführen, und stellen Sie fest, dass ein Fehler auftritt, da es nicht zwei Elemente mit demselben Namen geben kann (basierend auf unserer Eindeutigkeitsbeschränkung, die der Sammlung durch den Index auferlegt wurde).

Nach einer bestehenden Sitzung suchen

Wenn ein Benutzer den Namen einer bestehenden Sitzung eingibt, sollte die Anwendung stattdessen das Dokument zurückgeben, anstatt zu versuchen, eine neue Sitzung zu erstellen. Wenn bei jeder Verbindung neue Sitzungen erstellt werden, landet jeder Benutzer in einer Ein-Personen-Sitzung, was nicht sehr sozial ist.

Ersetzen Sie diese Zeile:

const document = await createSession(name)

Mit diesem Schnipsel:

const doesSessionExist = await client.query(
  q.Exists(q.Match(q.Index('sessions_by_name'), name))
)
 let document
if(doesSessionExist) {
  document = await client.query(
    q.Get(q.Match(q.Index('sessions_by_name'), name))
  )
} else {
  document = await createSession(name)
}

Der erste Schritt besteht darin, zu prüfen, ob ein Dokument mit dem aktuellen Namen existiert. Die Verwendung von FaunaDBs q.Exists() Methode mit dem zuvor erstellten Index führt entweder zu einem true oder false Wert, der in doesSessionExist.

Wenn die Sitzung vorhanden ist, holen Sie das Dokument. Ist dies nicht der Fall, erstellen Sie eines. Am Ende dieses Schnipsels enthält die Variable document Variable ein Dokument enthalten.

Ein Token generieren

Damit sich Benutzer bei der Verbindung zu einer Vonage-Videositzung authentifizieren können, müssen sie von unserem Endpunkt ein Token erhalten.

Unterhalb des Codes, den Sie gerade geschrieben haben, und oberhalb der Rückgabeanweisung generieren Sie ein Token mit dem Vonage Video API-Client:

const token = OT.generateToken(document.data.id, {
  role: 'publisher',
  data: `roomname=${document.data.name}`
})

Der erste Parameter ist eine Sitzungs-ID, der zweite Parameter enthält Optionen für dieses Token. Es gibt drei unterstützte Rollen: Abonnent (kann nur die Streams anderer Personen abonnieren), Herausgeber (kann veröffentlichen und abonnieren) und Moderator (Herausgeber und kann andere Clients zwingen, die Verbindung zu trennen).

Jeder wird ein Herausgeber für diese Anwendung sein. Sie können jedoch später eine Möglichkeit zur Unterscheidung von Benutzerrollen hinzufügen. Die zweite Option enthält den Raumnamen, der in der Datenbank mit der zugehörigen Sitzungs-ID gespeichert wird.

Daten an den Kunden zurücksenden

Der Endpunkt muss drei Informationen an das Frontend zurückgeben - eine Sitzungs-ID, ein Token und unseren Vonage Video-API-Schlüssel. Ersetzen Sie Ihre Rückgabeanweisung, um alle diese Elemente einzuschließen:

return { 
  headers, 
  statusCode: 200, 
  body: JSON.stringify({
    token: token,
    sessionId: document.data.id,
    apiKey: process.env.VONAGE_KEY
  }) 
}

Versuchen Sie Ihren Endpunkt erneut mit einem neuen und einem bestehenden Sitzungsnamen. Die Antwort sollte alle drei Eigenschaften enthalten! Das bedeutet, dass der Endpunkt korrekt funktioniert, und Sie können mit der Erstellung eines einfachen Frontends fortfahren, um ihn zu nutzen.

Frontend erstellen

Erstellen Sie eine index.html Datei im Hauptverzeichnis Ihres Projekts. Da der Frontend-Client minimal sein wird, wird Ihr gesamter Code in dieser einen Datei stehen. Schreiben Sie das erforderliche HTML:

<html>
  <head></head>
  <body>
    <form id="registration">
      <input type="text" name="name" placeholder="Enter room name" required />
      <button>Enter</button>
    </form>

     <div id="call">
      <div id="subscriber" class="subscriber"></div>
      <div id="publisher" class="publisher"></div>
    </div>

     <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

     <script>
      // Other logic will go here
    </script>
  </body>
</html>

Wenn die Schaltfläche gedrückt wird, übermitteln Sie eine Anfrage an den Endpunkt und überprüfen Sie, ob die Daten korrekt zurückgegeben werden. Innerhalb des leeren <script> Tags:

const form = document.getElementById("registration")
 form.addEventListener("submit", event => {
  event.preventDefault()
  form.style.display = "none"
   fetch("http://localhost:9000/session", { 
    method: "POST",
    body: JSON.stringify({ name: form.elements.name.value })
  }).then(res => {
    return res.json();
  }).then(res => {
    console.log(res);
  }).catch(handleCallback);
})
 function handleCallback(error) {
  if (error) {
    console.log("error: " + error.message);
  } else {
    console.log("callback success");
  }
}

Ihre Browserkonsole sollte wie folgt aussehen:

Showing the correct data being returned on the frontend

Da das Frontend nun über alle erforderlichen Daten verfügt, können Sie die Sitzung in Ihrem Browser initialisieren, einen neuen Publisher erstellen und ihn in der Sitzung veröffentlichen. Ersetzen Sie console.log(res); durch den folgenden Text:

const { apiKey, sessionId, token } = res;
 const session = OT.initSession(apiKey, sessionId);
 const publisher = OT.initPublisher(
  "publisher",
  { insertMode: "append", width: "100%", height: "100%" },
  handleCallback
);
 session.connect(token, error => {
  if (error) {
    handleCallback(error);
  } else {
    session.publish(publisher, handleCallback);
  }
});
 session.on("streamCreated", event => {
  session.subscribe(
    event.stream,
    "subscriber",
    { insertMode: "append", width: "100%", height: "100%" },
    handleCallback
  );
});

Die "publisher" und "subscriber" Parameter beziehen sich auf die HTML id Werte in den Elementen, die die Videostreams enthalten werden.

Öffnen Sie index.html in Ihrem Browser, geben Sie einen Raumnamen ein und klicken Sie auf die Schaltfläche. Nachdem Sie der Seite die Erlaubnis erteilt haben, auf Ihr Mikrofon und Ihre Kamera zuzugreifen, sollte ein Video-Stream (Publisher) erscheinen.

Gastgeber auf Netlify

Erstellen Sie eine .gitignore Datei in Ihrem Projektverzeichnis und fügen Sie den folgenden Code darin ein, um zu verhindern, dass diese Dateien und Verzeichnisse in einen öffentlichen Bereich verschoben werden.

node_modules
functions/build
.env

Erstellen Sie ein neues GitHub-Repository und befolgen Sie die Schritte zum Erstellen eines neuen Repositorys auf der Kommandozeile".

Sobald Sie fertig sind, gehen Sie zu Ihrem Netlify-Konto und klicken Sie auf Neue Website aus Git. Wählen Sie Ihr GitHub-Repository und geben Sie den Befehl Build npm run netlify:build.

Gehen Sie zum Abschnitt Umgebungsvariablen in den Build- und Deploy-Einstellungen für dieses Projekt. Geben Sie Ihre drei Umgebungsvariablen aus Ihrer lokalen .env Datei ein.

Der letzte Schritt besteht darin, dass Sie Ihre gehostete Netlify-Funktion in Ihrem Frontend-Client referenzieren, wenn Sie online hosten, und Ihre Localhost-URL, wenn Sie offline sind.

Suchen Sie diese Zeile in index.html:

fetch("http://localhost:9000/session", {

Ersetzen Sie ihn durch den folgenden Text:

let url;
  if(location.hostname == 'localhost' || location.hostname == "127.0.0.1") {
    url = "http://localhost:9000/session"
  }  else {
    url = "YOUR_NETLIFY_URL/.netlify/functions/session"
  }
   fetch(url, {

Erstellen Sie einen neuen Commit auf GitHub, und Ihre Netlify-Funktion sollte neu bereitgestellt werden. Sobald dies geschehen ist, besuchen Sie Ihre Netlify-URL und probieren Sie es aus!

Wie geht es weiter?

Diese Anwendung funktioniert wirklich gut, aber sie sieht nicht besonders schön aus. Sie können sich an unserem Express.js Anleitung. Andere Einträge in dieser Reihe behandeln das Hinzufügen von Text-Chat, das Teilen Ihres Bildschirms oder die Verwendung der anderen bereitgestellten Rollen als Teil der Vonage Video API. Denken Sie daran - für jeden Endpunkt, der in diesen Tutorials existiert, sollten Sie eine neue serverlose Funktion im functions/src Verzeichnis erstellen.

Der fertige Code für dieses Projekt ist auch auf GitHub.

Weitere Informationen über die Vonage Video API finden Sie in unsere Dokumentationlesen, und wenn Sie zusätzliche Unterstützung benötigen, können Sie sich gerne an unser Team wenden. Vonage Entwickler Twitter-Konto oder den Vonage Gemeinschaft Slack.