This document explains how to integrate the Dolby.io Communications Client SDKs into your application.

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 example:

npm i @voxeet/voxeet-web-sdk

yarn add @voxeet/voxeet-web-sdk

Host files

As some Web SDK functionalities require downloading additional SDK package files, the files located in the @voxeet/voxeet-web-sdk/dist folder need to be additionally hosted. For hosting, you can either use your application server or CDN.

If you want to use your own application server, upload files from the @voxeet/voxeet-web-sdk/dist folder to a separate folder on your server and copy the folder URL. Then, set the URL as the packageUrlPrefix, as in the following example:

VoxeetSDK.packageUrlPrefix = "some/url/"

If you want to deliver an application at one location and load the SDK from another Content Delivery Network (CDN), you have to enable cross-origin resource sharing (CORS). 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

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

Access-Control-Allow-Origin: *

Alternatively, if you want to use CDN for hosting the files, add a CDN file location to your HTML file, as in the following example:

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

await 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.