This project demonstrates what an events experience is like, built using React.
| Intended use | Features | Tech stack |
|---|---|---|
| Events | create, start, stream and stop an event | Typescript/Javascript |
| Webinars | A/V controls for hosts and viewers | HTML/CSS |
| Virtual events | Mute camera and microphone | React |
| Screen share | ||
| Invite co-hosts and viewers | ||
| Event Recording | ||
| Participant List |
The app currently supports
- Chrome 100+
- Edge 100+
- Safari 111+
- Firefox 16.3+
The following steps will quickly get you started testing the Dolby.io Communications APIs capabilities.
To get started building this app you will need a Dolby.io account. You will also need the following -
As you browse through the source code and documents, you might come across some of these terms
- A host is a participant with additional permissions to manage the conference and other participants.
- A viewer is a participant who can only receive video and audio stream from the conference.
- A mixer app is a web app based on the Dolby.io communications APIs that composes multiple streams of videos into a single stream and passes that on to any RTMP or webRTC based consumer. You can customise the participant layout positions using the Mixer config file. Refer to this blog for more details.
- A proxy-app-server is an intermediary API server that communicates with the Dolby.io Communications Platform in order to provide functionality such as RTS/RTMP/HLS streaming or consuming web-hook data. You can see our sample implementation here.
To setup your Dolby.io account, go to the Dolby.io dashboard and register for an account. After confirming your email address, you will be logged in.
If you did not receive a verification email, check your Spam or Junk email folders.
Setting up your Dolby.io app
To set up your app for events, you will need to:
- Go to the Dashboard, and click
add new appif you do not have an existing app.
- To enable events streaming, your app should be opted into the open beta program. You can find this at the bottom of the
Communications APIssidebar navigation when you click on your app.
Run the following steps after cloning the repository to run the application locally.
note : This guide is written with Yarn in mind. We have not validated this project with other package managers.
Open a terminal window in the root directory of your project folder. Install the project's dependencies using the following command.
yarnThe code in this repository is organised in the following way
- The
src/directory contains all the front-end code for the events app. Within this directoryhooks/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.
- The
api-proxy/contains the code for the proxy server.
This project is built with the Comms UI Kit for react library for simplicity and re-use of standard Communications API based components.
Please follow the guide in the api-proxy read me to get your proxy server up and running. This is required for the events app to function.
Execute the following command to run the application locally in a terminal window inside the root directory.
You will need a second terminal instance along with the one that runs your web proxy code.
yarn devAfter the appropriate message appears in the terminal window, open http://localhost:3000 in the browser. The application will launch at this address.
If the app isn't loading, make sure you've started the proxy server.
If you want to start your proxy server on a port other than :4000, you can make a .env file and set the proxy server location using the
VITE_API_PROXY_URLvariable.
Want to experience the app without building it? Try our Virtual Events Demo app.
Looking for more sample apps and projects? Head to the Dolby.io Project Gallery.