Activer les appels Video pour une application Next.js en utilisant l'API Video de Vonage

Introduction

L'un des moyens les plus efficaces de stimuler l'expérience utilisateur est d'activer le support d'appel vidéo en direct pour votre application afin que vos utilisateurs puissent toujours obtenir un support d'appel vidéo pour les problèmes qu'ils rencontrent. Cependant, l'ajout de la prise en charge des appels vidéo à votre application demande du travail car vous devez gérer à la fois le serveur et le support client pour interagir avec l'appel vidéo. En outre, la mise à l'échelle de l'assistance vidéo pour des milliers d'utilisateurs représente une charge de travail considérable. Comprendre les points douloureux et les difficultés de l'ajout de la prise en charge de la vidéo à votre application, Video API de Vonage de Vonage est née.

Dans cet article, vous apprendrez comment activer les appels Video pour une application de démonstration Next.js en ajoutant seulement quelques lignes de code à l'aide de l'API Video de Vonage.

A propos du framework Next.js

Next.js est un framework open-source d'opinion pour la construction d'applications web full-stack au dessus de la bibliothèque React. Il s'agit d'un cadre robuste qui combine les avantages de React avec le rendu côté serveur et la génération de sites statiques. En outre, Next.js fournit des fonctionnalités et des conventions qui vous permettent de construire l'application rapidement avec une excellente expérience de développeur.

À propos de l'application de démonstration

Construisons une application de démonstration pour comprendre et nous exercer à activer la fonctionnalité d'appel vidéo dans une application Next.js.

Vous allez créer une application de thérapie qui permet aux utilisateurs de planifier et d'effectuer un entretien vidéo avec les thérapeutes de leur choix. Permettre la prise en charge des appels vidéo est une excellente fonctionnalité pour les utilisateurs qui ont souvent des problèmes de socialisation et d'interaction avec les autres. Ils peuvent désormais participer à la séance de thérapie depuis leur domicile, à l'heure de leur choix.

CLAUSE DE NON-RESPONSABILITÉ : Cette application est uniquement destinée à servir de tutoriel, et vous devez consulter votre médecin en cas d'urgence.

Conditions préalables

Pour créer l'application de démonstration, vous devez préparer les conditions préalables suivantes.

• Un environnement Node.js avec la version 12.8 ou plus, conformément à Exigences de Next.js.

• A environnement de ligne de commande git pour cloner le code de l'application à partir d'un dépôt GitHub.

• Avoir un Account sur la plateforme Video de Vonage afin de pouvoir créer un nouveau projet Video API pour intégrer rapidement la prise en charge de la vidéo dans votre application Next.js.

• Avoir un Account sur Vonage Developer Dashboard pour utiliser l'API SMS afin d'envoyer des messages dans l'application de démonstration.

Maintenant que vous avez préparé tous ces prérequis, construisons l'application Next.js.

Étape 1 : Cloner le code de l'application

Comme l'application nécessite de créer plusieurs répertoires et fichiers pour mettre en œuvre la logique de l'application et l'interface utilisateur, clonons le code de l'application existante à partir de ce dépôt GitHub. Ouvrez votre terminal, créez un nouveau répertoire Applications, et clonez le code de l'application sous ce répertoire.

Changer le répertoire actuel en vonage-therapist-video-embed répertoire.

Vous devriez voir les répertoires et fichiers suivants :

Code Project Structure

Examinons-les.

Étape 2 : Comprendre la structure du fichier.

Dans le projet d'application Next.js, vous devez faire attention aux fichiers suivants en plus des fichiers habituels de l'environnement Node.js, tels que package.json ou package-lock.json, dans le répertoire racine.

1. next.config.js fichier :

Ce fichier définit la configuration commune pour l'application Next.js. Par exemple, vous pouvez définir le chemin des images de votre application, de sorte que si une image ne correspond pas à ces chemins, Next.js se plaindra avec un message d'erreur.

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

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

module.exports = nextConfig;

1. pages répertoire :

L'annuaire pages met en œuvre :

• Applications API dans le sous-répertoire api . Ces API sont accessibles en utilisant le chemin d'accès API sous la forme /api/${nom de l'API}. Ces API sont accessibles en utilisant le format de chemin d'accès API comme /api/${nom de l'API}. Avec le support pour la construction d'API, c'est pourquoi nous considérons Next.js comme un framework d'application web full-stack. Vous pouvez en savoir plus sur la prise en charge de l'API Web de Next.js à l'adresse suivante Documentation sur les routes API.

• Les pages d'applications dans les autres sous-répertoires tels que meeting ou therapies. Les utilisateurs finaux peuvent accéder aux pages de l'application par le chemin /meeting ou /therapies. Next.js supporte les routes imbriquées et le routage dynamique. Cela signifie que vous pouvez définir le nom du fichier de la page en utilisant une variable telle que [id].js dans le répertoire therapies/[detail] et les utilisateurs peuvent obtenir plus d'informations sur tous les thérapeutes disponibles à /therapies/{therapyCategory}/{therapyId}. Vous pouvez en savoir plus sur les pages Next.js dans cette documentation.

1. src/components répertoire :

Ce répertoire définit tous les composants web que vous utiliserez dans l'appli, comme l'en-tête, le pied de page ou le bouton personnalisé de la page de l'application. Les composants Next.js UI sont similaires aux composants React mais ont ajouté un support personnalisé pour les composants UI tels que Lien ou Image.

1. utils répertoire :

Ce répertoire met en œuvre les fonctions des utilitaires que l'application de thérapie utilisera. Actuellement, vous avez un fichier nommé phone.jsqui permet à l'application d'envoyer un message SMS au thérapeute, l'informant qu'un utilisateur a créé un événement de rencontre à une heure donnée et avec un lien vidéo de rencontre afin que le thérapeute puisse s'entretenir avec l'utilisateur.

1. data répertoire :

Ce répertoire stocke toutes les données que l'application utilisera. Actuellement, vous avez un fichier data.json qui contient des informations sur les thérapeutes, telles que leur nom et les heures auxquelles ils sont disponibles, afin que les utilisateurs puissent prendre rendez-vous.

Enfin, vous avez d'autres fichiers, tels que les images pour le logo de l'application et les fichiers CSS pour améliorer l'interface graphique de l'application.

Étape 3 : Activer l'appel Video pour l'application

Pour activer les appels Video pour l'app, vous disposez des trois options suivantes :

• Utilisez le SDK Video de Vonage

• Utiliser l'intégration Vonage Video Chat Embeded

  • Utiliser l'option Iframe

  • Utiliser l'option Javascript

Dans le cadre de la production, vous devriez utiliser l'option Vonage Video SDK, qui vous permet de configurer les SDK serveur et client séparément afin de mieux contrôler la façon dont vous souhaitez que le support vidéo soit exécuté. Pour que l'application de démonstration reste simple, utilisons l'option "Iframe" pour activer la fonction d'appel vidéo.

Connectez-vous à la page Vonage Video Account (en anglais seulement) et choisissez l'option "Projets" dans le panneau de gauche.

Video Projects

Choisissez "Créer un nouveau projet" et cliquez sur le bouton "Créer un projet intégré".

Create Embed Project

Définissez ensuite le nom de votre projet et l'URL du site web. Dans un environnement de production, vous devez fournir l'URL du site web correspondant au domaine enregistré de votre application. Puisque nous ne construirons l'application que dans l'environnement local, définissons l'URL du site web comme suit http://localhost:3000.

Configure Setting

Cliquez sur le bouton "Suivant" et copiez le code généré par Iframe dans un endroit sûr.

Créer un nouveau fichier nommé embedCode.json dans le répertoire data dans le répertoire Dans le fichier embedCode.jsonvous y ajoutez le contenu suivant :

{
"embedCode":""
}

À l'intérieur de la valeur vide, vous placez le contenu généré par l'iframe. N'oubliez pas d'échapper les caractères spéciaux du contenu généré par l'iframe afin de respecter les règles du fichier JSON.

Le contenu du fichier embedCode.json ressemble à celui ci-dessous :

{
	"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>"
}

Regardez le fichier index.js dans le répertoire pages/meetings à l'intérieur du répertoire. Ce fichier implémente la page de réunion afin que l'utilisateur et le thérapeute puissent communiquer.

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

Le code ci-dessus remplacera la valeur DEFAULT_ROOM du code intégré à l'iframe par la valeur générée aléatoirement meetingIdde manière à ce que chaque réunion soit différente. Cela permet à chaque réunion d'être séparée des autres, de sorte que vous ne vous retrouvez pas avec un tas d'utilisateurs dans la même réunion.

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

Dans ce code, la valeur meetingData est incluse dans le champ dangerouslySetInnerHTML pour permettre à la page de la réunion d'afficher l'écran intégré à la vidéo. Pour en savoir plus sur la façon dont Next.js gère les scripts intégrés, consultez cette page.

Étape 4 : Activer la capacité d'envoi de SMS

Pour activer la capacité d'envoi de SMS, vous devez fournir les variables d'environnement suivantes à la session de terminal en cours :

• VONAGE_SMS_BRANDVonage_SMS_BRAND : la marque Vonage SMS sert à enregistrer le nom de l'expéditeur dans le message SMS. Dans la configuration de production, vous devez enregistrer la marque VONAGE_SMS_BRAND pour votre application. Pour les besoins du tutoriel, vous pouvez définir la variable VONAGE_SMS_BRAND à "Vonage Sample App". Vous pouvez en savoir plus sur l'utilisation de l'API SMS de Vonage et enregistrer la variable VONAGE_SMS_BRAND pour votre application. VONAGE_SMS_BRAND sur la page page de directives sur l'API SMS.

• THERAPIST_PHONE_NUMBERNumbers : il s'agit du numéro de téléphone du destinataire auquel vous enverrez le SMS. Dans un scénario réel, chaque thérapeute devrait avoir son propre numéro de téléphone. Pour simplifier le tutoriel, veuillez définir le numéro de téléphone THERAPIST_PHONE_NUMBER à n'importe quel numéro de téléphone à partir duquel vous pouvez recevoir des messages.

• VONAGE_API_KEY`` andVONAGE_API_SECRET : pour pouvoir envoyer le message SMS à l'aide de l'API SMS de Vonage, vous devez fournir la clé API de Vonage. Vous pouvez récupérer les valeurs de VONAGE_API_KEY et VONAGE_API_SECRET à partir de la page page de démarrage de l'API SMS de Vonage.

Sous Windows, vous pouvez définir les valeurs en utilisant PowerShell avec les commandes suivantes :

$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"

Étape 5 : Faire apparaître l'Application

Vous devez installer les dépendances dont l'application a besoin en exécutant :

Ensuite, pour faire apparaître l'application sur la machine locale, exécutez la commande suivante :

Le serveur démarrera sur le port 3000 comme indiqué ci-dessous.

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

Ouvrez votre navigateur et accédez à l'URL suivante : http://localhost:3000. Vous devriez voir la page d'accueil de l'application.

Therapist Home Page

Cliquez sur le bouton "Thérapies" dans le menu, vous pouvez voir tous les types de thérapies.

Therapies Page

Cliquez sur l'option "Thérapie cognitive", pour voir tous les thérapeutes disponibles dans la catégorie "Thérapie cognitive".

Therapy Cognitive Page

Vous voyez ici trois thérapeutes nommés "Anna Maria", "Jennifer Great" et "Jessica Tart". Choisissons "Anna Maria" pour programmer un appel vidéo avec elle.

Book a Meeting Form

Ici, vous pouvez voir un certain nombre d'options de créneaux horaires. Choisissons l'heure "02-05-2023 10:00" et indiquez votre adresse électronique ainsi que votre numéro de téléphone. Cliquez sur le bouton "Soumettre".

Book a Meeting Successfully

Vous verrez que vous vous êtes inscrit avec succès à la réunion grâce à l'icône therapist-1. Un SMS sera également envoyé avec le contenu suivant :

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

REMARQUE : Si vous vous êtes enregistré en utilisant le même numéro de téléphone existant et que vous avez rencontré le message d'erreur "Ce numéro de téléphone xxx a déjà été enregistré", vous supprimez le numéro de téléphone en :

• Allez dans le fichier nommé data.json dans le répertoire data dans le répertoire

• Recherchez votre numéro de téléphone

• Retirez-le de la liste "phoneNumbers_registered".

• Enregistrer le fichier

Le thérapeute peut enregistrer le lien de la réunion et rejoindre la réunion vidéo à l'heure prévue.

Supposons que l'heure de la réunion soit maintenant. Vous pouvez cliquer sur le bouton "Participer à la réunion" pour accéder à la vidéo de la réunion.

Meeting Therapist

Cliquez sur "Click to Start Video Chat", vous devriez pouvoir rejoindre la réunion vidéo avec le thérapeute.

Conclusion

L'article vous a appris ce qu'est le framework Next.js et pourquoi vous devriez considérer le framework Next.js pour construire vos futures Applications. Vous avez également appris comment activer l'appel Video pour l'application Next.js en ajoutant quelques lignes de code grâce à la prise en charge de l'API Video de Vonage et en appliquant la fonction de notification par SMS à l'aide de l'API SMS de Vonage. Si vous souhaitez en savoir plus sur les autres technologies de la plateforme Vonage, visitez la page d'accueil des développeurs de Vonage. Page d'accueil des développeurs de Vonage.