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.<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: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 anAudio
-reference in the constructor. Add three new callback-functions for handling callbacks fromCallListener
inSinchClientWrapper
. Add a function that handles outgoing calls called#handleMakeCallClick
. In the bottom of#handleLogin
event listener for login clicks add code that shows thecall-container
and calls#handleMakeCallClick
. Look at the following JavaScript example to see it in action: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.