JavaScript

Criar um aplicativo do lado do cliente

Crie um arquivo HTML chamado client_js.html. Adicione o código a seguir, mas certifique-se de colar o JWT que você gerou para o usuário na etapa anterior como o valor para o 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>

Esta é a sua aplicação web que utiliza o Client SDK para aceitar uma chamada recebida.

As principais características desse código são:

Uma caixa de notificação que pode ser atualizada com o status da chamada.
Um botão para atender uma chamada recebida.
Um botão para rejeitar uma chamada recebida.
Um botão para desligar uma chamada recebida.
O código cria uma sessão usando o JWT gerado anteriormente.
O código define dois manipuladores de eventos principais.
1. O primeiro é acionado ao receber um convite de chamada. Isso, por sua vez, configura três manipuladores de eventos de botão que atendem, rejeitam e desligam a chamada recebida usando os métodos do Client SDK answer, reject, e hangup respectivamente.
2. O segundo recebe atualizações sobre o status da ligação e define o texto da caixa de notificação de acordo com o status da chamada recebida.