JavaScript

Créer le code pour passer un appel vocal in-App Voice

Pour ce tutoriel, Alice appellera Bob.

Créer un fichier HTML appelé client_alice.html et ajoutez le code suivant, en veillant à coller le JWT d'Alice que vous avez généré à l'étape précédente comme valeur pour le champ 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;
    }
    #call, #hangup {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Outbound App Call (Alice)</h1>
  <button type="button" id="call">Call</button>
  <button type="button" id="hangup">Hang Up</button>

  <script>
    const callButton = document.getElementById("call");
    const hangUpButton = document.getElementById("hangup");
    const token = 'ALICE_JWT';
    const client = new vonageClientSDK.VonageClient();
    let callId = null;

    client.createSession(token)
      .then((sessionId) => {
        console.log("Id of created session: ", sessionId);
        callButton.style.display = "inline";
      })
      .catch((error) => {
        console.error("Error creating session: ", error);
      });

    client.on('legStatusUpdate', (callId, legId, status) => {
      if (status === "ANSWERED") {
        callButton.style.display = "none";
        hangUpButton.style.display = "inline";
      }
      if (status === "COMPLETED") {
        callButton.style.display = "inline";
        hangUpButton.style.display = "none";
      }
    });

    callButton.addEventListener("click", () => {
      console.log("Calling Bob...");
      client.serverCall({ to: 'Bob' })
        .then((_callId) => {
          callId = _callId;
        })
        .catch((error)=>{
          console.error(`Error making call: ${error}`);
        });
    });

    hangUpButton.addEventListener("click", () => {
      console.log("Hanging up...");
      client.hangup(callId)
        .then(() => {
          hangUpButton.style.display = "none";
          callButton.style.display = "inline";
        })
        .catch(error => {
          console.error("Error hanging up call: ", error);
        });                
    });
  </script>
</body>

</html>

Il s'agit de votre application client qui utilise le Client SDK pour passer un appel vocal in-app vers la destination. utilisateur (Bob).

Les principales caractéristiques de ce code sont les suivantes

Un bouton à appeler.
Une touche pour raccrocher.
Le code crée une session en utilisant le JWT généré précédemment.
Le code met ensuite en place deux récepteurs d'événements pour les boutons d'appel et de raccrochage.
1. Le premier écouteur utilisera la fonction serverCall pour effectuer l'appel sortant vers Bob. Votre serveur webhook recevra l'utilisateur dans le corps de la requête et acheminera l'appel.
2. Le deuxième auditeur appellera hangup pour mettre fin à l'appel.