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.
Updated 6 months ago