Videoanrufe für eine Next.js Applikation mit Vonage Video API aktivieren

Einführung

Eine der effektivsten Möglichkeiten, die Nutzererfahrung zu verbessern, ist die Aktivierung der Live-Videoanrufunterstützung für Ihre Anwendung, so dass Ihre Nutzer jederzeit per Videoanruf Unterstützung für ihre Probleme erhalten können. Das Hinzufügen von Videoanrufunterstützung für Ihre Anwendung ist jedoch mit Arbeit verbunden, da Sie sowohl den Server- als auch den Client-Support für die Interaktion mit dem Videoanruf verwalten müssen. Darüber hinaus ist die Skalierung der Videounterstützung für Tausende von Nutzern mit viel Arbeit verbunden. Verstehen Sie die Probleme und Schwierigkeiten beim Hinzufügen von Video-Unterstützung zu Ihrer Anwendung, Vonage Video API geboren.

In diesem Artikel erfahren Sie, wie Sie Videoanrufe für eine Next.js-Demoanwendung aktivieren können, indem Sie nur ein paar Zeilen Code mit der Vonage Video API hinzufügen.

Über Next.js Framework

Next.js ist ein Open-Source-Framework für die Entwicklung von Full-Stack Web Applications auf Basis der React-Bibliothek. Es ist ein robustes Framework, das die Vorteile von React mit serverseitigem Rendering und statischer Seitengenerierung kombiniert. Darüber hinaus bietet Next.js Funktionen und Konventionen, die es Ihnen ermöglichen, die Anwendung schnell und mit ausgezeichneter Entwicklererfahrung zu erstellen.

Über die Demo-App

Lassen Sie uns eine Demo-Anwendung erstellen, um zu verstehen und praktisch zu üben, wie man Videoanrufe in eine Next.js-Anwendung einbindet.

Sie werden eine Therapieanwendung erstellen, die es den Nutzern ermöglicht, ein Videogespräch mit einem Therapeuten ihrer Wahl zu vereinbaren und zu führen. Die Unterstützung von Videoanrufen ist eine hervorragende Funktion für Nutzer, die oft Probleme haben, mit anderen zu kommunizieren und zu interagieren. Jetzt können sie an der Therapiesitzung von zu Hause aus zu ihrer bevorzugten Zeit teilnehmen.

HAFTUNGSAUSSCHLUSS: Diese Anwendung ist nur für Übungszwecke gedacht. In Notfällen sollten Sie Ihren Arzt aufsuchen.

Voraussetzungen

Um die Demoanwendung zu erstellen, müssen Sie die folgenden Voraussetzungen schaffen.

• Eine Node.js-Umgebung mit Version 12.8 oder höher gemäß den Next.js Anforderungen.

• A Git-Befehlszeilenumgebung zum Klonen des Anwendungscodes aus einem GitHub-Repository

• Sie haben einen Account auf der Vonage Video-Plattform damit Sie ein neues Video API-Projekt erstellen können, um die Video-Unterstützung schnell in Ihre Next.js-App zu integrieren.

• Haben Sie einen Account bei Vonage Entwickler Dashboard um die SMS API zum Versenden von Nachrichten innerhalb der Demo-Anwendung zu nutzen.

Nachdem Sie nun all diese Voraussetzungen vorbereitet haben, können Sie die Next.js-Anwendung erstellen.

Schritt 1: Klonen des Anwendungscodes

Da Sie für die Anwendung mehrere Verzeichnisse und Dateien erstellen müssen, um die Anwendungslogik und die Benutzeroberfläche zu implementieren, klonen wir den vorhandenen Anwendungscode aus diesem GitHub-Repository. Öffnen Sie Ihr Terminal, erstellen Sie ein neues Verzeichnis Projects und klonen Sie den Anwendungscode in dieses Verzeichnis.

Wechseln Sie das aktuelle Verzeichnis in vonage-therapist-video-embed Verzeichnis.

Sie sollten die folgenden Verzeichnisse und Dateien sehen, die unten aufgeführt sind:

Code Project Structure

Schauen wir uns an, was sie sind.

Schritt 2: Verstehen Sie die Dateistruktur.

Im Next.js-Anwendungsprojekt müssen Sie neben den regulären Dateien für die Node.js-Umgebung, wie z.B. package.json oder package-lock.json, im Stammverzeichnis.

1. next.config.js Datei:

Diese Datei definiert die allgemeine Konfiguration für die Next.js-Anwendung. Sie können beispielsweise den Bildpfad Ihrer Anwendung festlegen. Wenn Bilder nicht mit diesen Pfaden übereinstimmen, wird Next.js eine Fehlermeldung ausgeben.

/** @type {import('next').NextConfig} */

const nextConfig = {
  …
  images: {
	domains: ['images.unsplash.com',],
  },
};

module.exports = nextConfig;

1. pages Verzeichnis:

Das Verzeichnis pages Verzeichnis implementiert:

• Anwendungs-APIs innerhalb des api Unterverzeichnis. Diese APIs sind über das API-Pfadformat /api/${api-name} zugänglich. Mit der Unterstützung für die Erstellung von APIs betrachten wir Next.js als ein vollwertiges Webapplikations-Framework. Mehr über die Next.js Web API Unterstützung erfahren Sie in dieser API Routen Dokumentation.

• Anwendungsseiten innerhalb der anderen Unterverzeichnisse wie meeting oder therapies. Endbenutzer können die Anwendungsseiten unter dem Pfad /meeting oder /therapies aufrufen. Next.js unterstützt verschachtelte Routen und dynamisches Routing. Das bedeutet, dass Sie den Dateinamen der Seite mit einer Variable wie [id].js innerhalb des therapies/[detail] festgelegt werden, und die Benutzer können weitere Informationen über alle verfügbaren Therapeuten unter /therapies/{therapyCategory}/{therapyId} erhalten. Sie können mehr über Next.js-Seiten erfahren in dieser Dokumentation.

1. src/components Verzeichnis:

In diesem Verzeichnis werden alle Webkomponenten definiert, die Sie in der Anwendung verwenden werden, wie z. B. die Kopfzeile, die Fußzeile oder die benutzerdefinierte Schaltfläche der Anwendungsseite. Die Next.js UI-Komponenten ähneln den React-Komponenten, bieten aber zusätzliche Unterstützung für UI-Komponenten wie Link oder Bild.

1. utils Verzeichnis:

In diesem Verzeichnis sind die Funktionen der Dienstprogramme implementiert, die die Therapieanwendung verwenden wird. Derzeit haben Sie eine Datei namens phone.jsdie es der Anwendung ermöglicht, eine SMS-Nachricht an den Therapeuten zu senden, in der mitgeteilt wird, dass ein Benutzer zu einem bestimmten Zeitpunkt ein Meeting-Ereignis erstellt hat, und die einen Video-Link zum Meeting enthält, damit der Therapeut mit dem Benutzer sprechen kann.

1. data Verzeichnis:

In diesem Verzeichnis werden alle Daten gespeichert, die die Anwendung verwenden wird. Derzeit haben Sie eine data.json Datei, in der Daten über die Therapeuten gespeichert sind, wie z. B. der Name der Therapeuten und die verfügbaren Zeiten der Therapeuten, damit die Benutzer Sitzungen buchen können.

Schließlich gibt es noch andere Dateien, wie z. B. Bilder für das Anwendungslogo und die CSS-Dateien zur Verbesserung der grafischen Benutzeroberfläche (GUI) der Anwendung.

Schritt 3: Aktivieren Sie Video-Anrufe für die App

Um Videoanrufe für die App zu aktivieren, haben Sie die folgenden drei Optionen:

• Verwenden Sie das Vonage Video SDK

• Verwenden Sie die Vonage Video-Chat-Einbettung

  • Iframe-Option verwenden

  • Javascript-Option verwenden

In der Produktionsumgebung sollten Sie die Option Vonage Video SDK verwenden, mit der Sie die Server- und Client SDKs separat einrichten können, um mehr Kontrolle darüber zu haben, wie die Videounterstützung ausgeführt werden soll. Um die Demo-Anwendung einfach zu halten, verwenden wir die Option "Iframe", um die Videoanruf-Funktion zu aktivieren.

Melden Sie sich auf der Vonage Video Account Seite und wählen Sie die Option "Projekte" auf der linken Seite.

Video Projects

Wählen Sie "Neues Projekt erstellen" und klicken Sie auf die Schaltfläche "Einbettungsprojekt erstellen".

Create Embed Project

Legen Sie dann den Namen Ihres Projekts und die URL der Website fest. In einer Produktionsumgebung sollten Sie die Website-URL angeben, die mit der registrierten Domäne Ihrer Anwendung übereinstimmt. Da wir die Anwendung nur in der lokalen Umgebung erstellen werden, setzen wir die Website-URL auf http://localhost:3000.

Configure Setting

Klicken Sie auf die Schaltfläche "Weiter", und kopieren Sie den von Iframe erzeugten Code an einen sicheren Ort.

Erstellen Sie eine neue Datei mit dem Namen embedCode.json innerhalb des Verzeichnisses data Verzeichnis. Innerhalb der embedCode.jsonfügen Sie den folgenden Inhalt hinzu:

{
"embedCode":""
}

Innerhalb des leeren Wertes fügen Sie den von iframe generierten Inhalt ein. Denken Sie daran, die Sonderzeichen des von iframe erzeugten Inhalts zu entschlüsseln, damit sie den Regeln der JSON-Datei entsprechen.

Der Inhalt der embedCode.json Datei sieht ähnlich aus wie die folgende:

{
	"embedCode": "<iframe src='https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&room=DEFAULT_ROOM&iframe=true' width='800px' height='640px' scrolling='auto' allow='microphone; camera'></iframe>"
}

Sehen Sie sich die index.js Datei im Verzeichnis pages/meetings Verzeichnis an. Diese Datei implementiert die Besprechungsseite, damit der Benutzer und der Therapeut kommunizieren können.

const meetingData = data.replace('DEFAULT_ROOM', `meeting${meetingId}`);

Der obige Code ersetzt den DEFAULT_ROOM Wert aus dem in iframe eingebetteten Code durch den zufällig generierten meetingIdersetzt, so dass sich jede Besprechung unterscheidet. Auf diese Weise kann jede Besprechung von den anderen getrennt werden, so dass Sie nicht am Ende eine Reihe von Benutzern in derselben Besprechung haben.

<div id="ot_embed_demo_container" dangerouslySetInnerHTML={{__html: meetingData}}>
</div>

In diesem Code wird der meetingData Wert innerhalb des Feldes dangerouslySetInnerHTML Feld enthalten, damit die Besprechungsseite den Bildschirm mit dem eingebetteten Video anzeigen kann. Mehr darüber, wie Next.js mit eingebetteten Skripten umgeht, erfahren Sie auf dieser Seite.

Schritt 4: Aktivieren der SMS-Versandfunktion

Um den SMS-Versand zu aktivieren, müssen Sie die folgenden Umgebungsvariablen für die aktuelle Terminalsitzung bereitstellen:

• VONAGE_SMS_BRANDVonage SMS Brand: Der Vonage SMS Brand dient dazu, den Namen des Absenders in der SMS-Nachricht zu registrieren. In der Produktionseinstellung sollten Sie die VONAGE_SMS_BRAND für Ihre Anwendung registrieren. Für die Zwecke des Tutorials können Sie die VONAGE_SMS_BRAND Variable auf "Vonage Sample App" setzen. Sie können mehr über die Verwendung der Vonage SMS API erfahren und die VONAGE_SMS_BRAND auf der SMS API-Richtlinienseite.

• THERAPIST_PHONE_NUMBER: Dies ist die Telefonnummer des Empfängers, an den Sie die SMS-Nachricht senden werden. In einem realen Szenario sollte jeder Therapeut seine eigene Telefonnummer haben. Um die Anleitung zu vereinfachen, setzen Sie bitte die THERAPIST_PHONE_NUMBER auf eine beliebige Telefonnummer, von der Sie Nachrichten empfangen können.

• VONAGE_API_KEY`` andVONAGE_API_SECRET: Um eine SMS-Nachricht über die Vonage SMS API zu versenden, müssen Sie den Vonage API Key angeben. Sie können die Werte von VONAGE_API_KEY und VONAGE_API_SECRET von der Vonage SMS API Einstiegsseite.

Unter Windows können Sie die Werte mithilfe von PowerShell mit den folgenden Befehlen festlegen:

$env:VONAGE_SMS_BRAND = "Vonage Sample App"
$env:THERAPIST_PHONE_NUMBER = "your_therapist_phone_number"
$env:VONAGE_API_KEY = "your_vonage_api_key"
$env:VONAGE_API_SECRET = "your_vonage_api_secret"

Schritt 5: Aufrufen der Anwendung

Sie müssen die Abhängigkeiten, die die Anwendung benötigt, durch Ausführen installieren:

Führen Sie dann den folgenden Befehl aus, um die Anwendung auf dem lokalen Rechner zu starten:

Der Server wird auf Port 3000 gestartet, wie unten gezeigt.

> therapist-mental-health-app@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Öffnen Sie Ihren Browser und navigieren Sie zu dieser URL: http://localhost:3000. Sie sollten nun die Startseite der Anwendung sehen können.

Therapist Home Page

Klicken Sie im Menü auf die Schaltfläche "Therapien", um alle Arten von Therapien zu sehen.

Therapies Page

Klicken Sie auf die Option "Kognitive Therapie", um alle verfügbaren Therapeuten in der Kategorie "Kognitive Therapie" zu sehen.

Therapy Cognitive Page

Hier sehen Sie drei Therapeuten namens "Anna Maria", "Jennifer Great" und "Jessica Tart". Wählen wir "Anna Maria" aus, um einen Videoanruf mit ihr zu vereinbaren.

Book a Meeting Form

Hier sehen Sie eine Reihe von Zeitfenster-Optionen. Wählen Sie die Zeit "02-05-2023 10:00" und geben Sie Ihre E-Mail-Adresse und Ihre Telefonnummer ein. Klicken Sie auf die Schaltfläche "Absenden".

Book a Meeting Successfully

Sie werden sehen, dass Sie sich erfolgreich für das Treffen mit der therapist-1. Außerdem wird eine SMS-Nachricht mit folgendem Inhalt gesendet:

A user has booked a meeting with you. The meeting time is : ${therapyTime}. The meeting link is : http://localhost:3000/meetings?meetingId=${meetingId}

HINWEIS: Wenn Sie sich mit der gleichen Telefonnummer registriert haben, die bereits existiert, und die Fehlermeldung "Diese Telefonnummer xxx wurde bereits registriert" erhalten haben, können Sie die Telefonnummer entfernen, indem Sie sie löschen:

• Gehen Sie zu der Datei mit dem Namen data.json innerhalb des data Verzeichnis

• Suche nach Ihrer Telefonnummer

• Entfernen Sie sie aus der Liste "phoneNumbers_registered".

• Speichern Sie die Datei

Der Therapeut kann den Besprechungslink speichern und zur geplanten Besprechungszeit an der Videobesprechung teilnehmen.

Nehmen wir an, die Besprechung findet jetzt statt. Sie können auf die Schaltfläche "An der Besprechung teilnehmen" klicken, um das Video der Besprechung aufzurufen.

Meeting Therapist

Wenn Sie auf "Click to Start Video Chat" klicken, können Sie an der Videokonferenz mit dem Therapeuten teilnehmen.

Schlussfolgerung

In diesem Artikel haben Sie erfahren, was das Next.js-Framework ist und warum Sie Next.js für die Entwicklung Ihrer zukünftigen Anwendungen in Betracht ziehen sollten. Sie haben auch gelernt, wie Sie dank der Unterstützung der Video API von Vonage mit ein paar Zeilen Code Videoanrufe für die Next.js Anwendung aktivieren und die SMS-Benachrichtigungsfunktion mit der SMS API von Vonage anwenden können. Wenn Sie mehr über die anderen Technologien der Vonage Plattform erfahren möchten, besuchen Sie die Vonage Entwickler-Homepage.