JavaScript

Crear una aplicación cliente

Cree un archivo HTML llamado client_js.html en el directorio de tu proyecto. Añade el siguiente código, pero asegúrate de pegar el JWT que generaste para el usuario en el campo paso anterior en este tutorial:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
</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>

    new NexmoClient({ debug: true })
    .createSession("PASTE ALICE JWT HERE")
    .then(app => {

        const answerBtn = document.getElementById("answer");
        const rejectBtn = document.getElementById("reject");
        const hangupBtn = document.getElementById("hangup");
        const notification = document.getElementById("notification");

        app.on("member:call", (member, call) => {
            notification.textContent = "You are receiving a call";
            // Answer the call.
            answerBtn.addEventListener("click", () => {
                call.answer();
                notification.textContent = "You are in a call";
            });
            // Reject the call
            rejectBtn.addEventListener("click", () => {
                call.reject();
                notification.textContent = `You rejected the call`;
            });
            // Hang-up the call
            hangupBtn.addEventListener("click", () => {
                call.hangUp();
                notification.textContent = `You ended the call`;
            });
        });

        app.on("call:status:changed", (call) => {
          notification.textContent = "Call Status: " + call.status;
        });
    })
    .catch((error) => {
        console.error(error);
    });
  </script>
</body>
</html>

Esta es su aplicación web que utiliza el Client SDK para aceptar una llamada entrante.

Las principales características de este código son:

Un cuadro de notificación que puede actualizarse con el estado de la llamada.
Botón que se utiliza cuando el agente desea responder a una llamada entrante.
Botón que se utiliza cuando el agente desea rechazar una llamada entrante.
Botón que se utiliza cuando el agente desea colgar una llamada entrante.
El código inicia la sesión del agente utilizando el JWT de usuario generado en un paso anterior.
El código establece dos controladores de eventos principales. El primero se dispara en la llamada entrante. Esto a su vez establece 3 controladores de eventos de botón de clic que responde, rechaza y cuelga la llamada entrante utilizando el método Client SDK call.answer(),call.reject()y call.hangUp() respectivamente.
En el segundo, el estado de la llamada cambió (call:status:changed) establece el texto del cuadro de notificación en el estado de la llamada entrante.