JavaScript

Crie o código para receber uma chamada de voz no aplicativo

Crie outro arquivo HTML chamado client_bob.html.

Adicione o código a seguir, mas certifique-se de colar o JWT do Bob que você gerou para o usuário recebendo a chamada 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 {
      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>

Este é o seu aplicativo cliente que utiliza o Client SDK para receber uma chamada de voz do usuário Alice.

Existem vários componentes-chave neste código:

Uma caixa de notificação que pode ser atualizada com o status da chamada.
Um botão para atender uma chamada recebida.
O código cria uma sessão usando o JWT gerado anteriormente.
O código configura um manipulador de eventos. Ele é acionado ao receber um convite de chamada. Isso, por sua vez, configura um manipulador de eventos de clique em botão que atende a chamada recebida usando o método do Client SDK answerCall.
Outro manipulador de eventos é configurado para detectar eventos de desligamento; ele será acionado quando a outra parte da chamada desligar.