This application demonstrates a few features that are helpful when building experiences such as an education themed classroom.
- voice and video chat
- fixed layout for known participants
- muted participants until moderator unmutes
- visual indicator when audio is transmitted
- screen sharing
Learn more about it from the blog post Building a Classroom App.
This application was built as a react web application:
- uses the Dolby.io Communications Web SDK for voice and video chat
- uses Firebase Real-time Database to maintain state
- bootstrapped with Create React App
Begin by cloning the repository:
git clone https://github.com/dolbyio-samples/comms-app-web-react-classroom
cd comms-app-web-react-classroom
Dolby.io credentials are asked in a prompt()
popup upon loading the page. You can access the requested token from your dashboard by following this documentation.
Note the initialization method shown here is suitable for localhost testing only, please refer to our documentation for initialization best practices. You will want to be running a server-side component that can generate tokens for your application. You can find more authentication samples for how to set these up.
Firebase credentials are defined in src/providers/Firebase.js
.
- Log into the Firebase Console and click "Create a Project.". Give the project a name such as "dolbyio-classroom-demo". Accept the terms and click "Continue".
- We recommend unselecting Google Analytics while in development, then click "Continue".
- Click the "</>" icon to add a Web App (image below). Give your app a name such as "classroom-demo" and click "Register app". You do not need Firebase Hosting at this point.
- Copy the details provided in
firebaseConfig
on this screen and paste them into thesrc/providers/Firebase.js
file.
You can replace the entire firebaseConfig object:
const firebaseConfig = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "<DATABASE_ID>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<MESSAGING_SENDER_ID>",
appId: "<APP_ID>",
measurementId: "<MEASUREMENT_ID>"
};
With your config object that you copied from the Firebase console.
- If you try running the app at this point, you'll get an error that looks like this:
@firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly
. This is because we have not set up the Realtime database yet.
-
Continue to the Console and click "Build" and then "Realtime Database".
-
Click "Create Database". Click "Next" and accept the default setting.
-
Click "Start in test mode", then click "Enable."
Now the app should connect to Firebase.
For the Classroom App, the data model in Firebase looks like this:
- There are Firebase objects for each meeting room, the room id (cell) creates the key to the object in the Realtime Database
- Inside each meeting room key object there are two properties of note:
classRoom
(object) contains information about all of the student seats- Inside each seat is
isCalledOn
(boolean)isHandRaised
(boolean)name
(string)participantId
(string |false
)
- Inside each seat is
teacherId
(string |false
) contains the participant ID of the teacher, if the room has no teacher, this value isfalse
After all credentials are set, you can run with:
npm install
npm run start
This is what the result looks like:
Using decades of Dolby's research in sight and sound technology, Dolby.io provides APIs to integrate real-time streaming, voice & video communications, and file-based media processing into your applications. Sign up for a free account to get started building the next generation of immersive, interactive, and social apps.