Enable Video Processing

This tutorial guides how to add additional video features, such as background blur, to your application using the SDK 3.7 or later.

Before you start, make sure that you have read the Integrate Video guide and added basic video features to your application.

1. Add new buttons to the application layout

Open the index.html file and add new buttons to your layout to allow blurring the background and disabling video processing.

<!-- Step 1: Add buttons responsible for video processing -->
<div id="actions">
  ...
  <button id="blur-video-background-btn" disabled>Blur background</button>
  <button id="disable-video-processing-btn" disabled>Disable video processing</button>
</div>

2. Declare blurVideoBackgroundBtn and disableVideoProcessingBtn variables

Open the ui.js file and declare blurVideoBackgroundBtn and disableVideoProcessingBtn in the initUI function.

/// Step 2: Declare variables responsible for the background blur and disabling video processing
const blurVideoBackgroundBtn = document.getElementById("blur-video-background-btn");
const disableVideoProcessingBtn = document.getElementById("disable-video-processing-btn");

3. Edit the startVideoBtn "onclick" function

The function needs to enable the blurVideoBackgroundBtn button and disable the disableVideoProcessingBtn
button after calling the start method.

/// Step 3: Modify the function to allow blurring the participant's background after calling the start method
startVideoBtn.onclick = () => {
  VoxeetSDK.video.local
    .start()
    .then(() => {
      startVideoBtn.disabled = true;
      stopVideoBtn.disabled = false;
      blurVideoBackgroundBtn.disabled = false;
      disableVideoProcessingBtn.disabled = true;
    })
    .catch((err) => console.error(err));
};

4. Edit the stopVideoBtn "onclick" function

The function needs to disable the blurVideoBackgroundBtn and the disableVideoProcessingBtn button after calling the stop method.

/// Step 4: Modify the function to not allow blurring the participant's background after calling the stop method
stopVideoBtn.onclick = () => {
  VoxeetSDK.video.local
    .stop()
    .then(() => {
      startVideoBtn.disabled = false;
      stopVideoBtn.disabled = true;
      blurVideoBackgroundBtn.disabled = true;
      disableVideoProcessingBtn.disabled = true;
    })
    .catch((err) => console.error(err));
};

5. Write an "onclick" handler for blurVideoBackgroundBtn

The handler allows blurring the local participant's background after clicking the button.

Additionally, enable the disableVideoProcessingBtn button when the participant's video is blurred to allow disabling the background blur.

/// Step 5: Write a handler responsible for blurring the participant's background
blurVideoBackgroundBtn.onclick = () => {
  VoxeetSDK.video.local
    .setProcessor({ type: 'bokeh' })
    .then(() => {
      blurVideoBackgroundBtn.disabled = true;
      disableVideoProcessingBtn.disabled = false;
    })
    .catch((err) => console.error(err));
};

6. Write an "onclick" handler for disableVideoProcessingBtn

This handler allows the local participant to disable video processing after clicking the button.

/// Step 6: Write a handler responsible for disabling video processing
disableVideoProcessingBtn.onclick = () => {
  VoxeetSDK.video.local
    .disableProcessing()
    .then(() => {
      blurVideoBackgroundBtn.disabled = false;
      disableVideoProcessingBtn.disabled = true;
    })
    .catch((err) => console.error(err));
};

After these steps, you should see in your application the added buttons and be able to blur your background.