JavaScript

Créer le code pour recevoir un appel vocal in-app.

Créer un autre fichier HTML appelé client_bob.html.

Ajoutez le code suivant, mais assurez-vous de coller le Bob JWT que vous avez généré pour l'utilisateur recevant l'appel de l'étape précédente comme valeur de l'élément token constante :

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
  <style>
    input, button {
      font-size: 1rem;
    }
    #answer {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Inbound App Call (Bob)</h1>
  <p id="notification">Lines are open for calls...</p>
  <br />
  <button id="answer">Answer</button>

  <script>
    const answerButton = document.getElementById("answer");
    const notification = document.getElementById("notification");
    const token = 'BOB_JWT';
    const client = new vonageClientSDK.VonageClient();
    let callId = null;

    client.createSession(token)
      .then((sessionId) => {
        console.log(sessionId);
      })
      .catch((error) => {
        console.error(error);
      });

    client.on('callInvite', (_callId) => {
      callId = _callId;
      notification.textContent = "You are receiving a call";
      answerButton.style.display = "inline";
    });

    client.on('callHangup', (callId, callQuality, reason) => {
      callId = null;
      notification.textContent = "Lines are open for calls...";
      answerButton.style.display = "none";
    });

    // Answer the call.
    answerButton.addEventListener("click", () => {
      client.answer(callId)
        .then(() => {
          console.log("Success answering call.");
          notification.textContent = "You are on a call";
          answerButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error answering call: ", error);
        });    
    });
  </script>
</body>

</html>

Il s'agit de votre application client qui utilise le Client SDK pour recevoir un appel vocal de l'utilisateur. Alice.

Ce code comporte plusieurs éléments clés :

Une boîte de notification qui peut être mise à jour avec l'état de l'appel.
Bouton permettant de répondre à un appel entrant.
Le code crée une session en utilisant le JWT généré précédemment.
Le code met en place un gestionnaire d'événements. Il est déclenché en cas d'invitation à un appel entrant. Il établit à son tour un gestionnaire d'événement de bouton cliquable qui répond à l'appel entrant à l'aide de la méthode Client SDK. answerCall.
Un autre gestionnaire d'événements est mis en place pour écouter les événements de raccrochage, qui seront déclenchés lorsque l'autre partie de l'appel raccrochera.