NEWDolby Interactivity APIs are now the Dolby.io Communications APIs Learn More >
X

Getting Started

This guide informs how to create a basic audio conference application using the Dolby.io Communications SDK for Desktop. In this example, we use the Web SDK Getting Started project.

Creating a desktop application

Prerequisites

Before you start, make sure that you:

  • Use the supported operating system, either Microsoft Windows 10, Apple macOS 10.15, or Apple macOS 11
  • Have a Dolby.io account, Consumer Key, and Consumer Secret. Instructions that show how to access your credentials are available in the Initializing document.
  • Have a working webcam and a microphone

Procedure

  1. Clone the Getting Started repository from GitHub:
git clone https://github.com/voxeet/voxeet-sdk-browser-gettingstarted.git
  1. Initialize your project.
  • At the root of your project, run the following command to initialize your folder as an npm project:
npm init

Answer questions that you see in your terminal. You can omit these questions by using the -y parameter in the initialization command.

  • Install the @dolbyio/native-desktop-sdk dependency.

Currently, the Desktop SDK does not natively support the Apple M1 processor. If you use a Mac with the Apple M1 processor, modify the npm configuration to run the SDK in the Intel emulation mode. To override the default configuration, set the npm_config_platform and npm_config_arch system environments before installing the SDK, as in the following example:

npm_config_platform=darwin npm_config_arch=x64 npm install @dolbyio/native-desktop-sdk --save

If you do not use Mac with the Apple M1 processor, install the SDK using the following command:

npm install @dolbyio/native-desktop-sdk --save
  • At the root of your project, create an index.js file and include the following code in the file:
const { app, BrowserWindow } = require('electron');

function createWindow () {
    const win = new BrowserWindow({
        width: 1280,
        height: 720,
    });

    win.loadFile('src/index.html');

    // Open the dev tools from Chromium
    win.webContents.openDevTools();
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
  1. Initialize the SDK using your Dolby.io credentials.

There are two ways to initialize the SDK. You can either use the recommended secure authentication method that uses a token or embed the application secrets in the application. In this procedure, we initialize the SDK using secrets. For more information, see the Initializing document.

  • Locate the client.js file in the cloned repository.
  • Open the file and find the VoxeetSDK.initialize('customerKey', 'customerSecret') function.
  • Replace the customerKey and customerSecret strings with your Consumer Key and Consumer Secret.
  1. Update your web application.
  • Locate the index.html file in the cloned repository.
  • Open the file and add style to the <body> tag, for example:
<body style="background-color: white;">
  • In the <head> section of the file, update the the <script> tag with the proper version of the Web SDK.
<script type="text/javascript" src="https://unpkg.com/@voxeet/[email protected]/dist/voxeet-sdk.js"></script>
  1. Run your project.
  • Locate the package.json file in the cloned repository.

  • Add the following script to the file:

"scripts": {
    "start": "nds ."
}
  • Run the desktop application.
npm run start

Result

The created basic conference application opens as a desktop application. If you want to add more features to the application, refer to the Getting Started with the JavaScript SDK documentation to learn how to integrate video, manage participants, implement screen sharing, or record a conference.

Applying video filters

The Desktop SDK lets you to apply video filters to the local video. This example adds a button to enable background blur (bokeh).

Procedure

  1. In the file index.html, locate the actions div and insert the following code after:
<!-- Video Filters -->
<div id="video-filters">
    <button id="background-blur-btn" disabled>Background Blur</button>
    <button id="stop-video-filter-btn" disabled>Stop Video Filter</button>
</div>
  1. In the file ui.js, locate where all the UI element variables are declared and add the following variables:
const backgroundBlurBtn = document.getElementById('background-blur-btn');
const stopVideoFilterBtn = document.getElementById('stop-video-filter-btn');
  1. Update the handler for the leaveButton click event to reset the buttons states:
leaveButton.onclick = () => {
    // Leave the conference
    VoxeetSDK.conference.leave()
        .then(() => {
            lblDolbyVoice.innerHTML = '';
        
            conferenceAliasInput.disabled = false;
            joinButton.disabled = false;
            leaveButton.disabled = true;
            startVideoBtn.disabled = true;
            stopVideoBtn.disabled = true;
            startAudioBtn.disabled = true;
            stopAudioBtn.disabled = true;
            startScreenShareBtn.disabled = true;
            stopScreenShareBtn.disabled = true;
            startRecordingBtn.disabled = true;
            stopRecordingBtn.disabled = true;
            backgroundBlurBtn.disabled = true;
            stopVideoFilterBtn.disabled = true;
        })
        .catch((err) => console.error(err));
};
  1. Update the handlers for startVideo and stopVideo click events to reset the buttons states:
startVideoBtn.onclick = () => {
    // Start sharing the video with the other participants
    VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant)
        .then(() => {
            startVideoBtn.disabled = true;
            stopVideoBtn.disabled = false;
            backgroundBlurBtn.disabled = false;
            stopVideoFilterBtn.disabled = true;
        })
        .catch((err) => console.error(err));
};

stopVideoBtn.onclick = () => {
    // Stop sharing the video with the other participants
    VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant)
        .then(() => {
            stopVideoBtn.disabled = true;
            startVideoBtn.disabled = false;
            backgroundBlurBtn.disabled = true;
            stopVideoFilterBtn.disabled = true;
        })
        .catch((err) => console.error(err));
};
  1. Add the handlers for the backgroundBlurBtn and stopVideoFilterBtn click events to turn on and off the background blur:
backgroundBlurBtn.onclick = () => {
    // Start the Background Blur on the local video
    VoxeetSDK.videoFilters.setFilter('bokeh')
        .then(() => {
            backgroundBlurBtn.disabled = true;
            stopVideoFilterBtn.disabled = false;
        })
        .catch((err) => console.error(err));
};

stopVideoFilterBtn.onclick = () => {
    // Stop the video filter applied on the local video
    VoxeetSDK.videoFilters.setFilter('none')
        .then(() => {
            backgroundBlurBtn.disabled = false;
            stopVideoFilterBtn.disabled = true;
        })
        .catch((err) => console.error(err));
};
  1. Run your application using the npm run start command, join a conference and start your local video. You can enable and disable the background blur.

Did this page help you?