JavaScript

Créer une application côté client

Créer un fichier HTML appelé client_js.html. Ajoutez le code suivant, mais assurez-vous de coller le JWT que vous avez généré pour l'utilisateur dans 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;
    }
    #answer, #reject, #hangup {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Inbound PSTN phone call</h1>
  <p id="notification">Lines are open for calls...</p>
  <br />
  <button type="button" id="answer">Answer</button>
  <button type="button" id="reject">Reject</button>
  <button type="button" id="hangup">Hang Up</button>

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

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

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

    client.on('legStatusUpdate', (_callId, legId, status) => {
      notification.textContent = `Caller Leg Status is: ${status}`;
    });

    client.on("callHangup", (_callId, callQuality, reason) => {
      console.log(`Call ${_callId} has hung up, callQuality:${callQuality}, reason:${reason}`);
      callId = null;
      notification.textContent = "Lines are open for calls...";
      answerButton.style.display = "none";
      rejectButton.style.display = "none";
      hangUpButton.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";
          rejectButton.style.display = "none";
          hangUpButton.style.display = "inline";
        })
        .catch(error => {
          console.error("Error answering call: ", error);
        });    
    });

    // Reject the call
    rejectButton.addEventListener("click", () => {
      client.reject(callId)
        .then(() => {
          console.log("Success rejecting call.");
          notification.textContent = "You rejected the call";
          answerButton.style.display = "none";
          rejectButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error rejecting call: ", error);
        });          
    });

    // Hang up the call
    hangUpButton.addEventListener("click", () => {
      client.hangup(callId)
        .then(() => {
          console.log("Success hanging up call.");
          notification.textContent = "You ended the call";
          answerButton.style.display = "none";
          rejectButton.style.display = "none";
          hangUpButton.style.display = "none";
        })
        .catch(error => {
          console.error("Error hanging up call: ", error);
        });                
    });
  </script>
</body>

</html>

Il s'agit de votre application web qui utilise le Client SDK pour accepter un appel entrant.

Les principales caractéristiques de ce code sont les suivantes

Une boîte de notification qui peut être mise à jour avec l'état de l'appel.
Bouton permettant de répondre à un appel entrant.
Bouton permettant de rejeter un appel entrant.
Bouton permettant de raccrocher un appel entrant.
Le code crée une session en utilisant le JWT généré précédemment.
Le code met en place deux gestionnaires d'événements principaux.
1. Le premier est déclenché lors d'une invitation à un appel entrant. Ce dernier déclenche à son tour trois gestionnaires d'événements de bouton cliquable qui répondent, rejettent et raccrochent l'appel entrant à l'aide des méthodes du Client SDK. answer, rejectet hangup respectivement.
2. Le second reçoit les mises à jour de l'état des segments d'appel et définit le texte de la boîte de notification en fonction de l'état de l'appel entrant.