JavaScript

Create a client side application

Create an HTML file called client_js.html. Add the following code, but make sure you paste in the JWT you generated for the user in the earlier step as the value for the token constant:

<!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>

This is your web application that uses the Client SDK to accept an inbound call.

The main features of this code are:

A notification box that can be updated with the call status.
A button to answer an inbound call.
A button to reject an inbound call.
A button to hang-up an inbound call.
The code creates a session using the JWT generated earlier.
The code sets up two main event handlers.
1. The first is fired on an inbound call invite. This in turn sets up 3 click button event handlers which answers, rejects and hangs-up the inbound call using the Client SDK methods answer, reject, and hangup respectively.
2. The second, receives call leg status updates and sets the text of the notification box to the inbound call status.