Standalone Conference App Supporting Multiple Layouts
React web application with multiple layouts and commonly used features such as recording, screen sharing, and chat.

Standalone app with several features
Overview
This JavaScript application highlights how to build a fully-featured conferencing app utilizing a range of offerings provided by the Web SDK.
Features | Tech Stack |
---|---|
|
|
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 App key and App 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.

The authentication sequence between the client application (front end) and the customer's server (back end).
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/
Updated 18 days ago