🚧
Deprecation notice
Dolby.io Communications SDK for Desktop has been deprecated. For building native desktop applications, we recommend using the vanilla Electron framework with the latest Web Client SDK.

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 a supported operating system, either Microsoft Windows 10, Apple macOS 10.15, or Apple macOS 11
Have a Dolby.io account, Key, and Secret. Instructions that show how to access your credentials are available in the Initializing the SDK document.
Have a working webcam and a microphone

A complete version of this Getting Started project is available on GitHub.

Procedure

Clone the Getting Started repository from GitHub:

git clone https://github.com/dolbyio-samples/comms-sdk-web-getting-started.git

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

Initialize the SDK using 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.

Locate the client.js file in the cloned repository.
Open the file and find the VoxeetSDK.initializeToken('access_token', () => {...}) function.
Update the access_token variable to the client access token generated from the Dolby.io dashboard.

let access_token = "ClientAccessToken";

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

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 Web SDK Getting Started 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

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>

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

Update the handler for the leaveButton click event to reset the buttons states:

leaveButton.onclick = () => {
    // Leave the conference
    VoxeetSDK.conference.leave()
        .then(() => {
             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));
};

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

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

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.

🚧Deprecation notice

Creating a desktop application

Prerequisites

Procedure

Result

Applying video filters

Procedure

🚧
Deprecation notice