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 management
client.js contains code related to the conference management
index.html contains code related to the main interface

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
      src="https://unpkg.com/@voxeet/voxeet-web-sdk/dist/voxeet-sdk.js"
      type="text/javascript"
    ></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 test 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 TestClientAccessToken string with the token generated from the Dolby.io dashboard.

const main = async () => {
    // Generate a test client access token from the Dolby.io dashboard and insert into access_token variable
    let access_token = "TestClientAccessToken";
    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 test client access token from the Dolby.io dashboard and insert into access_token variable
    let access_token = "<TestClientAccessToken>";
    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 the conferenceAlias in the parameter object.
After creating a conference, the conference is joined using the ConferenceService.join method. The first parameter is the conference object returned from the create 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 the onclick handler for the joinButton.

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 the leaveButton 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.
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 the config/ 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.