SIGN UP

Using Voximplant Web SDK

Using Voximplant Web SDK

Loading Web SDK from CDN

Before Web SDK can be used it should be loaded and initialized. Since Web SDK is a javascript library it can be loaded using standard HTML code for embedding javascript library into a web page (usually it's added somewhere before closing HEAD tag):

<script type="text/javascript" src="//cdn.voximplant.com/edge/voximplant.min.js"></script>

 

Getting started with VoxImplant.Client singleton

VoxImplant.Client is a Singleton class and the main class of the SDK that provides access to VoxImplant's functions, getInstance function is used to receive its instance as shown below:

const voximplant = VoxImplant.getInstance();

After Voximplant javascript library has been loaded it should be initialized using init function before any other function of the SDK can be used. VoxImplant.Config instance can be passed to the init function as an optional parameter. It lets you specify some of the SDK settings. VoxImplant.Events.SDKReady event will be dispatched after the SDK has been successfully initialized. Please see the following example:

const voximplant = VoxImplant.getInstance();
voximplant.addEventListener(VoxImplant.Events.SDKReady, () => {
  // SDK initialized, connect function can be used now
  // for a connection to the VoxImplant Cloud
  voximplant.connect();
});
voximplant.init();

Connect function is used in SDKReady handler to establish data connection between browser and the Voximplant Cloud. In the similar manner developer should add the following event listeners: VoxImplant.Events.ConnectionEstablished , VoxImplant.Events.ConnectionFailed , and VoxImplant.Events.ConnectionClosed to handle connection events.

voximplant.addEventListener(VoxImplant.Events.ConnectionEstablished, () => {
  // connection was established successfully
});
voximplant.addEventListener(VoxImplant.Events.ConnectionFailed, () => {
  // connection failed
});
voximplant.addEventListener(VoxImplant.Events.ConnectionClosed, () => {
  // connection was closed
});

The last thing that should be done before call functions become available after the connection has been established is authorization: the Application User's username and password should be passed to login function. VoxImplant.Events.AuthResult event is used to notify about the login result.

voximplant.addEventListener(VoxImplant.Events.AuthResult, event => {
  if (event.result) {
    // Successful authorization
  } else {
    // Authorization failed
  }
});

 

Using VoxImplant.Config to specify SDK settings during the initialization

There are number of settings that can be specified while the SDK initialization, let's review them all one-by-one:

  • micRequired - if set to true, SDK will show microphone access dialog right after the initialization of the SDK. VoxImplant.Events.MicAccessResult event will be dispatched after user allowed or denied access to the microphone.
  • videoSupport - can be used to enable video calls support (for Flash mode only for now)
  • progressToneCounry - Country code in ISO format for progress tone generated automatically if progressTone set to true. Has "US" value by default.
  • progressTone - Automatically plays progress tone by means of SDK according to specified progressToneCountry if set to true.

Please note that SDK currently supports only US and Russian progress tones generated automatically. We will add other countries soon. Meanwhile you can use browser-based audio playback capabilities for that purpose.

The following example shows how the settings can be passed to init function:

voximplant.init({
  micRequired: true,
  progressTone: true,
  progressToneCountry: "US"
});

Making calls

After the SDK was initialized and connected to the Voximplant Cloud it's now time to make your first call. Since the call can end in different ways there is a group of the call events that can be dispatched by the Call class instance. The call function of the VoxImplant.Client class is used to make an outgoing call from the SDK.

const call = voximplant.call("numbertocall");
call.addEventListener(VoxImplant.CallEvents.Connected, event => {
  // event - the instance of VoxImplant.CallEvents.Connected class,
  // use event.call to get the instance of VoxImplant.Call for this call
  // call was connected succesfully
});
call.addEventListener(VoxImplant.CallEvents.Disconnected, event => {
  // event - the instance of VoxImplant.CallEvents.Disconnected class,
  // use event.call to get the instance of VoxImplant.Call for this call
  // call was disconnected
});
call.addEventListener(VoxImplant.CallEvents.Failed, event => {
  // event - the instance of VoxImplant.CallEvents.Failed class, use
  // event.call to get the instance of VoxImplant.Call for this call, or
  // event.code and event.reason to get the status code and the reason of
  // the call failure call failed
});
call.addEventListener(VoxImplant.CallEvents.ProgressToneStart, event => {
  // event - the instance of VoxImplant.CallEvents.ProgressToneStart class,
  // use event.call to get the instance of VoxImplant.Call for this call
  // Event dispatched when progress tone playback starts
});
call.addEventListener(VoxImplant.CallEvents.ProgressToneStop, event => {
  // event - the instance of VoxImplant.CallEvents.ProgressToneStop class,
  // use event.call to get the instance of VoxImplant.Call for this call
  // Event dispatched when progress tone playback stops
});

 

Manage calls

The SDK allows you to make different number of outgoing calls which can be controlled on both SDK and VoxEngine side. There are a few functions to control calls on the SDK side and it's a good idea to have access to each call instance via some variable. The list of the functions is available at VoxImplant.Call page from the Web SDK Reference. Here are just a few simple examples:

call.muteMicrophone(); // don't send audio from microphone to the call
call.sendTone("0"); // send tone for 0 key
call.unmuteMicrophone(); // start sending audio from microphone to the call
call.hangup(); // hangup the call

Receiving calls

First of all, we want to know when there is an incoming call to user connected to the Voximplant Cloud using Web SDK. There is a special event for that - VoxImplant.Events.IncomingCall , adding event listener to the VoxImplant.Client instance lets us handle this event.

VoxImplant.getInstance().addEventListener(
  VoxImplant.Events.IncomingCall, event => {
  // answer the incoming call, or decline() to decline
  // event.call.number() will return Caller ID
  event.call.answer();
});
Tags:web sdk
B6A24216-9891-45D1-9D1D-E7359CEB8282 Created with sketchtool.

Comments(0)

Add your comment

To leave a comment, first confirm that you are not a robot. It's free

Recommend

Get your free developer account or talk with our sales team to learn more about Voximplant solutions
SIGN UP
Contact sales

Please complete this field.

Please complete this field.

Please complete this field.

Choose the solution

Please complete this field.

Please complete this field.