Skip to content
Voice-video/Getting started/
/
Make a call
Last updated

Make an audio call

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

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

Set up the UI

Before you can make a call, prepare the app's UI.

Initiate an audio call

  1. Add the following HTML sample in the index.html <body> section:

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

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

    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);
      },
    });
  }
}

  3. In the UI class, instantiate an Audio element in the constructor. Add three callback functions to handle CallListener events. Add a function #handleMakeCallClick for outgoing calls. At the end of the #handleLogin handler, show the call-container and call #handleMakeCallClick:

    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;
    });
  }

  // ...
}

  4. Open two tabs and log in as two different users. Enter the second user ID as the callee in the first tab and click Call. You should see Call progressing in the console.

Next steps

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

Make a call

Previous page
Next page