JavaScript

Create the code to receive an in-app voice call

Create an HTML file called index2.html in your project directory.

Add the following code, but make sure you paste the Bob JWT you generated for the user receiving the call in the earlier step to the USER_JWT constant:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
  </head>
  <body>
    <h1>Inbound app call</h1>
    <p id="notification">Lines are open for calls...</p>
    <br />
    <button id="button">Answer</button>
    <script>
      const USER_JWT ="PASTE BOB JWT HERE";

      new NexmoClient({ debug: true })
        .login(USER_JWT)
        .then(app => {
          let btn = document.getElementById("button");
          let notification = document.getElementById("notification");
          app.on("member:call", (member, call) => {
            notification.innerHTML = "Inbound app call - click to answer...";
            btn.addEventListener("click", event => {
              event.preventDefault();
              call.answer();
            });
          });
          app.on("call:status:changed", call => {
            notification.innerHTML = "Call Status: " + call.status;
          });
        })
        .catch(console.error);
    </script>
  </body>
</html>

This is your client application that uses the Client SDK to receive a voice call from the source user (Alice).

There are several key components to this code:

  1. A simple UI that allows you to see if there is an inbound call and click Answer to answer it.
  2. Code that logs the user (Bob) into the Client SDK (a JWT is used for authentication), .login(USER_JWT).
  3. The event handler to answer the call when the answer button is clicked.
  4. An event handler and UI to display when the call status changes through the call:status:changed event.