This starter project demonstrates the mechanics of making a Voice and Video Call with Dolby.io and allowing only authenticated users to access to your application using Auth0's Universal Login Page.
The sample can be run locally, by cloning the repository to your machine and then following the steps below.
- Go to Auth0 and click Sign Up.
- Use Google, GitHub or Microsoft Account to login or create a new account with your email.
- Get Your Application Keys:
When you signed up for Auth0, create a new application either using Getting Started or Applications tabs. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
-
You will use the Domain & Client ID information to fill the
auth_config.jsonwith the Dolby.io credentials that you'll learn how to obtain in the next steps.
-
Configure Callback URLs: If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to http://localhost:3000 if you don't want to specify a conference alias. It'll automatically set it to
web-sdk-starter. If there's a conference alias you would like to give as a query parameter in the URL, add http://localhost:3000/?alias=* to the Callback URLs.
-
Configure Logout URLs: If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000.
-
Configure Allowed Web Origins: If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Web Origins to http://localhost:3000.
To specify the application client ID and domain, make a copy of auth_config.json.example and rename it to auth_config.json. Then open it in a text editor and supply the values for your application:
- For DOMAIN and CLIENT_ID, you will use the information you get in the step 4.
To get creditentials from Dolby.io, first create a free account. After you login, go to Communications & Media tab and create an app. Copy the App key and App secret and fill the auth_config.json with related information.
{
"DOMAIN": "{AUTH0_DOMAIN}",
"CLIENT_ID": "{AUTH0_CLIENT_ID}",
"APP_KEY" : "{DOLBY_IO_APP_KEY}",
"APP_SECRET" : "{DOLBY_IO_APP_SECRET}"
}To test the application go to Auth0 Dashboard, User Management and create new users. We will use these users' login information when we're running the app.
After cloning the repository, run:
$ npm installto install the dependencies that are necessary to get the server up and running. Also install nodemon so that our server can be restarted on any code changes:
$ npm install -D nodemonThis will install all of the necessary packages in order for the sample to run.
This version of the application uses an Express server that can serve the site from a single page. To start the app from the terminal, navigate to ./video-calls/final directory and use one of the run methods below:
This will run the application using nodemon, watching for changes as we modify files.
$ npm run devThis will run the application as normal using node.
$ npm startYou should see your application running succesfully and only letting authenticated users to access the video call after following the previous steps.
This project is licensed under the CC0 1.0 Universal license. See the LICENSE file for more info.
For more information about Dolby.io Communications Web SDK, visit the Dolby.io Communications Web SDK documentation.
For more information about Auth0 JavaScript SDK Quickstart, visit the Vanilla JS Quickstart documentation. If you're having issues running the sample applications, check the FAQ.