This document explains how to integrate the Dolby.io Communications Client SDKs into your application. If you use UI components, please refer to the UXKit.

Install the SDK

The Dolby.io Communications SDK 3.7 for Web introduces changes, such as the new video processor functionality and modified Dolby Voice Codec implementation, that cause downloading additional SDK package files that need to be hosted at the same location as your application. This may require additional backend configuration. The configuration is required only in the case of delivering an application at one location and loading the SDK from another Content Delivery Network (CDN). Therefore, if you want to implement the join method with the Dolby Voice Codec or the setProcessor method to your application and use different web services for delivering your application and hosting the SDK, then you have to enable cross-origin resource sharing (CORS).

CORS is a browser mechanism based on HTTP headers that enables controlled access to resources located outside of a given domain. It allows a server to indicate any origins other than its own from which a browser must permit loading resources. To enable CORS, set the Access-Control-Allow-Origin response header to either your origin or a wildcard:

• Origin: The host origin of your web application

• Wildcard: The * operator that specifies that the resource can be accessed by any origin

Examples:

Access-Control-Allow-Origin: https://myconferencingapp.com/

Access-Control-Allow-Origin: *

Additionally, use the packageUrlPrefix accessor to set the actual location of the SDK package files:

VoxeetSDK.packageUrlPrefix = "some/url/"

Add the SDK into your application

To add the Dolby.io Communications SDK for Web into your application, you can either use a package manager or insert the proper script inside your HTML file.

If you want to use a package manager, add @voxeet/voxeet-web-sdk to your application by using the npm or yarn command, as in the following examples:

npm i @voxeet/voxeet-web-sdk

yarn add @voxeet/voxeet-web-sdk

If you want to use a CDN, add the following script to your HTML file:

<script
  src="https://cdn.jsdelivr.net/npm/@voxeet/voxeet-web-sdk/dist/voxeet-sdk.js"
  type="text/javascript"></script>

Initialize the SDK

The client SDKs provide the initializeToken method to authenticate against the service. For more information, see the section titled Initialize the SDK with secure authentication.

The application must request an access token from its backend and then initialize the SDK with it. Since an access token has a limited validity period, it needs periodic refreshing. In the application, the Dolby.io Communications Client SDKs invokes a callback provided to the initializeToken call when the access token needs to be refreshed. In this callback, a new access token must be requested from the application's backend, which in turn calls the client access token API again and returns a new token, which is passed back to the SDK by the application.

async function getAccessToken() {
    const url = serverURL + '/api/token';
    // Request an access token from your backend
    const response = await fetch(url);

    // extract the access token
    const json = await response.json();
    return json.access_token;
}

async function initializeSDK() {
    const accessToken = await getAccessToken();

    VoxeetSDK.initializeToken(accessToken, async () => {
        // This callback is called when the token needs to be refreshed.
        return await getAccessToken();
    });
}

initializeSDK();

Open a session

/* Example of participantInfo */
await VoxeetSDK.session.open({ name: "John Doe" });

Close a session

await VoxeetSDK.session.close();

Result

The Dolby.io Communications SDK is integrated with your application, so you have access to all the SDK functionalities.

Now you can easily configure your SDK. Tutorials available in the left-side navigation panel and reference documentation guides how to do it.