Create a Basic Audio Conference Application
Prerequisites
Make sure that you have:
- A Dolby.io account
- A working webcam and a microphone
For reference, see the GitHub sample repository.
Procedure
Create your project
1. Create the project folders and files, as in the following example:
.
├── src/
│ ├── scripts/
│ │ └── client.js
│ │ └── ui.js
└── └── index.html
You can automate this step using the following shell script:
mkdir -p src/scripts
touch src/index.html src/scripts/client.js src/scripts/ui.js
New-Item src/scripts -ItemType Directory
New-Item src/index.html
New-Item src/scripts/client.js
New-Item src/scripts/ui.js
ui.js
contains code related to the UI managementclient.js
contains code related to the conference managementindex.html
contains code related to the main interface
In order to create a video call you will need to include the Dolby.io Communications Web SDK in your application. You can do this by adding a script
element in the head
section to include the SDK from a hosted location (CDN).
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@voxeet/[email protected]/dist/voxeet-sdk.js"></script>
Your project should now look like:
.
├── src/
│ ├── scripts/
│ │ └── client.js
│ │ └── ui.js
└── └── index.html
2. Open the index.html
file in a code editor and paste there the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Web Video Conference Application</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@voxeet/[email protected]/dist/voxeet-sdk.js"></script>
<script src="scripts/ui.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<h1 id="name-message">Logging in...</h1>
</div>
<script type="text/javascript" src="scripts/client.js"></script>
</body>
</html>
Initialize the SDK with your Dolby.io credentials
Initialize the SDK using the secure authentication method that uses a token in the application. For more information, see the Initializing the SDK document. For the purpose of this example, we are using a client access token generated from the Dolby.io dashboard. It is recommended that you create a new Sample
application for this tutorial.
Open the client.js
file, create a function named main
, and call the VoxeetSDK.initialize
method, replacing the ClientAccessToken
string with the token generated from the Dolby.io dashboard.
const main = async () => {
// Generate a client access token from the Dolby.io dashboard and insert into access_token variable
let access_token = "ClientAccessToken";
VoxeetSDK.initializeToken(access_token, (isExpired) => {
return new Promise((resolve, reject) => {
if (isExpired) {
reject('The access token has expired.');
} else {
resolve(access_token);
}
});
});
};
main();
Open and close a session
To allow creating and joining conferences, log in with a user name. In this tutorial, random user names are assigned.
1. Open the client.js
file and add a list of random names at the top of the file.
const avengersNames = [
"Thor",
"Cap",
"Tony Stark",
"Black Panther",
"Black Widow",
"Hulk",
"Spider-Man",
];
let randomName = avengersNames[Math.floor(Math.random() * avengersNames.length)];
2. Edit the main
function and open the session just after the SDK initialization. Use the open
method from the SessionService
:
const main = async () => {
// Generate a client access token from the Dolby.io dashboard and insert into access_token variable
let access_token = "<ClientAccessToken>";
VoxeetSDK.initializeToken(access_token, () => {
return new Promise(function (resolve, reject) {
resolve.initializeToken(access_token);
});
});
try {
// Open the session
await VoxeetSDK.session.open({ name: randomName });
} catch (e) {
alert("Something went wrong : " + e);
}
};
This step logs in to Dolby.io and enables using the SDK. To make this information visible in the UI, follow the next steps.
3. To highlight the logged in status in the UI, open the ui.js
file and define a function called initUI
.
const initUI = () => {
const nameMessage = document.getElementById("name-message");
nameMessage.innerHTML = `You are logged in as ${randomName}`;
};
4. Go back the client.js
file and, after opening the session, call initUI
.
try {
...
await VoxeetSDK.session.open({ name: randomName });
initUI();
}
Add a joining option
1. To edit the layout, open the index.html
file and add a div
with the id form
. In this new div, add an input
element with the id alias-input
and a button
element with the id join-btn
.
<div id="app">
<h1 id="name-message">You are logged out.</h1>
<!-- Add the form just after name-message h1 -->
<div id="form">
<label>Conference alias :</label>
<input id="alias-input" value="Avengers meeting" />
<button id="join-btn" disabled>Join</button>
</div>
</div>
2. To add interface linking, open the ui.js
file and edit the initUI
function. Declare joinButton
and conferenceAliasInput
with references to the input
and button
elements added in the previous step. Enable the joinButton
.
const joinButton = document.getElementById("join-btn");
const conferenceAliasInput = document.getElementById("alias-input");
joinButton.disabled = false;
Reminder: The initUI
is called when the session has been opened successfully. At this point, the user can start to participate in a conference and the joinButton
is enabled in initUI
.
3. To add the logic implementation, write the onclick
handler for the joinButton
. This handler:
- Creates a conference using the
ConferenceService.create
method. It takes theconferenceAlias
in the parameter object. - After creating a conference, the conference is joined using the
ConferenceService.join
method. The first parameter is theconference
object returned from thecreate
method.
Edit the initUI
function to write the joinButton
onclick handler:
joinButton.onclick = () => {
let conferenceAlias = conferenceAliasInput.value;
/*
* 1. Create a conference room with an alias
* 2. Join the conference with its id
*/
VoxeetSDK.conference
.create({ alias: conferenceAlias })
.then((conference) => VoxeetSDK.conference.join(conference, {}))
.then(() => {
joinButton.disabled = true;
})
.catch((err) => console.error(err));
};
Add a leaving option
1. Open the index.html
file and add a new button
element with the id leave-btn
.
<div id="form">
...
<button id="join-btn">Join</button>
<!-- Add the button after join-btn -->
<button id="leave-btn" disabled>Leave</button>
</div>
2. Open the ui.js
file and declare the leaveButton
in the initUI
function.
const leaveButton = document.getElementById("leave-btn");
3. To enable users to leave the conference, enable the leaveButton
after joining the conference.
- Open the
ui.js
file and edit theonclick
handler for thejoinButton
.
VoxeetSDK.conference
.create({ alias: conferenceAlias })
.then((conference) => VoxeetSDK.conference.join(conference, {}))
.then(() => {
joinButton.disabled = true;
// Enable the leaveButton after resolving the join promise
leaveButton.disabled = false;
})
.catch((err) => console.error(err));
- Edit the
initUI
function to write theleaveButton
click handler.
leaveButton.onclick = () => {
VoxeetSDK.conference
.leave()
.then(() => {
joinButton.disabled = false;
leaveButton.disabled = true;
})
.catch((err) => console.error(err));
};
Run your application
There are two ways of testing the application: an easier method (option 1) and a more difficult method (option 2).
Option 1
This option only works with browsers on your computer. To serve your application to another computer, use Option 2.
This option does not work with Safari, which requires a secure HTTPS connection to enable WebRTC applications. It is recommended to use Chrome for this option.
This option does not allow you to use the Dolby Voice codec in the web browser.
1. Open the index.html
file in a browser.
2. Check if you joined a conference with enabled audio and if you can turn your video on and off.
3. Join the same conference from another browser tab and try to speak. Check if you can hear yourself.
Option 2
1. Start an HTTP server to serve your files in the src/
folder. It is recommended to use live-server
which allows live reloading of the application. Live reloading of the application can be useful during development.
To use live-server
, make sure that you have node.js and npm installed.
2. Install the live-server
using the following command:
npm install live-server -g
3. To serve the files using HTTPS, generate an SSL certificate. Use mkcert
for generating self-signed certificates.
- Go to mkcert github and follow the
Installation
section for your operating system.
Note: If you don’t want to generate SSL certificates, you can use ngrok
to create a tunnel to a public https URL.
- After installation of the
mkcert
, use the following command to install it in the system trust store:
mkcert -install
4. Generate a certificate.
-
Create a directory at the root of your project folder, name it
config
. Use it for storing certificates and configuration files for HTTPS. -
Open a terminal and navigate to path/to/your_project/config.
-
Generate SSL certificate for localhost using the following command:
mkcert localhost
You should now have two files localhost-key.pem
and localhost.pem
in your config folder.
- Create a
https-config.js
file in theconfig/
folder. Include in it the following content:
const fs = require("fs");
module.exports = {
cert: fs.readFileSync(__dirname + "/localhost.pem"),
key: fs.readFileSync(__dirname + "/localhost-key.pem"),
passphrase: "12345",
};
This file will be passed as an argument of live-server
to use HTTPS protocol when serving the src/
folder.
- Open a terminal and navigate to the
src
folder in your project. Paste there the following command:
live-server --port=4444 --https=../config/https-config.js
This starts live reloading server on port 4444 using HTTPS protocol.
- Open your browser and go to the https://localhost:4444. You should have access to your application.
On Chrome on macOS, the Unsecure Connection Error may appear when you try to reach your application. In this case, follow the steps below:
1. If you are using Chrome version 81 or later, go to Chrome settings
▸ Privacy and security
▸ More
▸ Manage certificates
and search for "mkcert".
For earlier versions of Chrome, the setting is located at Chrome settings
▸ Advanced
▸ Privacy and security
▸ Manage certificates
.
2. Look for your certificate.
3. Double click on the certificate and expand the Trust
section.
4. Set every entry to the Always Trust
value.
5. Restart your Chrome browser.
Now, you should have secure access to https://localhost:4444.
Updated about 1 month ago
You are now able to launch a conference from your device. If you want to learn more about creating video conference applications, continue by adding video.