Building a Virtual Event and Webinar Application with React and Dolby.io

With the release of Dolby.io Communications version 3.9.0, we have added the ability to live stream your audio and video calls directly through the Dolby.io Communications APIs. This can be useful in situations where you are trying to broadcast the virtual conferencing to another audience, such as in a webinar or other event. When combined with a UI library, such as ReactJS, we can create an events app that is not only intuitive for participants to join, but for an audience to view.

In this guide, we’re going to showcase a ReactJS virtual events and webinar app powered by Dolby.io Communications APIs and NodeJS while incorporating our real-time streaming along the way, using the Communications UI Kit for React library.

The Events React App Example Code

The Communications Events example app can be found on GitHub at dolbyio-samples/comms-app-react-events.

To get started building this app you will need a Dolby.io account. You will also need the following –

• A cloned copy of the sample app.
• NPM v8.11 or higher
• Yarn v1.22.19 or higher
• Node v18.0.0 or higher

Once you’ve cloned the repo and set up your Node environment with the above dependencies, install the repo’s dependencies with the following command in your terminal:

# /comms-app-react-events
yarn

While other Node tools like NPM or pNPm may work, they have not been tested for this particular app, and your mileage may vary.

Obtaining Dolby.io Credentials

While your project is installing we can briefly discuss how to set up your Dolby.io account. After you create an account, you can use the Dolby.io Dashboard to manage API credentials required to use the video and voice conferencing features. Follow these steps:

1. Go to the Dashboard, and click “ADD NEW APP” if you do not have an existing app. 
2. Go to the Dashboard, and click on the API Keys next to your application. 
3. On the next screen, copy the App key and App secret and paste them in your .env file against the marked variables. 

Setting up the Proxy Server

Now that we have all the credentials required to connect to the Dolby.io servers, let’s update the project credentials. In this project, we are going to host a API Proxy server that acts as a proxy to the Dolby.io APIs. To add the credentials, we need to edit the .env.example, which can be found inside of /api-proxy, by renaming the file to .env and populating the file with the respective credentials for KEY and SECRET found in the dashboard. This ensure we aren’t hard coding our variables directly in the code.

Then, we want to change the current terminal directory over to the proxy server directory and install its Node environment.

cd api-proxy
# /comms-app-react-events/api-proxy
yarn

Once done installing, we can run our proxy server with:

yarn dev

By running this proxy server in the background, we are able to communicate with Dolby.io services without exposing our credentials to the public, creating a more secure solution for a public facing application. While the Dolby.io services could be run on the same server, it would be at higher risk for API secret exposure, giving unauthorized access to your account.

Running the Main Event App

With our proxy server up and running, open a new terminal instance without shutting down the proxy server. Navigate back to the root project folder if not there already and run:

# /comms-app-react-events
yarn dev

We can now open this app in our browser, which by default will be at http://localhost:3000.

This application provides many functions out of the box already, with screen sharing, invite links, background blur, recording, viewer numbers, and more. This will replicate a similar interface you might see in commercial, SaaS products of this nature, but you can customize this all yourself.

Making it Your Own

With your Dolby.io account already created, building your own bespoke events app is easy. This project is built with the Comms UI Kit for React library for simplicity and the re-use of standard Dolby.io Communications APIs-based components, making it easy for you to customize it for your own specific needs. Learn more from this blog post or if you want more React examples, see the Real-Time streaming sample app.

In this particular example, the code you will want to modify can be found here:

• The src/ directory contains all the front-end code for the events app.
  • hooks/ contains wrapper functions around our SDK for re-usable functionality.
  • components/ contains UI components that encapsulate and provide functionality.
  • utils/ provides some generic helper functions.
  • context/ contains the React Context for the side drawer and the main component window.

You can learn more at the dedicated gallery page here. We suggest playing around with the code here, as well as the CSS in the styles/ folder to really make it your own. This could be used as a basis for your own apps for your company all hands, a sales webinar to demo your product, or a university lecture served virtually as a few examples. Get creative!

Feedback or Questions? Reach out to the team on Twitter, LinkedIn, or via our support desk.