Implementierung von Vonage Video auf Appwrite Cloud

Voraussetzungen

Wir werden eine Demo-Anwendung erstellen, die zeigt, wie unsere Vonage Video-Plattform mit Appwrite Cloud als Backend-Service genutzt werden kann.

• A Vonage Video API-Konto. Wir werden es verwenden, um den Videoteil des Backends einzurichten.

• Ein Appwrite Cloud-Konto. Wir werden Appwrite verwenden, um die Backend-Teile unserer Anwendung zu verwalten.

• Das Appwrite CLI-Werkzeug. Wir werden es verwenden, um verschiedene Teile unseres Projekts einzurichten.

• A ngrok-Konto. Damit können wir auf unsere Video-App auf vielen Geräten zugreifen.

• Die Demo-Anwendung ist auf GitHub verfügbar.

Was ist Appwrite Cloud?

Appwrite Appwrite beschreibt sich selbst als "eine Backend-Plattform für die Entwicklung von Web-, Mobile- und Flutter-Anwendungen". Ursprünglich wurde dies als Docker-Container angeboten, den ein Entwickler auf seinen Servern ausführen konnte und der verschiedene Dienste bereitstellte. In Verbindung mit den SDKs standen Entwicklern Benutzerauthentifizierung, eine NoSQL-Datenbank, Dateispeicher, serverlose Funktionen, eine Echtzeit-Datenbank und integrierte Sicherheit für ihr Anwendungs-Backend zur Verfügung.

Appwrite Cloud ist eine gehostete Lösung für Entwickler, die diese Funktionen nutzen möchten, aber den Prozess der lokalen Ausführung von Appwrite vermeiden wollen. Ein Entwickler kann dann sofort loslegen, indem er Appwrite Cloud einige Fragen wie "Wie handhaben wir Benutzeranmeldungen?" oder "Wo kann ich eine Datenbank einrichten?" überlässt. Über ein Dashboard können Sie die Daten für Ihre Anwendung einrichten, und Sie können sofort mit dem Schreiben Ihrer Anwendung beginnen.

Mit Appwrite Cloud muss der Entwickler auch keinen Server mehr einrichten und verwalten, auf dem die Appwrite-Software läuft. In den frühen Tagen der Anwendungsentwicklung, insbesondere auf der Proof-of-Concept-Ebene, ist die Konzentration auf die Lösung des vorliegenden Problems viel wichtiger als alle verfügbaren DevOps- oder Hosting-Optionen. Ein einziges Dashboard und ein System, das die Authentifizierung, die Daten und einige grundlegende Code-Implementierungen handhabt, beschleunigen den Entwicklungsprozess.

Einer der größten Vorteile von Appwrite ist die große Vielfalt der unterstützten Sprachen. Ihr serverloses System kann mit Node, Ruby, PHP, Python und Kotlin arbeiten. Mit Ausnahme von .NET können Sie mit den APIs von Vonage arbeiten, indem Sie unsere bestehenden SDKs verwenden. Dies hilft, die Leistungsfähigkeit von Appwrite Cloud mit den APIs von Vonage zu verbinden. Da Appwrite so konzipiert ist, dass es mit Ihrer Anwendung mitwächst, können Sie sicher sein, dass Sie von der Entwicklung zur Produktion übergehen können, ohne etwas auszutauschen.

Der einzige Nachteil von Appwrite ist, dass es keine Hosting-Lösung außerhalb der serverlosen Funktionen für Webanwendungen enthält. Dies bedeutet, dass Sie einen Dienst benötigen, um Ihre statischen HTML-Dateien oder Ihren Frontend-Code zu hosten, um Kunden zu bedienen. Obwohl sie jeden Host unterstützen können, empfehlen sie Vercel, Netlify .oder Gitpod während der Einrichtung der Anwendung. Wenn Sie eine mobile Anwendung erstellen, die auf einem Gerät läuft, können Sie auf die Backends zugreifen.

Appwrite Cloud einrichten

Loggen Sie sich in das Appwrite Cloud Dashboard ein. Sie werden dann ein neues Projekt einrichten, das eine Sammlung von Einstellungen und Daten für einzelne Projekte ist. Klicken Sie auf Erstellen Sie ein neues Projekt und geben Sie ihm einen Namen. Wir nennen unser Projekt "Vonage Video Demo" und klicken auf Erstellen sobald Sie einen Namen eingegeben haben.

Appwrite Cloud Dashboard

Sie können eine Appwrite-Anwendung auf verschiedene Arten einrichten, aber da wir die Vorteile des Authentifizierungsmechanismus von Appwrite Cloud nutzen wollen, wählen wir Web-Anwendung. So können wir das Web SDK und Appwrite Cloud direkt von einer Webseite aus aufrufen, anstatt uns auf einen Back-End-Webserver zu verlassen.

Adding the Web Platform

Anschließend müssen wir unserer Anwendung einen Namen und einen Domänennamen geben, von dem aus Anfragen gestellt werden können. Für die Demo geben Sie "Vonage Client App" und dann ein Sternchen ("*") für die Domain ein. In einer produktiven Anwendung würden Sie dies auf die Domäne setzen, von der aus Ihr JavaScript aufgerufen wird, aber für Demozwecke werden wir alle Domänen zulassen. So können wir lokal und später mit ngrok testen.

Registering a New Web App

Klicken Sie auf Nächsteund dann auf Überspringen Sie optionale Schritte. Alle Appwrite-Abhängigkeiten sind bereits in der Demo-Anwendung eingerichtet, aber diese Seite zeigt Ihnen die Pakete, die in einer Node.js-Anwendung installiert werden müssen. Wir sind mit dem Einrichten der Anwendung fertig, also klicken Sie auf einen der letzten Weiter Schaltflächen, bis Sie zum Dashboard gelangen.

Appwrite Project Dashboard

Benutzerauthentifizierung mit Appwrite Cloud Authentication

Appwrite erlaubt eine Vielzahl von integrierten Authentifizierungsmechanismen. Entwickler haben die Wahl zwischen einer einfachen Überprüfung mit Benutzername und Passwort, die wir verwenden werden, und verschiedenen externen OAuth-Anbietern wie Discord, Apple und Google. Unsere Benutzer melden sich mit einem Benutzernamen und einem Passwort an, um sich zu authentifizieren. Da Appwrite jedoch viele OAuth-Anbieter unterstützt, können Sie die Authentifizierung mit Benutzername und Kennwort durch einen völlig anderen Dienst ersetzen.

Klicken Sie in Ihrem Appwrite Dashboard auf Autorisierung im linken Navigationsmenü, und gehen Sie dann zu Einstellungen. Schalten Sie alles außer "E-Mail/Passwort" und "JWT" aus. Sie können sie später jederzeit wieder einschalten.

Appwrite Auth Settings

Wir können zwar über das Appwrite SDK programmatisch Benutzer erstellen, aber wir werden zunächst einen Benutzer über die Benutzeroberfläche erstellen. Klicken Sie auf Benutzerund dann auf + Benutzer erstellen. Geben Sie zunächst die Optionen Name, E-Mail, Telefon und Passwort ein. Klicken Sie auf die Schaltfläche Erstellen Schaltfläche, um den Benutzer zu speichern.

Creating an Appwrite User

In unserer Webanwendung können wir verhindern, dass Benutzer auf das eigentliche Meeting zugreifen können, indem wir sicherstellen, dass sie sich über Appwrite angemeldet haben. Mit dem Appwrite Web SDK können Sie die Anmeldedaten eines Benutzers aus einem Formular übernehmen und eine neue Anmeldesitzung erstellen. Wir verwenden dann ein Paket namens zustanddas unsere Benutzerinformationen von Seite zu Seite beibehält.

const userStore = (set: any, get: any) => ({
	user: null,
	isLoggedIn: false,
	login: async (email: string, password: string) => {
		await account.createEmailSession(email, password)
			.then((resp: any) => {
				set(() => ({ user: resp, isLoggedIn: true}));
		})
	},
	logout: async () => {
		await account.deleteSession('current')
			.then(() => {
				set(() => ({ user: null, isLoggedIn: false}));
		})
	},
})

Der Hook hat eine Login- und Logout-Methode, die mit Appwrite kommuniziert, wenn wir uns anmelden. Unser Formular in der Login Komponente wird einen Handler aufrufen, der die userStore.login() Methode aufruft, um den Benutzer einzuloggen.

Wir werden die Routen in unserer Anwendung mit Hilfe der RequireAuth Komponente. Diese Komponente prüft, ob der Benutzer angemeldet ist, und wenn nicht, leitet sie ihn zur Anmeldeseite zurück.

import { Navigate } from "react-router-dom";
import { useUserStore } from "../hooks/userStore";

export default function RequireAuth({ children }) {
	const isLoggedIn = useUserStore((state) => state.isLoggedIn);
	return isLoggedIn === true ? children : <Navigate to="/login" replace />
}

Damit können wir jede Komponente in diese RequireAuth Komponente einschließen, um sicherzustellen, dass sich die Nutzer anmelden, bevor sie auf die Besprechung zugreifen können!

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route path="/" element={<Root />}>
			<Route index element={<RequireAuth><Home /></RequireAuth>}></Route>
			<Route path="/login" element={<Login />}></Route>
			<Route path="/logout" element={<Logout />}></Route>
		</Route>
	)
)

function App() {
	return (
		<RouterProvider router={router}></RouterProvider>
	)
}

Verwendung der Appwrite-Datenbank für unser Backend

Appwrite Cloud ermöglicht den Zugriff auf eine dokumentenbasierte NoSQL-Datenbank. Wir werden diese verwenden, um Informationen über die Videositzung zu speichern, die wir erstellen werden, um die richtigen Anmeldeinformationen zu generieren, wenn sich ein Benutzer anmeldet.

Mit Appwrite Cloud können Sie Datenbanken und Sammlungen über die Web-UI oder das CLI-Tool erstellen. Lassen Sie uns das Datenbank- und Sammlungsschema über die Kommandozeile erstellen, um die Dinge zu beschleunigen.

Wir können mit dem appwrite databases create Befehl eine neue Datenbank erstellen. Wir werden ihr eine leicht zu merkende ID und einen Namen geben:

Als nächstes müssen wir eine Sammlung in der Datenbank definieren. Sammlungen sind wie eine Datenbanktabelle in einer relationalen Datenbank. Für die Sammlung wird ein Schema definiert, und jedes Dokument (wie eine Zeile in einer relationalen Datenbank) wird die folgenden Informationen enthalten. Vorerst werden wir die Sitzungs-ID speichern, die uns die Tokbox-Plattform zurückgibt, und sie als Feld mit dem Namen "session_id" speichern.

Wir verwenden den appwrite databases createCollection eine neue Sammlung mit dem Namen "video-demo" und definieren dann ein einziges Attribut (oder Feld) namens "session_id", das die Dokumente haben müssen:

Wir werden die Datenbank verwenden, wenn jemand Anmeldeinformationen für die Videositzung erstellen möchte. Hier ist nichts Besonderes zu beachten, da die Appwrite-SDKs den Zugriff auf die Datenbank verwalten und Schnittstellen in verschiedenen Sprachen bereitstellen. In unserem Fall suchen wir nach einem Dokument, in dem die ID der Videositzung gespeichert ist, und erstellen ein neues Dokument, wenn es nicht vorhanden ist.

try {
	$document = $appwriteDatabases->getDocument('video-demo', 'sessions', 'video-session');
} catch (AppwriteException $e) {
	$session = $opentok->createSession();
	$document = ['session_id' => $session->getSessionId()];
	
	$appwriteDatabases->createDocument('video-demo', 'sessions', 'video-session', $document);
}

Die vollständige Dokumentation zur Verwendung der Appwrite-Datenbank über die SDKs finden Sie unter https://appwrite.io/docs/getting-started-for-server.

Appwrite-Funktionen

Da sich unser Frontend um die Anzeige eines Videokonferenzraums kümmert, brauchen wir eine Logik, die im Hintergrund läuft. Appwrite ermöglicht Funktionen, die in verschiedenen Sprachen eingesetzt werden, um geplante oder Ad-hoc-Aufgaben zu erledigen. Wir werden die Funktionsfähigkeit nutzen, um Anmeldeinformationen für unsere Videositzung zu generieren.

Bisher haben wir die Web-GUI zur Konfiguration des Projekts und die Appwrite-CLI zur Konfiguration der Datenbank verwendet. Wir können auch eine Konfigurationsdatei mit all unseren Einstellungen erzeugen, die den Namen appwrite.json. Wenn Sie die Demo-Anwendung verwenden, kopieren Sie appwrite.json.dist nach appwrite.jsonund Sie können sie für die Bereitstellung des Backend-Codes verwenden.

Ein Vorteil der Verwendung von appwrite.json und der Appwrite CLI ist die Möglichkeit, viele Dinge gleichzeitig einzusetzen. Da wir drei Funktionen haben, können wir die Appwrite CLI verwenden, um sie wie in der Konfigurationsdatei definiert einzusetzen.

Wenn Sie die Seite appwrite.jsonöffnen, finden Sie einen Abschnitt "Funktionen". Wir definieren ein Objekt, das alle Informationen über unsere Funktion enthält. Da unser Backend von unserem Frontend entkoppelt ist, habe ich mich entschieden, die Funktionen in PHP statt in Nodejs zu schreiben. Sie können eine Vielzahl von Sprachen verwenden Sprachen verwenden, die Appwrite unterstützt, darunter Python, .NET und sogar Deno.

In der Funktionskonfiguration werden die Laufzeiten, der Pfad zum Code, alle Dateien, die wir ignorieren wollen, die Berechtigungen für die Ausführung der Überprüfungen und vieles mehr festgelegt. Wir geben auch eine Liste von Variablen an, die an die Funktion übergeben werden müssen, damit sie funktioniert, z. B. unseren Vonage-API-Schlüssel und -Geheimnis. Füllen Sie die Variablen mit Ihren Kontoinformationen aus.

Wir können die Funktion mit einem einzigen Aufruf einsetzen:

Unser Code wird gebündelt und auf die Server von Appwrite übertragen und steht nach wenigen Sekunden zur Verfügung.

Sie können sich den Beispielcode für die Funktionen im Ordner functions/ Ordner. Für die Funktion credentials suchen wir nach einer vorhandenen Videositzung in der video-demo.sessions Sammlung. Falls keine vorhanden ist, erstellen wir eine neue Videositzung mit dem OpenTok PHP SDK und speichern sie in der Sammlung. Anschließend geben wir die ID der Videositzung, den Video-API-Schlüssel und ein generiertes Client-seitiges Token zurück.

Nebenbei bemerkt, liefert unsere Demo-Anwendung auch unsere Datenbankinformationen als Teil der Konfiguration. Sie können sie wie unsere Funktionen mit dem Appwrite CLI bereitstellen:

Vonage Video Experience Composer

Nachdem wir uns nun bei unserer Anwendung anmelden können, sollten wir das Frontend für die Videokonferenz erstellen. Vonage bietet drei Stufen der Video-API, mit denen Sie entscheiden können, wie viel Kontrolle Sie über das endgültige Videoprodukt haben möchten.

• Vonage Video-API - Ein anpassbares Erlebnis auf niedriger Ebene, bei dem Sie alles selbst steuern

• Vonage Video Express - Sie kümmern sich um das Layout, wir um die Best Practices

• Vonage-Besprechungen - Wir regeln alles. Sie besuchen eine Website als Gastgeber oder Gast

Wir benötigen eine bereits erstellte Videobewerbung. Loggen Sie sich in Ihr Videokonto ein unter https://tokbox.com/account. Klicken Sie im Dashboard auf "Projekte" und dann auf "Neues Projekt erstellen". Da es sich nicht um ein eingebettetes Projekt handelt, klicken Sie auf "Benutzerdefiniertes Projekt erstellen". Geben Sie als Namen "Vonage Appwrite Demo" ein und klicken Sie auf "Erstellen". Sie erhalten einen API-Schlüssel und ein Geheimnis, die Sie in Ihre appwrite.json Datei ein und stellen Sie die Funktion mit den aktualisierten Anmeldedaten bereit.

Für diese Demo verwenden wir den Vonage Video Express. Dies reduziert die Menge an Code, die wir unserer Anwendung hinzufügen müssen, um den Raum zu erstellen und zu pflegen, im Vergleich zur vollständigen Video-API, ermöglicht uns aber dennoch, das Layout des Raums zu steuern.

import { useEffect, useRef } from "react";
import { functions } from "../appwrite/config";
import { Room, getDevices } from "@vonage/video-express"
  
const Home = () => {
	let room = useRef(null)
	const getCredentials = async () => {
		const execution = await functions.createExecution('generate-creds')
		const log = await functions.getExecution('generate-creds', execution['$id'])
		return JSON.parse(log.response);
	}

	useEffect(() => {
		const boot = async () => {
			const creds = await getCredentials();
			room.current = new Room({
				apiKey: creds.apiKey,
				sessionId: creds.session_id,
				token: creds.token,
				roomContainer: 'roomContainer'
			});
			room.current.join()
		}
		boot();
	})

return (
	<>
		<div className="grid grid-cols-1 gap-4" id="roomContainer"></div>
		<button onClick={cycleVideo} className="btn btn-primary">Cycle Video</button>
	</>
	)
}

export default Home

Video Express übernimmt das Einrichten der eigentlichen Layout-Divs und des Codes für uns, daher müssen wir einen Container für den Raum erstellen. Unsere Komponente gibt einen <div> namens "roomContainer" zurück, den wir als roomContainer Schlüssel für den von uns erstellten Raum übergeben.

Wir benötigen einige gültige Anmeldeinformationen für unsere Anwendung. Vonage Video benötigt einen API-Schlüssel für unser Backend-Projekt, eine Sitzungs-ID für die Verbindung und ein spezielles Verbindungs-Token, das als unsere Anmeldeinformationen dient. Wir können den functions Export aus unserem Appwrite-Konfigurationsobjekt verwenden, um eine neue "Ausführung" unserer Funktion zu erzeugen. Anschließend lesen wir die Antwort, die alle notwendigen Verbindungsinformationen enthält, und übergeben sie an das Raumobjekt.

Wenn wir nun unsere Anwendung ausführen und zwei Personen sich anmelden (oder, in meinem Fall, sich mit demselben Konto in zwei Browsern anmelden), haben wir zwei Personen in einer Videokonferenz!

The Video Conference

Nächste Schritte

Diese Demo zeigt einen Teil der Funktionen von Appwrite. Sie können den Democode erweitern, um verschiedene Anmeldemethoden zu verwenden, viele Räume zu unterstützen und sogar Dateien mit dem Speicherdienst von Appwrite zu hosten und zu verteilen. Wenn Sie mehr Kontrolle über die Videoausgabe haben möchten, tauschen Sie Video Express gegen die APIs auf niedrigerer Ebene aus, oder spielen Sie mit dem CSS, um die visuellen Teile zu ändern.

Werfen Sie einen Blick auf Appwrite und sehen Sie, ob es Ihnen hilft, Ihre Entwicklung zu beschleunigen, und lassen Sie uns wissen, welche coolen Dinge Sie mit Appwrite und den Vonage Kommunikations-APIs bauen.