Making an audio call

This guide shows you to how to make an audio call in your JavaScript app. We assume you've already set up your JavaScript app with the In-app Calling JavaScript SDK.

If you haven't already, create an app first.

Setting up the UI

Before you can make a call, you need to set up the app's UI.

Initiating an audio call

Add the following HTML sample in index.html's <body>-section.

Copy

Copied

<div id="call-container" style="display: none">
  <input id="callee" placeholder="Enter callee" type="text" />
  <button id="call">Call</button>
</div>

In SinchClientWrapper add the following async method that uses call client to initiate the call and a private method for setting up listeners for the call:

Copy

Copied

class SinchClientWrapper {
  // constructor ...
  async makeCall(callee) {
    const call = await this.sinchClient.callClient.callUser(callee);
    this.#callListeners(call);
    return call;
  }

  #callListeners(currentCall) {
    currentCall.addListener({
      onCallProgressing: (call) => {
        this.ui.onCallProgressing(call);
      },
      onCallEstablished: (call) => {
        this.ui.onCallEstablished(call);
      },
      onCallEnded: (call) => {
        this.ui.onCallEnded(call);
      },
    });
  }
}

In the UI-class add instantiation of an Audio-reference in the constructor. Add three new callback-functions for handling callbacks from CallListener in SinchClientWrapper. Add a function that handles outgoing calls called #handleMakeCallClick. In the bottom of #handleLogin event listener for login clicks add code that shows the call-container and calls #handleMakeCallClick. Look at the following JavaScript example to see it in action:

Copy

Copied

class UI {
  constructor() {
    // ...
    this.audio = new Audio();
    this.audio.autoplay = true;
  }

  onCallProgressing(call) {
    console.log("Call progressing", call);
  }

  onCallEstablished(call) {
    console.log("Call established", call);
  }

  onCallEnded(call) {
    console.log("Call ended", call);
  }

  #handleLogin() {
    document.getElementById("login").addEventListener("click", () => {
      // ...
      this.#handleMakeCallClick();
      this.#showElement("call-container");
    });
  }

  #showElement(id) {
    const element = document.getElementById(id);
    element.style = "display: block";
  }

  #handleMakeCallClick() {
    document.getElementById("call").addEventListener("click", async () => {
      const callee = document.getElementById("callee").value;
      const call = this.sinchClientWrapper.makeCall(callee);
      this.audio.srcObject = call.incomingStream;
    });
  }

  // ...
}

Open two tabs of the app and login as two different users. Enter the second user ID as the callee in the first tab and click the "Call" button. You should be able to see in the console that it outputs Call progressing.

Next steps

Now that you've made a call, you can set up your application to handle incoming calls.

Handle incoming calls