Web Client SDK APIs and Integration Workflow

12 min

Web Client SDK APIs and Integration Workflow

Initialize Library

WebRTC client SDK library needs to be initialized prior to using. A sample code snippet to do so is as below.

Step1: Import the exotel client library as below.

import { ExotelWebClient as exWebClient } from '@exotel/webrtc-client-sdk';

Step2: Initialize the Exotel Web Client with SipAccountInfo and Callbacks using the API initWebrtc.

// Initialise sipAccountInfo  dictionary   
    const sipAccountInfo = {
      'userName': ‘Username’,
      'authUser': ‘Username’,
      'sipdomain': ‘Domain’,
      'domain': ‘HostServer’ + ":" + Port
      'displayname': ‘DisplayName’,
      'secret': ‘Password’,
      'port': ‘Port’,
      'security': ‘wss’,
    }

// Initialize Callbacks:

exWebClient.initWebrtc(sipAccountInfo,
                   RegisterEventCallBack, 
                   CallListenerCallback,
                   SessionCallback)

This API also takes as input three callbacks:

RegisterEventCallBack handles registration states as they change.

CallListenerCallback handles call events as they occur.

SessionCallback handles notifications for multiple tab sessions.

The details of the callbacks are explained in the corresponding flows.

Argument Details

Args	DataType
sipAccountInfo	object
RegisterEventCallBack	Callback function
CallListenerCallback	Callback function
SessionCallback	Callback function

sipAccountInfo
authUser	String	SIP username to register.
userName	String	Used as a unique map index for phones. Same as authUser.
displayName	String	Local Displayname on Dialer.
secret	String	SIP Password
sipdomain	String	SIP public domain
security	String	“wss”/”ws” typically “wss”
port	String	443 for Websockets.

Opus Codec Preference - Optional

To enable opus codec, it can be enabled from Exotel Voip domain settings, for that we can raise a request to [email protected] to enable the opus codec support.

Once opus codec is enabled, then and if browser is not preferring opus codec in SIP 200 OK, then we have an API to make opus codec as preferred codec.

exWebClient.setPreferredCodec(“opus”);

Download Logs - Optional

To help with debugging or sharing logs with support, whenever a user faces an issue, we can invoke the downloadLogs method.

This will download a “.txt” file (e.g. ”webrtc_sdk_logs_2025-04-03.txt” ) containing 1000 logs stored in the browser’s localStorage.

exWebClient.downloadLogs();

Register the SIP Phones

Before receiving / making any call, the SIP phone needs to be registered; and the API for this purpose is “DoRegister”.

API Name	ExotelWebClient.DoRegister
Args	None

Exported To	Application UI

//Ensure that initWebRTC is invoked before calling DoRegister
exWebClient.DoRegister();

Once the registration has been done, the response comes in the registrationCallback with the events, “registered ”/ ”terminated” as below.

API Name	RegisterEventCallBack
Args	Params	Type	Values
	state	String	"registered" / “terminated” / “sent_request” / “unregistered”
	phone	String	Username
Exported To	Application UI

function RegisterEventCallBack (state, phone){
    if (state === 'registered') { 
// Successful registration
      setRegState(true)
    } else if (state === 'unregistered') { 
// Successful unregistration
      setRegState(false)
    } else if (state === 'terminated')  { 
// Registration/Unregistration failed
      setRegState(false)
    } else if (state === 'sent_request')  { 
// Registration/Unregistration Request Sent
      if (unregisterWait === "true") {
        unregisterWait = "false";
        setRegState(false)
      }
    }
  }

UnRegister the SIP Phones

To stop getting calls anymore, the SIP phones need to be unregistered. The API to do so is “UnRegister”.

API Name	ExotelWebClient.UnRegister
Args	None

Exported To	Application UI

//Ensure that initWebRTC is invoked before calling DoRegister.
exWebClient.UnRegister();

The response to unregistration comes in the registrationCallback as below.

API Name	RegisterEventCallBack
Args	Params	Type	Values
	state	String	"registered" / "unregistered" / “terminated” / “sent_request”
	phone	String	Username
Exported To	Application UI

  function RegisterEventCallBack (state, phone){ 
    if (state === 'registered') { 
// Successful registration
      setRegState(true)
    } else if (state === 'unregistered') { 
// Successful unregistration
      setRegState(false)
    } else if (state === 'terminated')  { 
// Registration/Unregistration failed
      setRegState(false)
     } else if (state === 'sent_request')  { 
// Registration/Unregistration Request Sent
      if (unregisterWait === "true") {
        unregisterWait = "false";
        setRegState(false)
      }
    }
  }

Note 1: If you have more than one phone, the second argument “phone” would give the indication as to which phone got unregistered.

....continue to Web Client SDK APIsWebClient