Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.

Latest commit

 

History

History
150 lines (92 loc) · 6.88 KB

README.md

File metadata and controls

150 lines (92 loc) · 6.88 KB
Raw

⚠️ This repository is no longer maintained ⚠️

Dolby.io Live Events React App

Overview

This project demonstrates what an events experience is like, built using React.

Intended use Features Tech stack
Live 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
Chat with other participants*
Promote a viewer to co-host*
  • Requires a PubNub account to work.

Requirements and supported platforms

The app currently supports

  • Chrome 100+
  • Edge 100+
  • Safari 111+
  • Firefox 16.3+

Run the demo directly

You can deploy the Dolby.io Virtual Events app without needing to clone and build the app using the Deploy to Netlify button. You will need:

  • A Netlify account to which you're logged into
  • Your Dolby.io App key and secret
  • [Optional] Publisher and Subcriber tokens, along with the secret key for PubNub. This is only needed if you would like to experience chat and promoting viewers to host.

Refer to this guide on how to obtain your Dolby.io tokens and this guide from PubNub on how to obtain your PubNub tokens.

Deploy to Netlify from fork

Getting Started

The following steps will quickly get you started testing the Dolby.io Communications APIs capabilities.

Pre-requisites

To build this app, you will need a Dolby.io account (see the How to get a Dolby.io account section).

You will also need to install the following:

Basic terminology

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 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.

How to get a Dolby.io account

To set up your Dolby.io account, go to Dolby.io 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:

  1. Go to the Dashboard, and click add new app if you do not have an existing app. dashboard
  2. To enable events streaming, your app should be opted into the open beta program. You can find this at the bottom of the Communications APIs sidebar navigation when you click on your app.

dashboard

How to run the Events app

To run the application locally, clone the repository and then perform the following steps.

Install dependencies

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.

yarn

Repo structure

The code in this repository is organised in the following way

  • The /events/src/ directory contains all the front-end code for the events app. Within this directory:

    • 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.

  • The /backend/ 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.

Set up .env file

Create a new file called .env in the events folder and copy the contents of .env.example into it.

You will need to provide the values for KEY and SECRET from your Dolby.io app. To obtain your key and secret from the Dolby.io dashboard:

  1. Go to the Dashboard and click on the API Keys next to your application. dashboard
  2. On the next screen, copy the App key and App secret and paste them in your .env file against the marked variables. token

To enable chat and the ability to promote a viewer to host, you will need to provide your PUBNUB_PUBLISH_KEY, PUBNUB_SUBSCRIBE_KEY, and PUBNUB_SECRET_KEY as well. To setup PubNub, please go through the enabling chat guide in our customization guide.

The secrets will not be exposed on the frontend.

Running the app

To run the application locally, execute the command below inside the /events directory.

yarn dev

Open the app in a browser

Once the dev server starts, open http://localhost:3000 in the browser. The application will launch at this address and will look like the screenshot below.

built

Making the App your own

Follow our customization guide to better understand how you can extend the app to make it your own.

More resources

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.