Video Meeting Scheduling Bot Powered by Vonage AI and Video API (en anglais seulement)

Le travail à distance et la collaboration virtuelle permettent aux entreprises de repenser l'expérience client : la visioconférence. La vidéoconférence améliore les interactions avec les clients en offrant une communication en face à face, en favorisant des relations plus fortes et en permettant une collaboration en temps réel. En tant que développeur web, je suis toujours à la recherche de moyens d'améliorer l'expérience des utilisateurs sans m'imposer trop de travail supplémentaire.

C'est pourquoi je suis ravi de vous présenter mon dernier projet, un robot de planification intelligent que j'ai créé à l'aide de l'API vidéo de Video API de Vonage de Vonage et AI Studio de Vonage. L'API Video de Vonage permet aux développeurs d'ajouter facilement des vidéos à leurs Applications. Elle permet d'intégrer des vidéos interactives en temps réel et de haute qualité, la messagerie, le partage d'écran et bien plus encore dans les applications web et mobiles.

Ce bot apporte une tonne de valeur ajoutée aux clients, améliore considérablement l'expérience des utilisateurs et met en valeur les puissantes capacités de l'API Video de Vonage et d'AI Studio !

Dans cet article de blog, je vais vous présenter la création de ce robot, les défis auxquels j'ai été confronté et les solutions que j'ai trouvées.

Si vous souhaitez passer directement au déploiement, vous pouvez trouver tout le code de l'application sur GitHub.

Configuration du projet

1. Compte API Vonage

2. Node et npm

3. ngrok pour le test des Webhooks

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.

Node et npm

La structure du serveur NodeJS est la suivante :

1. index.js dans lequel le code du serveur est défini. Dans ce fichier, nous définirons les routes et appellerons le point de terminaison de l'API Meeting.

2. Un .env dans lequel nous configurons les informations d'identification pour nous authentifier auprès de Vonage.

Comment utiliser ngrok pour tester les webhooks ?

Si vous ne l'avez pas, installez ngrok sur votre machine locale. Ensuite, lancez la commande pour démarrer le tunnel, en spécifiant le numéro de port du serveur local que vous voulez exposer (ngrok http 3000). Ngrok générera une URL unique qui permettra l'accès externe à votre serveur local. Nous en aurons besoin à l'étape suivante pour appeler les webhooks de Vonage AI.

Comment utiliser l'API Video de Vonage

L'In Video API de Vonage vous permet d'intégrer des réunions vidéo interactives en temps réel et de haute qualité dans vos applications Web. L'API Video est idéal pour ceux qui veulent plus de personnalisation et de flexibilité. Mettons en place une application Web d'appel vidéo basée sur un navigateur en utilisant l'API Video de Vonage.

Comment créer l'application Video de Vonage

Accédez au tableau de bord Vonage et connectez-vous/inscrivez-vous.

1. Cliquez sur "Applications" dans le menu de gauche.

2. Cliquez sur "Créer une nouvelle application" en haut de la page et donnez-lui un nom.

3. Copiez l'identifiant de la demande pour référence ultérieure.

4. Cliquez sur "Editer" et "Générer les clés publiques et privées" La clé privée sera téléchargée.

5. Faites défiler vers le bas et activez "Video (new)" pour l'application.

6. Cliquez sur "Enregistrer les modifications" en bas de la page.

Notez la clé et le secret de l'API pour votre projet. Veillez à stocker ces identifiants en toute sécurité, car vous les utiliserez plus tard lors de la configuration de votre application.

Video Capability Toggle in Vonage API Dashboard

Comment générer des informations d'identification pour l'API Video ?

Pour vous authentifier, vous devez transmettre votre apiKey, votre sessionId et votre token. Vous trouverez ci-dessous un exemple de création de session avec @vonage/video bibliothèque :

const { Auth } = require("@vonage/auth");
const { Video } = require("@vonage/video");

const applicationId = process.env.APP_ID;
const privateKey = process.env.PRIVATE_KEY_PATH;

if (!applicationId || !privateKey) {
  console.error("You must define APP_ID and PRIVATE_KEY_PATH in the .env file");
  process.exit(1);
}

const credentials = new Auth({
  applicationId: applicationId,
  privateKey: privateKey,
});
const options = {};
const videoClient = new Video(credentials, options);

const createSessionandToken = async () => {
  const session = await videoClient.createSession({ mediaMode: "enabled" });
  const sessionId = session.sessionId;
  const token = videoClient.generateClientToken(sessionId);
  return { sessionId: sessionId, token: token, apiKey: applicationId };
};

const generateToken = (sessionId, role) => {
  const token = role
    ? videoClient.generateClientToken(sessionId, { data: role })
    : videoClient.generateClientToken(sessionId);
  return { token: token, apiKey: applicationId };
};

Du côté frontal, le code reçoit des informations d'identification du serveur Node.js pour se connecter à la session, créer l'éditeur, publier le flux et écouter les éventuels abonnés entrants.

const apikey = "<%= apiKey %>";
      const sessionId = "<%= sessionId %>";
      const token = "<%= token %>";
      const publisher = OT.initPublisher("stream-container", {
        insertMode: "append",
        width: "100%",
        height: "100%",
      });
      const session = OT.initSession(apikey, sessionId);
      session.connect(token, (error) => {
        if (error) {
          console.error("Error connecting: ", error);
        } else {
          session.publish(publisher, (error) => {
            if (error) {
              console.error("Error publishing: ", error);
            }
          });
        }
      });
      // Handle the streamCreated event
      session.on("streamCreated", function (event) {
        subscriber = session.subscribe(event.stream, "containerId", {
          insertMode: "append",
          width: "100%",
          height: "100%",
        });
      });

Comment créer un robot dans AI Studio de Vonage

Vonage AI Studio est une plateforme d'IA conversationnelle construite pour gérer les interactions complexes entre les entreprises et les clients, en réduisant les coûts opérationnels et en améliorant considérablement les niveaux de service. Elle propose actuellement les canaux suivants : agents téléphoniques (pour les bots vocaux), agents WhatApp et SMS (pour les bots basés sur le texte) et agents HTTP. J'ai choisi d'utiliser Whatsapp parce que c'est l'une des plateformes de messagerie les plus populaires et qu'elle offre différents types de messages pour interagir avec l'utilisateur, tels que des boutons, des messages de liste et bien d'autres.

Voir tous les détails sur Capacités de Vonage AI Studio.

Pour commencer, accédez au tableau de bord de Vonage [dashboard.nexmo.com] et repérez la section AI Studio. Cliquez ensuite sur le bouton "Create An Agent" (Créer un agent) situé dans le coin supérieur droit de la page. Parmi les options disponibles, choisissez "Whatsapp Bot" et vous obtiendrez une liste de modèles parmi lesquels choisir. Pour les besoins de cet article de blog, sélectionnez l'option "from scratch" (à partir de zéro), suivie de l'option "Inbound Agent" (agent entrant). Les agents entrants sont activés lorsqu'ils reçoivent un message du client, tandis que l'agent sortant entame une nouvelle conversation à l'aide des modèles WhatsApp.

Aperçu de WhatsApp Bot

L'image ci-dessous montre ce que nous allons construire. Nous utiliserons différents types de nœuds de Vonage AI Studio tels que collecter les entrées, conditionnels, crochets web et envoyer des messages. En gardant le diagramme à l'esprit, le bot commence avec un message entrant de l'utilisateur et répond avec un nœud d'entrée de collecte. Nous allons approfondir le processus dans les sections suivantes.

Overview of the Flow in AI Studio

Comment collecter les données de l'utilisateur dans AI Studio ?

Pour lancer le processus de création d'une réunion, notre robot WhatsApp demandera à l'utilisateur de fournir des informations spécifiques. Le premier bloc que nous utiliserons est le bloc "Collect Input", qui nous permet de recueillir des données auprès de l'utilisateur. Dans ce bloc, nous pouvons demander à l'utilisateur de préciser le type de réunion (ponctuelle ou à long terme) et les options d'enregistrement (enregistrement automatique ou non). En recueillant ces informations, nous pouvons adapter l'expérience de la réunion aux préférences de l'utilisateur.

Pour le type de réunion, nous utilisons les boutons de réponse de WhatsApp afin que l'utilisateur n'ait pas à taper le message mais seulement à cliquer sur le type de réunion souhaité :

Example of WhatsApp Reply ButtonsL'étape suivante consiste à envoyer le robot en fonction de la réponse précédente. Pour ce faire, nous utilisons un nœud conditionnel.

Example of Classification NodeEn fonction de la réponse précédente (qui est enregistrée dans le paramètre "type de réunion"), le robot a deux branches : les réunions instantanées et les réunions à long terme. Pour une réunion à long terme, nous avons besoin d'une étape supplémentaire, au cours de laquelle nous demandons à l'utilisateur de saisir la date d'expiration de la réunion.

Ensuite, nous utilisons la même logique pour les options d'enregistrement, nous utiliserons un nœud d'entrée de collecte avec des boutons de réponse.

Date d'expiration de la collecte

L'une des données que nous devons recueillir au cours de notre conversation est la date d'expiration des réunions à long terme. À l'aide d'un autre bloc "Collect Input", nous invitons l'utilisateur à saisir une date d'expiration pour sa réunion. Pour continuer, examinons le concept d'entités dans AI Studio. Une entité est une base de données prédéfinie comprenant un ensemble de valeurs et leurs synonymes. Ces valeurs sont essentielles pour permettre à AI Studio d'extraire et de valider des données spécifiques à partir d'entrées utilisateur exprimées en langage naturel. En explorant la liste des entités, disponible dans la documentation, nous rencontrerons des catégories familières telles que les contacts, les dates, les adresses électroniques, les numéros de téléphone, etc.

À ce stade, l'aspect critique consiste à sélectionner le type d'entité approprié à notre objectif, qui dans ce cas est "@sys.date". En désignant l'entité comme un type de date, l'agent analysera intelligemment l'entrée de l'utilisateur comme une date, ce qui facilitera son utilisation dans les étapes suivantes, en particulier dans le nœud Webhook.

Comment se connecter à une API Node.js avec des Webhooks

Une fois que nous avons recueilli toutes les informations nécessaires auprès de l'utilisateur, nous devons connecter notre bot WhatsApp au serveur Node.js que nous avons créé précédemment. Pour ce faire, nous utilisons le bloc webhook fourni par Vonage AI. Ce bloc nous permet d'effectuer des requêtes HTTP vers des points d'extrémité externes, ce qui permet une intégration transparente entre différents systèmes. En configurant le bloc webhook pour appeler les points de terminaison pertinents de notre API Node.js, nous pouvons transmettre les détails de la réunion collectés et déclencher la création de la réunion. Dans ce cas, nous configurons une requête POST vers https://{baseUrl}/api/video/room avec l'objet body envoyant les paramètres collectés pendant le flux bot.

A POST Request Using Webhook Node

La dernière étape consiste à configurer le correspondance des réponses sur le webhook. Dans ce cas, l'API renvoie un objet JSON avec une propriété URL :

Response Mapping Example

Conclusion

En conclusion, l'utilisation de Video API et de Vonage AI dans le planificateur de réunions illustre la facilité et la convivialité de la création d'expériences de visioconférence personnalisables en libre-service pour les entreprises et leurs clients. En exploitant l'API Video, les développeurs peuvent créer sans effort des Meetings vidéo avec des options configurables, telles que des options d'enregistrement, et plus encore. La combinaison de cette fonctionnalité avec Vonage AI ouvre des possibilités intéressantes, permettant aux utilisateurs d'interagir avec le robot par le biais de plateformes de messagerie populaires telles que WhatsApp.

Vous pouvez trouver le code complet sur GitHub.

Avez-vous apprécié ce tutoriel ? Vous êtes resté bloqué ? Contactez-nous sur X, anciennement connu sous le nom de Twitterou sur le Communauté Vonage Slack (nous avons même un canal pour AI Studio). Nous sommes impatients de voir ce que vous construisez avec Low Code !