Créer une application sécurisée de Video Appointments à l'aide de l'API de Vonage

Dans le monde d'aujourd'hui, la vidéo est un outil essentiel et puissant pour de nombreux cas d'utilisation : qu'il s'agisse de rejoindre une salle de classe à distance, de consulter votre médecin ou même de partager votre localisation en cas d'urgence. Ce ne sont là que quelques exemples de ce que les développeurs ont construit avec notre plateforme, et ils ont tous au moins un point commun : leur solution offre une expérience personnalisée grâce à la vidéo.

Dans cet article de blog, nous allons vous guider à travers une application de référence pour les Video appointments. Nous l'avons construite pour servir de base à différentes implémentations. Nous montrerons comment vous pouvez ajouter des fonctionnalités et comment vous pouvez l'appliquer à différents cas d'utilisation.

En quelques étapes simples, vous aurez obtenu une solution qui vous permet de créer des rendez-vous vidéo, d'envoyer un message avec un lien de rendez-vous aux participants et, bien sûr, de démarrer une conversation vidéo. Vous apprendrez également à la personnaliser du point de vue de l'apparence et de la convivialité.

Vous pouvez trouver le code complet de l'exemple d'application sur GitHub.

Contexte

En tant qu'ingénieurs solutions, nous apprenons ce que les développeurs construisent avec nos API, qu'il s'agisse d'un cas d'utilisation unique, d'une intégration intéressante ou même d'une solution de contournement d'un bogue.

Une partie de notre travail consiste à identifier des modèles dans ce que nos clients construisent, et à partir de là, nous créons des applications de référence. Notre objectif est de réduire le temps de développement et de fournir un meilleur point de départ.

Lorsque nous avons envisagé l'application de rendez-vous vidéo, nous avons pensé à trois caractéristiques essentielles :

1. Fixer des rendez-vous à l'avance et faire respecter l'heure et la date.

2. Envoi d'un message aux participants avec des liens pour rejoindre l'appel.

3. Interface utilisateur de base pour les appels vidéo, avec des boutons permettant aux participants de se mettre en sourdine et de partager leur écran.

Nous attendions de ce projet qu'il donne à nos clients une longueur d'avance sur leur projet Video.

Il existe une variété de cas d'utilisation qui pourraient être mis en œuvre au-dessus de l'application, et nous allons expliquer comment.

Concepts

Ce billet vous aidera à personnaliser deux composants : Une application Vue-Web et un serveur d'application Express-NodeJS. Après avoir terminé ce walkthrough, vous aurez une application de rendez-vous vidéo basique et configurable.

Note: Nous avons ajouté un bouton "déployer vers Heroku" sur GitHub pour vous faciliter la tâche.

Exemple de soins de santé

Supposons un cas d'utilisation simple dans le domaine de la santé pour l'application que nous sommes sur le point de créer. En règle générale, nous aurions les rôles suivants : Un clinicien, un médecin et un patient.

Le clinicien fixera un rendez-vous entre le patient et le médecin à l'aide de l'application, qui générera deux liens. Un lien sera envoyé au patient et l'autre lien sera envoyé au médecin, ou peut-être inscrit dans son calendrier.

Le lien vers le patient pourrait être envoyé par SMS ou par un autre canal de messagerie, tel que WhatsApp. Le moment venu, le patient et le médecin se joindront au rendez-vous en utilisant leurs liens respectifs.

Ces liens lanceront une consultation vidéo dans l'application. Selon la manière dont vous mettez en œuvre votre solution, chaque rôle peut avoir des privilèges différents. Par exemple, le médecin peut se joindre au rendez-vous à tout moment, tandis que le patient ne peut s'y joindre qu'à l'heure prévue.

Conditions préalables

• Video API de Vonage Account

• Expérience de niveau débutant en NodeJS

• Expérience de Vue au niveau débutant

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Video API

L'API Video de Vonage est une solution basée sur la technologie WebRTC. Elle prend en charge de nombreuses plateformes, notamment les navigateurs, Android, iOS, Windows et macOS. Nous utiliserons l'API pour créer des sessions vidéo en direct entre nos différents rôles. Vous pouvez en savoir plus sur l'API sur le centre des développeurs de Vonage Video.

Pour cette application, vous aurez besoin d'un projet "OpenTok API". Si vous n'en avez pas encore, vous pouvez en créer un nouveau dans le tableau de bord vidéo.

Messages API

L'API Messages de Vonage est une passerelle vers plusieurs canaux de messagerie, tels que SMS, WhatsApp et Viber. Elle vous permet d'envoyer et de recevoir des messages sur un ou plusieurs canaux. Nous l'utiliserons pour envoyer des SMS contenant les détails du rendez-vous à nos utilisateurs. Vous pouvez en savoir plus sur l'API sur le portail des développeurs.

Vous aurez besoin d'un numéro de téléphone à utiliser avec votre Applications. Utilisez le tableau de bord Account pour trouver un numéro à acheter et à utiliser pour ce projet.

Outils

Nous recommandons d'utiliser ngrok pour exposer votre serveur et Visual Studio Code pour travailler sur le projet.

Mise en place

Clonez le répertoire d'exemples et naviguez dans le dossier du projet :

git clone https://github.com/nexmo-se/opentok-secure-appointment.git
cd opentok-secure-appointment

Le fichier example.env contient tous les paramètres nécessaires à l'exécution du projet. Après l'avoir configuré, vous devrez le copier :

cp example.env .env

Jetons un coup d'œil sur les éléments configurables :

Messages API

Vous devrez fournir des informations d'identification pour l'API Messages, qui peuvent être trouvées sur les API de Vonage Communications de Vonage. En plus de API_KEY et API_SECRETvous devez inclure le numéro de téléphone que vous avez lié à votre Account.

Il s'agit du numéro que votre application utilisera pour envoyer des SMS contenant les détails du rendez-vous.

Video API

De la même manière que pour la configuration de l'API Messages, vous devrez inclure les fichiers API_KEY et API_SECRET de votre projet Video. Ces éléments se trouvent dans le tableau de bord vidéo.

Vous pouvez choisir entre deux types de sessions en paramétrant SESSION_MEDIA_MODE: relayée ou routée.

Les sessions relayées sont d'égal à égal et le média ne passe pas par le serveur média de Vonage. Les sessions routées, par contre, ne sont pas d'égal à égal et le média est diffusé en continu par le serveur média de Vonage.

Les sessions relayées ont une latence plus faible, mais il est recommandé de ne pas dépasser trois participants. En outre, elles ne prennent pas en charge certaines fonctions telles que l'archivage. Les sessions routées, quant à elles, fonctionnent mal dans les situations où la bande passante est très faible, mais elles prennent en charge davantage de fonctionnalités et peuvent accueillir un grand nombre de participants.

Frontend

L'application cliente doit être configurée avec l'URL du serveur, qui sera déterminée par vous et par la manière dont vous déployez votre serveur. Nous vous recommandons d'utiliser ngrok pour développer et tester votre application.

En outre, l'exemple d'application comporte deux composants d'interface utilisateur configurables - le logo et le nom de votre entreprise (LOGO_URL & COMPANY_NAME respectivement).

Les sessions Video pourraient être rejointes lorsque la caméra est éteinte par défaut, avec l'audio uniquement. Réfléchissez à ce qui convient le mieux à votre application et définissez l'indicateur AUDIO_ONLY en conséquence.

Enfin, vous pouvez créer votre propre modèle de SMS. Vous disposez de trois variables qui sont fournies par défaut avec l'application : la date du rendez-vous, l'heure du rendez-vous et le lien du rendez-vous. Il s'agit du message SMS qui sera envoyé lorsqu'un nouveau rendez-vous est programmé si le clinicien choisit cette option.

Il peut s'agir de quelque chose comme :

You have an appointment set for {date} at {time}, please click this link to join! {link}

Ou

An appointment to our clinic has been set for you for {date}, at {time}. To join the video call please use this link: {link}

Vous pouvez l'adapter à vos propres besoins en utilisant les paramètres que nous avons indiqués.

Bonus: Ajoutez d'autres paramètres au code en modifiant la méthode sendAppointmentMessage(appointment, number, shouldSendSMS) dans Booking.vue. Vous pourriez ajouter le nom du médecin pour le rendre plus personnel.

Scripts et exécution

Après l'installation, il suffit d'installer le projet en lançant npm install. Vous pouvez ensuite l'exécuter en utilisant npm run start-dev.

Votre serveur doit maintenant fonctionner localement, en même temps que le client. Rendez-vous à l'adresse localhost:3000 (ou le port de votre choix) et prenez votre premier rendez-vous ! Vous pouvez choisir l'heure et l'envoi éventuel d'un SMS au "patient". Une fois le rendez-vous créé, vous pouvez copier l'URL de l'hôte ou de l'invité et participer à la consultation vidéo.

Référence technique

Si vous souhaitez examiner de plus près les itinéraires du client, vous les trouverez dans la section ./src/client/App.vue. C'est également à cet endroit que vous pouvez ajouter d'autres routes à votre application.

Pour une explication technique détaillée, veuillez consulter le fichier README du client et le README serveur.

Veuillez noter que l'itinéraire par défaut mène à /booking.

Guide de l'utilisateur

En tant que clinicien, votre point d'entrée devrait être https://SERVER_ADDRESS/booking (où SERVER_ADDRESS est l'endroit où vous avez déployé l'application). Il s'agit de la page qui vous permet de planifier des rendez-vous et de consulter la liste des rendez-vous déjà planifiés.

Lors de la prise de rendez-vous, vous pouvez également envoyer un SMS au patient - avec le lien vers un numéro, par exemple. Vous pouvez également cliquer sur "copier le lien" dans le tableau des rendez-vous. C'est ici que vous pouvez envisager d'améliorer l'expérience en intégrant un autre canal, comme WhatsApp ou même un robot de synthèse vocale qui vous appelle pour vous informer du rendez-vous.

Chaque rendez-vous comporte deux liens : un lien hôte et un lien invité. Dans le cas d'utilisation des soins de santé, l'URL hôte sera envoyé au médecin et l'URL invité sera envoyé au patient.

Une fois le rendez-vous programmé, les deux interlocuteurs peuvent utiliser le lien pour se joindre au rendez-vous. Vous pouvez couper le son, dépublier la vidéo et partager votre écran.

Récapitulation

Nous avons appris dans les sections précédentes à construire une application simple de consultation vidéo, et nous avons également discuté de la façon dont elle peut être appliquée aux soins de santé.

Bien que les soins de santé soient une application classique, ce n'est certainement pas la seule. Lorsque nous avons commencé à travailler sur ce projet, nous avions de nombreux cas d'utilisation en tête : l'apprentissage en ligne, la finance, les entretiens d'embauche, etc. Notre objectif était de trouver le plus grand diviseur commun de ces cas d'utilisation, mais nous savons qu'il y a encore du travail à faire.

Alors que la communication devient de plus en plus multicanal, la complexité de nos solutions augmente elle aussi. La vidéo était au cœur de cet article, mais elle est encore plus puissante lorsqu'elle est combinée à d'autres canaux tels que la messagerie sociale, les SMS, les CRM et bien d'autres encore.

Si vous voulez en savoir plus sur ce que vous pouvez faire avec nos API, veuillez visiter le site suivant API de Vonage.