Create a Basic Audio Conference Application

Prerequisites

Make sure that you have:

A Dolby.io account. If you do not have an account, sign up for free
A working video camera and microphone
Git installed on your computer
A client access token copied from the Dolby.io dashboard

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

Where:

ui.js will contain code responsible for the UI management
client.js will contain code responsible for the conference management
index.html will contain code responsible for the main interface

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

2. Open the index.html file in a code editor and add Dolby.io Communications Web SDK to your application.

In order to create a video call, you need to add the Dolby.io Communications Web SDK to your application. You can do this by adding a <script> element to the <head> section of your code to add the SDK from a hosted location (CDN), as in the following example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Basic Web Video Conference Application</title>
    <!-- Add Dolby.io Communications Web SDK from a hosted location (CDN)-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@voxeet/[email protected]/dist/voxeet-sdk.js"></script>
    <!-- Point to your file responsible for the UI management -->
    <script src="scripts/ui.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="app">
      <h1 id="name-message">Logging in...</h1>
    </div>
    <!-- Point to your file responsible for the conference management -->
    <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.

Open the client.js file and create a main function. Call the initializeToken method using the VoxeetSDK main object that allows applications to interact with Dolby.io Communications APIs services.

const main = async () => {
    // Generate a client access token from the Dolby.io dashboard and insert it into the 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, we assign random user names.

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)];

Edit the main function to open a session just after the SDK initialization.

A session is a connection between the client application and the Dolby.io Communications APIs. When opening a session, you have to provide a name. Commonly, this will be the name of the participant who established the session.

const main = async () => {
    // Generate a client access token from the Dolby.io dashboard and insert it into the 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 lets you use the SDK.

Open the ui.js file and create an initUI function that will be responsible for displaying a user's login status.

const initUI = () => {
  const nameMessage = document.getElementById("name-message");
  nameMessage.innerHTML = `You are logged in as ${randomName}`;
};

Call the initUI function in the client.js file, just after the code responsible for opening a session.

try {
    ...
    await VoxeetSDK.session.open({ name: randomName });
    initUI();
}

Add a joining option

When event handlers are set, implement a join and leave conference function in the client.

Open the index.html file and add a <div> with the form ID. In the new div, add an <input> element with the alias-input ID and a <button> with the join-btn ID.

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

Edit the initUI function in the ui.js file to add interface linking. 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;

The initUI function is called when a session is successfully opened. At this point, the joinButton should be visible to allow joining a conference.

Write an onclick handler for the joinButton. The handler should create a conference using the create method and then call the join method. Joining a conference requires using the conference object that is returned by create.

Add the joinButton onclick handler to the initUI function, as in the following example:

joinButton.onclick = () => {
  let conferenceAlias = conferenceAliasInput.value;

  // Create a conference room using an alias
  VoxeetSDK.conference
    .create({ alias: conferenceAlias })
    // Join the conference using its ID received in the returned conference object
    .then((conference) => VoxeetSDK.conference.join(conference, {}))
    .then(() => {
      joinButton.disabled = true;
    })
    .catch((err) => console.error(err));
};

Add a leaving option

Open the index.html file and add a new <button> element with the leave-btn ID.

<div id="form">
  ...
  <button id="join-btn">Join</button>
  <!-- Add the button after join-btn -->
  <button id="leave-btn" disabled>Leave</button>
</div>

Declare the leaveButton in the initUI function in the ui.js file.

const leaveButton = document.getElementById("leave-btn");

Edit the onclick handler for the joinButton to enable the leaveButton after joining the conference.

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));

Add the leaveButton onclick handler to the initUI function.

leaveButton.onclick = () => {
  VoxeetSDK.conference
    .leave()
    .then(() => {
      joinButton.disabled = false;
      leaveButton.disabled = true;
    })
    .catch((err) => console.error(err));
};

Run your application

To test your application, you can either use a simpler method that lets you run the application only on your computer or you can use a more complicated method that uses an HTTP server.

Test your application on your computer

This method does not work on Safari, we recommend using it on Chrome.

Open the index.html file in a web browser.
Check if you can join a conference with enabled audio and if you can turn your video on and off.
Join the same conference from another browser tab and try to speak. Check if you can hear your voice.

Test your application using an HTTP server

This method requires starting an HTTP server to serve your files from the src folder. We recommend using the live-server to reload your application as you add changes. Before using the server, make sure that you have node.js and npm installed.

Install the live-server using the following command:

npm install live-server -g

Install mkcert using GitHub installation instructions for your operating system. Mkcert lets you generate self-signed certificates required for serving files using HTTPS. If you do not want to generate SSL certificates, you can use ngrok to create a tunnel to a public HTTPS URL.
Use the following command to install mkcert:

mkcert -install

Create a config directory at the root of your project folder and store in it certificates and configuration files for HTTPS.
Open a terminal and navigate to `path/to/your_project/config``.
Generate an SSL certificate for localhost using the following command:

mkcert localhost

You should now see the localhost-key.pem and localhost.pem files in your config folder.

In the config folder, create an https-config.js file that will be passed as an argument of live-server to use HTTPS protocol when serving the src folder. Add the following code to the file:

const fs = require("fs");

module.exports = {
  cert: fs.readFileSync(__dirname + "/localhost.pem"),
  key: fs.readFileSync(__dirname + "/localhost-key.pem"),
  passphrase: "12345",
};

Open a terminal and navigate to the src folder in your project. Paste there the following command to start live reloading server on port 4444 using HTTPS protocol:

live-server --port=4444 --https=../config/https-config.js

Open https://localhost:4444 in your browser. You should have access to your application.

Troubleshooting

On macOS, the Unsecure Connection Error may appear when you try to reach your application. In this case, follow the steps below:

Open Chrome and select Chrome settings ▸ Advanced ▸ Privacy and security ▸ Manage certificates.
Look for your certificate.
Double-click on the certificate and expand the Trust section.
Set every entry to always trust.
Restart your browser.

Now, you should have secure access to https://localhost:4444.

Updated 2 months ago

What’s Next

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.

Integrate Video