After giving a first look at the dolby communication API. I really thought that It can be great for a niche target audience (podcasters, musicians, and stand up comics). That was the initial idea something private event for musicians, podcaster and stand up comics.
Then I thought it will be good if i add google authentication. So ended up adding firebase to the whole setup.
I templated the classroom template from GitHub of dolby GitHub repo.
The next idea was to have an email service built in the application so that user can create an invite list and send email to the respective people they wanna invite in an event.
- Audio show - Podcast,
- Video show - Music, Comedy,
- Get High- Fidelity audio and video for all
- Send invites to your close circle.
Features
- Login
- Audio Conferrence
- Video conferrence
- Creating Event
- Sending Email to multiple individuals.
- SignUp
- Create an event
- Send and invite to your close friends.
- Start the show.
This application demonstrates an educational classroom application.
- uses the Dolby.io Communications SDK for JavaScript
- uses Firebase Real-time Database
- bootstrapped with Create React App
You can learn more at https://docs.dolby.io/communications-apis/docs
Run the following to clone the repository:
git clone https://github.com/dolbyio-samples/meet-dolbyio-classroom.git
cd meet-dolbyio-classroomDolby.io credentials are defined in src/utils/voxeetUtils.js.
Find your Consumer Key and Consumer Secret by following these steps:
- Select the
SIGN INlink located in the upper right corner of the Dolby.io page. Log in using your email and password. - Click the
DASHBOARDlink visible in the upper right corner of the website. - Select your application from the
APPLICATIONScategory located on the left side menu. - Select the
API Keyscategory from the drop-down menu visible under your application. - In the
Communications APIssection, you can access yourConsumer KeyandConsumer Secret.
Enter your Dolby.io Credentials in /src/utils/voxeetUtils.js. That is, replace the placeholder text in:
const consumerKey = '<DOLBYIO_COMMUNICATIONS_API>';
const consumerSecret = '<DOLBYIO_COMMUNICATIONS_SECRET>';with the credentials from your application, found here. Note the initialization method shown here is suitable for localhost testing only, please refer to our documentation for initialization best practices.
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
firebaseConfigon this screen and paste them into thesrc/providers/Firebase.jsfile.
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 startYou should then be able to view the app locally on the development server.


