Video Processing

Dolby.io video processing allows the local participant to modify their video stream by adding preferred features and selecting their intensity. It is helpful for reducing distractions and improving meeting participation, visibility, and appearance.

Prerequisites

Make sure that you use a desktop operating system with Graphics Processing Unit (GPU) acceleration enabled and the following minimum hardware:

• i5 dual-core CPU
• 8GB of RAM
• 64-bit operating system

📘

Note

Simultaneous use of a few compute-intensive features, such as DVC, Music mode, video processing, Simulcast, and Video Forwarding, requires an i7+ CPU with a GPU to ensure high-quality audio and low-latency video.

For the best experience, we recommend using Opus and either Chrome or Edge browser.

Video processing also requires downloading and hosting additional SDK package files located in the @voxeet/voxeet-web-sdk/dist folder. For hosting, you can either use your application server or CDN. For detailed instructions and more information, see the Initializing the SDK guide.

The feature is supported in all conferences, regardless of their type. You can create any conference and set your preferred video processing options while joining the conference, starting your video stream, or when your video is enabled.

Enable video processing

To enable video processing before a conference, define the preferred processing options in joinOptions while joining the conference, as in the following example:

// Define video processor options in the joinOptions structure
var joinOptions = {
    videoProcessor: {
        virtualBackground: 'bokeh',
        spotLight: 0.5,
    },
};
// Join a conference
await VoxeetSDK.conference.join(joinOptions);

The selected processing options will be applied to a participant's video after enabling a camera.

To start a video with video processing enabled, define processorOptions and call one of the start methods, as in the following example:

// Define video processor options in the processorOptions structure
var processorOptions = {
    autoFraming: true,
    facialSmoothing: 0.3, // ranges between 0.0 (off) and 1.0 (full)
};
// Start the local video, initialize the video processor, and enable the features
await VoxeetSDK.video.local.start({}, processorOptions);

You can also enable video processing using the setProcessor method, as presented in the following chapters that describe each video processing setting.

Background replacement

To have more privacy or a consistent and professional look, we recommend replacing the participant's background with a selected image or a video.

As an image, use the HTMLImageElement object. The supported image file formats are JPG, JPEG, 24-bit PNG, and 32-bit PNG. The image needs to be loaded before setting the background. Otherwise, the SDK triggers an error.

As a video, use the HTMLVideoElement object. We recommend selecting a video that has a similar resolution to the participant's camera resolution and a frame rate below 30 fps. The video must be in a format supported by HTML elements.

// Select an image or a video
var someUserImageOrVideo = ... // must be a type of HTMLImageElement or HTMLVideoElement
 
// Select the virtualBackground option and provide an image or a video
var processorOptions = {
    virtualBackground: someUserImageOrVideo,
};
// Replace the participant's background with your image or video
await VoxeetSDK.video.local.setProcessor(processorOptions);

Background blur

To have some privacy with regard to surroundings without completely replacing the background, we recommend using background blur. This option blurs the background of the participant's video, obscuring everything that is behind them. It is useful for hiding a cluttered room, taking a meeting from a public place, or just keeping things professional.

// Set a virtual background to bokeh
var processorOptions = {
    virtualBackground: 'bokeh',
};
// Enable background blur
await VoxeetSDK.video.local.setProcessor(processorOptions);

Noise reduction

To not experience lower video stream quality caused by a camera or poor lighting conditions that add additional noise, we recommend using the noise reduction feature. It reduces unwanted noise from the video to improve its quality.

// Select the noiseReduction option and set it to true
var processorOptions = {
    noiseReduction: true,
};
// Enable noise reduction
await VoxeetSDK.video.local.setProcessor(processorOptions);

Automatic brightness

Participants who connect to a conference from a location that is not properly lit may not be seen well by other participants. To solve this problem, the automatic brightness option automatically adjusts the brightness of the participant's video to ensure that they are clearly visible.

// Select the autoBrightness option and set it to true
var processorOptions = {
    autoBrightness: true,
};
// Enable automatic brightness
await VoxeetSDK.video.local.setProcessor(processorOptions);

Automatic framing

If a presenter or a speaking participant is not centered in a video frame on a conference call, it could be distracting to other participants. The automatic framing option automatically adjusts the local participant's video frame to keep the participant within view and centered in the video frame the whole time.

// Select the autoFraming option and set it to true
var processorOptions = {
    autoFraming: true,
};
// Enable automatic framing
await VoxeetSDK.video.local.setProcessor(processorOptions);

Facial smoothing

Participants who wish to improve their appearance on a conference call can benefit from the facial smoothing option that smooths any blemishes on their faces and make them feel more confident.

// Set the preferred strength of facial smoothing
var processorOptions = {
    facialSmoothing: 0.6, // ranges between 0.0 (off) and 1.0 (full)
};
// Enable facial smoothing
await VoxeetSDK.video.local.setProcessor(processorOptions);

Spotlight

If a conference scenario requires better lighting on the participant, especially as they move around, the spotlight may improve the lighting and replicate a stage spotlight effect.

// Set the preferred strength of spotlight
var processorOptions = {
    spotLight: 0.4, // ranges between 0.0 (off) and 1.0 (full)
};
// Enable spotlight
await VoxeetSDK.video.local.setProcessor(processorOptions);