Transformer les appels téléphoniques en réunions vidéo

L'API Video de Vonage vous permet de créer à peu près n'importe quelle expérience vidéo que vous souhaitez. Il arrive souvent qu'un participant se trouve dans une région où la couverture Internet n'est pas très bonne, en raison de problèmes de réseau cellulaire ou de fournisseur de services Internet, mais qu'il doive quand même participer à une réunion. Nous allons vous montrer comment vous pouvez permettre à des participants non-vidéo d'appeler une réunion et d'y participer.

Dans ce tutoriel

L'API Video de Vonage vous permet de permettre aux utilisateurs de se connecter à une réunion vidéo ou de se connecter à un utilisateur pour qu'il se joigne directement à la réunion. Nous verrons comment faire fonctionner une démo avec nos démos existantes afin que vous n'ayez pas à écrire de code, mais nous expliquerons également ce que le code fait en arrière-plan.

1. Voir la démo - Découvrez la démo sans écrire de code
2. Fonctionnement de la démo - Côté client - Ce que fait le code côté client
3. Fonctionnement de la démo - Côté serveur - Ce que fait le code côté serveur

Conditions préalables

Pour compléter le tutoriel, vous avez besoin de :

• A Account Vonage - pour votre clé d'API et votre secret

Voir la démo

Si vous souhaitez tester la démo avant d'écrire le moindre code, nous disposons d'un exemple de serveur web et de code JavaScript pour tester ce à quoi ressemble un appel vidéo de base. Tout le code est open source et accessible au public, vous pouvez donc essayer la démo et utiliser le code pour faire vos propres modifications.

Lancer le serveur Node.js

La démo vidéo nécessite un serveur dorsal pour gérer des tâches telles que la création de jetons clients pour l'autorisation et la gestion générale de la session. Bien que vous puissiez construire ceci dans le langage de votre choix, nous avons un serveur pré-construit que vous pouvez utiliser pour commencer à l'adresse suivante Serveur d'apprentissage vidéo de Vonage (Node.js) sur Code Hub. De la Documentation pour les développeursCliquez sur "Code Hub" dans la barre de navigation supérieure, puis faites défiler vers le bas et trouvez la carte "Vonage Video Learning Server (Node.js)". Cliquez dessus pour l'ouvrir.

Vous obtiendrez une description de ce que fait ce projet. Pour l'instant, cliquons sur "Get code" afin de pouvoir le charger dans l'éditeur en ligne Code Hub. Cliquez sur "Créer un nouvel environnement de développement". Nommez l'espace de travail "Vonage Video Demo" car nous pouvons utiliser ce backend pour plusieurs démonstrations. Cette démo nécessite l'attribution d'un numéro, car le serveur d'apprentissage prend en charge les appels téléphoniques via SIP. Nous ne l'utiliserons pas dans cette démonstration, mais vous pouvez cliquer sur "Attribuer un numéro" pour attribuer un numéro existant que vous avez obtenu auprès de Vonage, ou en acheter un nouveau que vous utiliserez pour des démonstrations ultérieures.

Code Hub créera automatiquement une application pour vous, y compris la mise en place des clés publiques et privées que notre application utilisera. Une fois l'espace de travail créé, vous serez dirigé vers l'éditeur de code, qui est une version en ligne de Visual Studio Code. N'hésitez pas à suivre les parties ultérieures de cette démo pour voir le code, et vous pouvez modifier ce code si nécessaire pour vos propres projets.

Pour exécuter l'application, cliquez sur "View" en haut de l'éditeur, puis sur "Terminal". Cela ouvrira une ligne de commande dans laquelle nous pourrons exécuter des commandes. Tout ce que nous avons à faire est de taper vcr deploy et le code sera déployé. Cela prendra quelques instants, car le code est emballé et exécuté sur les serveurs de Vonage Code Hub. Nous voudrons prendre note de "l'adresse de l'hôte de l'instance" qu'il produit vers la fin.

Si tout fonctionne correctement, vous devriez pouvoir visiter l'adresse de l'hôte de l'instance et être accueilli par la page suivante :

Tester la partie frontale

Le serveur dorsal fonctionne directement avec toutes nos démonstrations préconstruites, y compris cette démo en tête-à-tête. Rendez-vous sur le site de https://github.com/Vonage-Community/video-api-web-samples/tree/main/SIPqui est le code source de la partie frontale de cette démo. Cet exemple permet à plusieurs utilisateurs ayant l'URL de rejoindre un chat vocal par vidéo ou par numéro de téléphone, et de permettre à un hôte de composer un numéro.

La façon la plus simple d'exécuter cette démo est de cliquer sur le bouton "Open in Stackblitz" dans le README.

Ceci ouvrira le projet dans Stackblitz. Comme pour le serveur backend, vous pouvez parcourir le code et le modifier ici si vous le souhaitez. Pour cette démo, tout ce que nous avons besoin de faire est d'ouvrir le fichier js/config.js et ajoutez l'URL de l'instance de Code Hub dans le fichier SAMPLE_SERVER_BASE_URL variable :

Une fois le fichier enregistré, vous pouvez actualiser la vue de démonstration sur le côté droit de Stackblitz et votre navigateur devrait vous demander d'autoriser votre microphone et votre caméra. Une fois l'autorisation obtenue, votre image devrait apparaître dans le coin inférieur de la barre latérale. Si vous copiez l'URL de Stackblitz au-dessus de la fenêtre de démonstration et que vous la visitez sur votre appareil mobile, sur un autre ordinateur ou que vous la donnez à un ami, toute personne qui se joindra à vous devrait être connectée à votre démo !

Comment fonctionne la démo

Configurer une application Vonage

Pour que notre application vidéo fonctionne, il faut que notre client et notre serveur puissent communiquer avec les serveurs de Vonage. Code Hub configure cela pour nous, mais si vous exécutez le code localement ou si vous voulez savoir ce que cela implique, une application Video est configurée comme n'importe quelle autre API. Nous devons mettre en place une Applications Vonage pour héberger toute la configuration de notre application, ainsi que pour aider à générer les éléments nécessaires à l'authentification.

Rendez-vous sur votre Tableau de bord des clients de Vonage et se connecter. Une fois que vous êtes connecté :

1. Cliquez sur "Applications" sous "Construire".
2. Cliquez sur "Créer une nouvelle application".
3. Donnez un nom à l'application, par exemple "Démonstration vidéo de base".
4. Cliquez sur "Generate public and private key", ce qui vous permettra de télécharger un fichier nommé private.key. Gardez une trace de ce fichier pour plus tard.
5. Faites défiler vers le bas et cliquez sur "Vidéo". Nous laisserons ces valeurs vides pour l'instant.
6. Cliquez sur "Générer une nouvelle application" pour créer l'application.

Une fois l'application créée, notez l'identifiant de l'application. Si vous exécutez le code localement, nous en aurons besoin pour configurer le backend. Si vous utilisez Code Hub, le code du serveur a déjà accès à l'identifiant de l'application et à la clé privée.

Le côté client

La partie client de la démo se compose de plusieurs éléments différents : des éléments HTML pour insérer les flux vidéo, du JavaScript pour récupérer les informations de connexion et communiquer avec les serveurs Vonage Video, et du code JavaScript pour appeler le serveur dorsal afin d'effectuer la numérotation.

Comme il s'agit d'une démonstration par navigateur, nous utilisons le SDK JavaScript situé à l'adresse suivante https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jset l'inclure dans une balise de script dans notre HTML en index.html.

Pour ajouter des personnes à une salle, nous n'avons besoin que de deux éléments : un endroit où placer l'utilisateur actuel, par exemple, vous, que nous appelons "éditeur". Nous avons ensuite besoin d'un endroit où placer toute autre personne qui rejoint la salle, à laquelle vous vous "abonnerez". Nous les placerons dans l'élément "subscribers".

Nous allons créer deux div et donner à l'un d'entre eux un identifiant de publisher et l'autre un ID de subscriber. Nous ferons référence à ces éléments dans le JavaScript lorsque la page sera visitée et lorsque nous détecterons qu'un autre utilisateur est entré dans l'appel vidéo.

// index.html
<div>
    <h2 class="font-black text-2xl">Your Camera</h2>
    <div class="h-80 w-80" id="publisher"></div>
</div>

<div>
    <h2 class="font-black text-2xl">Guests</h2>
    <div class="h-80 w-80" id="subscriber"></div>
</div>

Nous disposons ensuite de deux séries de commandes. Le premier permet à notre vidéoconférence d'activer les fonctions de connexion. Nous allons créer deux boutons pour activer cette fonctionnalité.

<div><h2 class="font-black text-2xl">Dial Options</h2></div>
<div>
    <h3 class="font-black text-xl">Phone Conference</h3>
    <p>You can start a phone conference to let people dial in directly. They can call the following number to join once you have started the conference:</p>

    <p id="conference-number" class="text-center pb-4"></p>
</div>
<div>
    <button id="btn-dial-conference" class="bg-blue-500 bold text-white p-4 rounded">Create Phone Conference</button>
    <button id="btn-disconnect-conference" class="bg-red-500 bold text-white p-4 rounded">Disconnect Phone Conference</button>
</div>

Nous disposerons ensuite d'un ensemble de commandes qui nous permettront d'appeler un utilisateur. Vous pouvez entrer un numéro de téléphone et demander à notre système d'appeler l'utilisateur, et lorsqu'il acceptera l'appel, il sera intégré à la conférence.

<div>
    <h3 class="font-black text-xl">Direct Dial</h3>
    <p>Directly dial a phone number and add them to the conference. They will appear as an additional guest and be automatically added to the conference call if you have already started one.</p>
</div>
<div>
    <label for="phone">Number to call:</label>
    <input name="phone" id="phone" type="text" placeholder="15554441234" class="border border-black p-4 w-full">
    <button id="btn-dial-number" class="bg-blue-500 bold text-white p-4 rounded">Call Number</button>
</div>

Vidéo de manipulation

Côté JavaScript, nous allons d'abord obtenir des informations sur l'appel vidéo lui-même. Pour se connecter à l'appel vidéo, nous avons besoin d'un identifiant d'application, d'un identifiant de session et d'un jeton.

• Les ID de l'application est un identifiant que le Client SDK utilise pour référencer les différents paramètres de notre application vidéo du côté de Vonage.
• Les ID de la session est une session vidéo spécifique à laquelle nous voulons nous connecter, car une seule Application peut avoir plusieurs sessions vidéo simultanées.
• Les Jeton est un jeton d'authentification JWT qui vous permet de rejoindre une session spécifique avec des droits spécifiques.

Bien que vous puissiez générer l'identifiant de session et le jeton à l'avance, dans le monde réel, vous les générerez à la demande. Notre code représente la façon de procéder. Nous montrerons comment les informations sont créées dans un instant, mais nous allons récupérer ces informations sur le serveur dorsal que nous avons déployé.

// src/app.js

// ...
} else if (SAMPLE_SERVER_BASE_URL) {
  // Make a GET request to get the Vonage Video Application ID, session ID, and token from the server
  fetch(SAMPLE_SERVER_BASE_URL + '/session')
  .then((response) => response.json())
  .then((json) => {
    applicationId = json.applicationId;
    sessionId = json.sessionId;
    token = json.token;
    // Initialize a Vonage Video Session object
    initializeSession();
  }).catch((error) => {
    handleError(error);
    alert('Failed to get Vonage Video sessionId and token. Make sure you have updated the config.js file.');
  });
}

Une fois que nous avons toutes les informations de connexion, nous pouvons appeler le SDK JavaScript de Vonage Video, qui gère tout le travail de connexion à l'API Video de Vonage du côté frontal. Tout d'abord, nous saisissons un objet de session avec OT.initSession(). Nous commençons alors à écouter sur le streamCreated événement avec session.on(). Cela nous permet de définir un rappel à exécuter lorsqu'un flux provenant d'un autre éditeur est créé. Dans ce cas, nous utilisons session.subscribe() pour se connecter à l'événement entrant, et le pousser dans le fichier subscriber que nous avons mis en place dans le HTML. Nous sommes également à l'écoute de l'élément sessionDisconnected pour savoir quand l'autre utilisateur se déconnecte, mais tout ce que nous faisons pour cette démo, c'est enregistrer le fait que nous avons remarqué qu'il est parti.

Ensuite, nous créons le publisher avec l'objet OT.initPublisher(). Nous lui indiquons à quelle div il doit s'attacher (publisher) et quelques options de formatage de base. Cela permet de connecter votre caméra et votre microphone à l'API Video.

Nous appelons ensuite session.connect() pour se connecter à la session, en utilisant le jeton de connexion JWT que nous avons récupéré sur le serveur. C'est tout ce qu'il faut pour que deux personnes rejoignent une salle !

// src/app.js

function initializeSession() {
  const session = OT.initSession(applicationId, sessionId);

  // Subscribe to a newly created stream
  session.on('streamCreated', (event) => {
    const subscriberOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };
    session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
  });

  session.on('sessionDisconnected', (event) => {
    console.log('You were disconnected from the session.', event.reason);
  });

  // initialize the publisher
  const publisherOptions = {
    insertMode: 'append',
    width: '100%',
    height: '100%',
    resolution: '1280x720'
  };
  const publisher = OT.initPublisher('publisher', publisherOptions, handleError);

  // Connect to the session
  session.connect(token, (error) => {
    if (error) {
      handleError(error);
    } else {
      // If the connection is successful, publish the publisher to the session
      session.publish(publisher, handleError);
    }
  });
}

Traitement des appels téléphoniques

Toutes les tâches lourdes liées à la prise en charge des appels seront gérées par l'API Video elle-même et par notre serveur dorsal. Le code côté client accèdera simplement à certaines routes du serveur dorsal pour activer l'appel SIP et se déconnecter de la conférence téléphonique lorsque nous aurons terminé. L'activation de la téléphonie se fait en appuyant sur la touche /sip/session/dial sur notre serveur dorsal, que nous détaillerons plus tard.

// js/index.js
document.getElementById('btn-dial-conference').addEventListener('click', async () => {
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/dial`, {
        method: "POST"
    })
    .then(res => res.json())

    console.log(resp);
})

Cette même route peut être utilisée pour appeler un utilisateur spécifique. Nous transmettons simplement le numéro de téléphone saisi dans l'interface utilisateur du client :

// js/index.js
document.getElementById('btn-dial-number').addEventListener('click', async () => {
    const msisdn = document.getElementById('phone').value;
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/dial`, {
        method: "POST",
        body: JSON.stringify({
            msisdn
        }),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(res => res.json())

    console.log(resp);
})

Lorsqu'un utilisateur entre dans la conférence téléphonique, ou que nous nous connectons à lui en composant directement le numéro, un nouvel abonné est ajouté à la liste des participants. L'API Video transmettra automatiquement l'audio de la connexion SIP à toutes les personnes connectées à la session vidéo.

Enfin, nous pouvons mettre fin à l'un ou l'autre type d'appel téléphonique en accédant à la fonction /sip/session/hangup sur notre serveur dorsal :

// js/index.js
 document.getElementById('btn-disconnect-conference').addEventListener('click', async () => {
    const resp = await fetch(`${SAMPLE_SERVER_BASE_URL}/sip/session/hangup`, {
        method: "POST"
    })
        .then(res => res.json())

    console.log(resp);
})

Le côté serveur

La partie serveur de toute application Vonage Video est utilisée pour gérer la création de sessions, la génération de jetons d'authentification et les tâches administratives telles que le démarrage et l'arrêt des archives. Pour cette démonstration, tout ce qui nous préoccupe est de créer des sessions et des jetons pour que les utilisateurs puissent rejoindre la salle. Bien que l'API elle-même soit une API REST et qu'elle puisse être appelée comme vous le souhaitez, nous vous encourageons à utiliser l'API SDK Vonage Node qui gère l'authentification et les appels HTTP pour vous. Vous pouvez l'installer dans votre propre application avec :

npm install -s @vonage/server-sdk

Le code de démonstration l'a déjà préinstallé. Si vous exécutez le code localement, vous devrez exécuter :

npm install

pour télécharger toutes les dépendances, puis copier .envcopy dans un nouveau fichier nommé .env. Vous devrez remplir les informations demandées dans le formulaire suivant .env comme l'ID de l'Application, l'emplacement de la clé privée sur le disque, ainsi que la clé et le secret de l'API de Vonage.

Création d'une session et participation à la session

La première chose que nous faisons est de vérifier si nous disposons déjà d'une session pour la pièce que nous générons. Nous conservons un dictionnaire en mémoire dans roomToSessionIdDictionaryet si la salle a déjà une session, nous extrayons simplement la session du dictionnaire. Nous utilisons ensuite le Vonage Client SDK pour créer un jeton de client en appelant vonage.video.generateClientToken()en lui transmettant l'identifiant de la session et un objet contenant une certaine configuration. Pour l'instant, tout ce que nous faisons, c'est attribuer à l'utilisateur une valeur de moderator pour cette simple démonstration. Nous renvoyons ensuite l'identifiant d'application, l'identifiant de session et le jeton configurés au front-end.

Si la session n'existe pas, nous en créons une nouvelle avec vonage.video.createSession(). Cela permet de contacter l'API de Vonage et de créer une session à laquelle les utilisateurs peuvent se connecter. Nous n'avons pas de paramètres spécifiques pour cette session, mais c'est ici que nous configurons des choses comme les règles d'archivage et la façon dont la session doit être gérée, comme le routage ou le peer-to-peer. Ensuite, comme précédemment, nous créons un jeton et renvoyons toutes ces informations au navigateur.

// routes/index.js

async function createSession(response, roomName, sessionProperties = {}, role = 'moderator') {
  let sessionId;
  let token;
  console.log(`Creating ${role} creds for ${roomName}`);

  if (roomToSessionIdDictionary[roomName]) {
    sessionId = roomToSessionIdDictionary[roomName];
    // generate token for user
    token = vonage.video.generateClientToken(sessionId, { role })
    response.setHeader('Content-Type', 'application/json');
    response.send({
      applicationId: appId,
      sessionId: sessionId,
      token: token
    });
  } else {
    try {
      // Create the session
      const session = await vonage.video.createSession(sessionProperties);
      roomToSessionIdDictionary[roomName] = session.sessionId;

      // generate token for user
      token = vonage.video.generateClientToken(session.sessionId, { role });
      response.setHeader('Content-Type', 'application/json');
      response.send({
        applicationId: appId,
        sessionId: session.sessionId,
        token: token
      });
    } catch(error) {
      console.error("Error creating session: ", error);
      response.status(500).send({ error: 'createSession error:' + error });
    }
  }
}

Connexion au pont SIP

Vonage met à disposition un pont SIP pour l'utilisation de l'API Video. Tout ce dont vous avez besoin, c'est d'un numéro de téléphone auquel vous êtes abonné via votre tableau de bord client Vonage. Nous pouvons alors utiliser ce numéro de téléphone comme interface SIP pour les appels entrants. Nous utiliserons également l Fonctionnalité de conversation de l'API Voice de Vonage pour réunir plusieurs utilisateurs en une seule conférence audio.

La première chose à faire est de composer notre session vidéo dans la conférence téléphonique elle-même. Nous allons créer un jeton client pour la connexion SIP afin de rejoindre la session vidéo, puis passer un appel à vonage.video.initiateSIPCall() avec notre configuration SIP pour faire le lien entre tous les éléments.

// routes/index.js
const { msisdn } = req.body;
const sessionId = findSessionIdForRoom(req.params.room);
const conversation = findConversationFromSessionId(sessionId);
const token = vonage.video.generateClientToken(sessionId, {
  data: JSON.stringify({
    sip: true,
    role: 'client',
    name: conversation.conversationName,
  })
})

const options = {
  token, 
  sip: {
    auth: {
      username: process.env.VCR_API_ACCOUNT_ID, // Your Vonage API Key
      password: process.env.VCR_API_ACCOUNT_SECRET, // Your Vonage API Secret
    },
    uri: `sip:${process.env.CONFERENCE_NUMBER}@sip.nexmo.com;transport=tls`,
    secure: false,
  }
}

// ...

await vonage.video.intiateSIPCall(sessionId, options)
  .then(data => {
    // Update the conversation with connection data
    conversation.connectionId = data.connectionId;
    conversation.streamId = data.streamId;
    sipConversationToSessionIdDictionary[sessionId] = conversation;

    res.send(data)
  })

Où se déroule la conversation ? Lorsque nous lançons l'appel SIP, notre pont SIP compose un numéro de conférence via l'API Voice. Notre numéro de conférence est configuré dans le tableau de bord du client pour atteindre la fonction /sip/vapi/answer dans notre serveur dorsal. Si vous utilisez Cloud Runtime, cela est configuré automatiquement, mais si vous configurez cela à la main, vous devrez aller dans les paramètres de l'Application pour cette application, puis définir l'"URL de réponse" sur. https://your-domain.com/sip/vapi/answeroù your-domain est le nom de domaine sur lequel la démo est déployée.

L'itinéraire renverra un Action de conversation NCCO qui crée une Conversation Voice API, faisant le lien entre tous.

// routes/index.js
router.get('/sip/vapi/answer', async function (req, res) {
  const ncco = new NCCOBuilder();
  const conversation = findConversationFromSessionId(findSessionIdForRoom('session'));

  // If the call is not from the SIP connector, then announce we are connecting
  // to the conference call
  if (!req.query['SipHeader_X-OpenTok-SessionId']) {
    ncco.addAction(new Talk('Please wait while we connect you'));
  }

  // Call an individual user
  if (req.query['SipHeader_X-learningserver-msisdn']) {
    ncco.addAction(new Connect({type: 'phone', number: req.query['SipHeader_X-learningserver-msisdn']}, process.env.CONFERENCE_NUMBER));
  } else {
    ncco.addAction(new Conversation(conversation.conversationName, null, true, true, false, null, null, false));
  }

  res.send(ncco.build());
});

À ce stade, un utilisateur peut se connecter à la conférence en composant le numéro de la conférence, et l'API Voice fera le lien entre tous les éléments. Si un utilisateur compose le numéro de notre conférence, il est acheminé vers l'API vocale. /sip/vapi/answer . Nous ajoutons une action supplémentaire qui indique à l'appelant qu'il est connecté à la conférence. Nous ajoutons une action supplémentaire qui indique à l'appelant qu'il est connecté à la conférence, puis il est intégré.

Composition d'un numéro vers un utilisateur

Dans l'ensemble, le processus est le même pour la composition d'un numéro vers un utilisateur que pour l'établissement d'une conférence téléphonique. La seule différence est que nous transmettons un numéro à composer au /sip/:room/dial et nous ajoutons ce numéro en tant qu'option aux en-têtes SIP.

// routes/index.js
router.post("/sip/:room/dial", async function (req, res) {
  // Set up client token and SIP options as before

  // Add a header that will get passed to the Voice API
  if (msisdn) {
    options.sip.headers = {
      "X-learningserver-msisdn": msisdn
    }
  }

  //Initiate the call as before
  await vonage.video.intiateSIPCall(sessionId, options)
    .then(data => {
      // Update the conversation with connection data
      conversation.connectionId = data.connectionId;
      conversation.streamId = data.streamId;
      sipConversationToSessionIdDictionary[sessionId] = conversation;

      res.send(data)
    })
});

Lorsque l'appel SIP est passé, ce numéro de téléphone additionnel est utilisé pour la première fois. X-learningserver-msisdn est transmis dans le cadre de l'appel Voice API que notre serveur d'arrière-plan accepte. Cela déclenche dans notre code l'ajout d'une étape NCCO supplémentaire pour composer d'abord le numéro de téléphone demandé au moyen d'un Connecter l'action NCCOet lorsqu'ils répondent, ils les intègrent à la conversation.

// routes/index.js

router.get('/sip/vapi/answer', async function (req, res) {
  // Find the conversation info as before

  // If this header exists, call the user to bridge them in
  if (req.query['SipHeader_X-learningserver-msisdn']) {
    ncco.addAction(new Connect({type: 'phone', number: req.query['SipHeader_X-learningserver-msisdn']}, process.env.CONFERENCE_NUMBER));
  } else {
    ncco.addAction(new Conversation(conversation.conversationName, null, true, true, false, null, null, false));
  }

  res.send(ncco.build());
});

Raccrocher

Lorsque nous avons terminé, l'interface utilisateur nous donne la possibilité de nous déconnecter directement de l'appel SIP. Cette option est gérée par la fonction /sip/:room/hangup et déconnecte simplement la connexion de l'appel SIP de la session.

// routes/index.js

router.post("/sip/:room/hangup", async function (req, res) {
  // Get the session ID
  // Look up the connection from calls ID
  const sessionId = findSessionIdForRoom(req.params.room)
  const conversation = findConversationFromSessionId(sessionId);
  await vonage.video.disconnectClient(sessionId, conversation.connectionId)
    .then(data => 
      res.send(data)
    )
    .catch(error => res.status(500).send(error));
});

Si nous ne raccrochons pas manuellement, nous guetterons les événements de la Voice API qui nous indiquent la fin d'une conversation. Une conversation se termine automatiquement lorsque tous les participants se sont déconnectés. Nous attendons de recevoir un completed et lorsque nous le faisons, nous nous assurons de procéder à la même déconnexion de la session que celle décrite ci-dessus.

// routes/index.js

// This must be all because VAPI sometimes sends events as POST no matter what
// your event URL config is set to. This is a known bug.
router.all('/sip/vapi/events', async function (req, res) {
  if (req.query.status === "completed") {
    const conversation = findConversationFromSessionId(findSessionIdForRoom('session'));
    await vonage.video.disconnectClient(findSessionIdForRoom('session'), conversation.connectionId)
      .then(data => res.send(data))
      .catch(error => res.status(500).send(error));
  } else {
    res.send();
  }
})

Conclusion

Dans ce tutoriel, vous avez vu ce qui se passe dans le serveur dorsal pour traiter les appels téléphoniques via SIP, comment créer un client web pour que les utilisateurs puissent rejoindre une session et se voir et s'entendre, et un aperçu de la facilité avec laquelle il est possible d'utiliser le Vonage Code Hub et Stack Blitz pour tester rapidement des échantillons.

Pour en savoir plus

• Documentation du développeur vidéo de Vonage
• Spécification REST de l'API Video
• Guides