Standalone Conference App Supporting Multiple Layouts

React web application with multiple layouts and commonly used features such as recording, screen sharing, and chat.

12001200

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
  • Voice and video conferencing
  • Start and stop video
  • Microphone and camera device selection
  • Multiple participant layouts
  • Chat messaging
  • Meeting recording
  • File and video sharing
  • Participant signal strength
  • Speaker tracking
  • Token authentication with server component
  • HTML/CSS
  • JavaScript/React
  • Node.js

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.

40144014

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/

24772477

Did this page help you?