Overview

This JavaScript application highlights how to build a fully-featured conferencing app utilizing a range of offerings provided by the Web SDK.

Getting Started

Clone the Repository

Run the following:

git clone https://github.com/voxeet/voxeet-io-web
cd voxeet-io-web

Follow Setup Instructions

You'll need to complete a few setup steps as described in the README.

✓ Set your Dolby.io Consumer Key and Consumer Secret in backend component
✓ Run setup for frontend client application

Key Concepts

This project can be conceptualized as two separate parts working together to provide a seamless conferencing experience.

Authentication flow

Back end token authentication server

The back end is a token authentication server that uses an Authentication API to retrieve an access token on behalf of the front end. This process is more secure than directly passing your API secrets which could be exposed during production. Instead, the token authentication server securely passes a token that allows the conferencing app to make an API request on behalf of the user over an HTTPS encrypted connection. This prevents API secrets from leaking and offers a more secure experience for users.

The following diagram illustrates the relationship between the back end token authentication server and the front end client application.

Front end client application

With the secure token authentication set up on the back end, the front end is able to do the heavy lifting providing UI customization through the UXKit ConferenceRoom object. Additionally, the front end, with a now secure token, can call the Dolby.io Communications Client SDKs allowing for access to all SDK functionality.

The code below highlights how the token is used to initialize the SDK:

const tokenUrl = serverURL + '/api/token';
fetch(tokenUrl)
    .then((data) => data.json())
    .then((result) => {
        VoxeetSDK.initializeToken(result.access_token, async () => {
            // This callback is called when the token needs to be refreshed.
            const httpResponse = await fetch(tokenUrl);
            const dataJson = await httpResponse.json();
            return dataJson.access_token;
        });
    })
    .catch((error) => {
        // An error has occurred
        console.error(error);
    });

Demo

Experience the working application demo by visiting: https://showcase.capi.dolby.io/