Dolby.io Water Cooler App

This project was bootstrapped with Create React App.

Cloning the Repository

Run the following:

git clone https://github.com/dolbyio-samples/meet-dolbyio-water-cooler.git
cd meet-dolbyio-water-cooler

Setting Credentials

Before using the SDK in your project, find your Consumer Key and Consumer Secret by following these steps:

1. Select the SIGN IN link located in the upper right corner of the Dolby.io page. Log in using your email and password.
2. Click the DASHBOARD link visible in the upper right corner of the website.
3. Select your application from the APPLICATIONS category located on the left side menu.
4. Select the API Keys category from the drop-down menu visible under your application.
5. In the Interactivity APIs section, you can access your Consumer Key and Consumer Secret.

Ensure that you enter in 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: https://dolby.io/dashboard/applications/summary

Firebase credentials are currently defined in src/providers/Firebase.js.

To migrate to a different Firebase account:

• Log into the Firebase Console, click "Create a Project."

• Give the project a name.

• Accept the terms by checking the check box and click "Continue."

• On the next screen, unselect Google Analytics (unless you want that), and click "Continue."

• Wait until it is set up and click "Continue."

• Click the "</>" icon to add a Web App.

• Type a name for the app and click "Register app."

• Copy the details provided on this screen and paste them into the codebase where Firebase is configured (typically located in src/providers/Firebase.js).

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

• Click "Build" and then "Realtime Database."

• Click "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 Water Cooler App, the data model in Firebase looks like this:

There are Firebase objects that represent each user located at a path of the form ${cell}/user${selfId} where cell is the ID of the hexagon within the overall map, and selfId is a UUID unique to each user. The object located at that path has the following properties: position - The pixel coordinates of the user. color - A random color assigned to the user. id - The ID of the user (the same as selfId in the object path)

Running the Application

After all credentials are set, you can run with:

npm install
npm run start