What is Bokeh? How-to Add Privacy Filters for WebRTC Video Chat

When hosting a webinar or live event, you may not have complete control over your environment. You might have things that are behind you and visible to the camera that you don’t want to broadcast to your audience or coworkers. You’ve likely experienced this effect with desktop conferencing applications by now, but you can achieve background blurring in your web-based video chats now too by using the Dolby.io Communications Web SDK.

Bokeh Privacy Filters for Video with a Real-time Portrait Mode

The term Bokeh comes from the artistic effect in photography of having the subject in focus but the background soft and fuzzy. This has become a popular feature of newer iPhones in capturing still shots in Portrait mode for example. With the Dolby.io Web SDK 3.7 release we introduced video filters that segment the live video stream to focus on the participant in the foreground and blur out the background for privacy.

This does not require any special cameras or lens, but is something that can be done with real-time video processing by the Dolby.io Communications APIs.

Getting Started with Background Blur

If you follow the Web SDK Getting Started Guide you can get a basic video chat up and running. That project was kept pretty basic, sticking with static HTML and pulling in the SDK from a CDN so that you could more easily adapt it to whatever framework or build tools you want to use in your own projects later.

Start by cloning the final source-code and running a basic HTTP server.

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

View the final/index.html and edit the file to add one line that sets the videoProcessor with the type set to bokeh. The diff of that change is shown here:

             console.group("Step 3: Create and Join a Conference");
             console.log(`Conference Alias: ${conferenceAlias}`);
             const joinOptions = {
-                constraints: { audio: true, video: true }
+                constraints: { audio: true, video: true },
+                videoProcessor: { type: "bokeh" }
             };

When this web app reloads, you will notice that your video feed will begin to blur the background. In the screenshot below you can see the difference between the bokeh setting on the left with a remote participant (ok, it’s me using a second browser window) joining without any additional video processing being done.

Making a Background Blur Toggle for Video Chat

In the previous section, we enabled the background blur setting to begin as soon as we joined a conference. More often, you may want to give this control to the end-users to enable or disable as the need arises.

To do this, we instead need to add an HTML control and the switch in Bootstrap is a common widget for this use case.

    <div class="container px-4 py-4 mt-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="btn-blur">
            <label class="form-check-label" for="btn-blur">Blur</label>
        </div>
    </div>

When the switch is on, we want to enable bokeh video processing. When the switch is off, we want to send the video stream without any additional processing. Instead of setting the videoProcessor when joining a conference, we can achieve this by adding an onclick handler that checks whether or not the switch is enabled and calls setProcessor() appropriately.

This should be put someplace in your main() function, such as immediately after handleConferenceFlow().

	document.getElementById("btn-blur").onclick = async (event) => {
		if (VoxeetSDK.session.isOpen() && VoxeetSDK.conference.current != undefined) {
			if (event.target.checked) {
				VoxeetSDK.video.local.setProcessor({type: "bokeh"});
			} else {
				VoxeetSDK.video.local.setProcessor({});
			}
		}
	}

Notice that this uses setProcessor({}) instead of calling disableProcessing(). The disableProcessing method disables all video processing which could result in a screen flicker before the stream starts up again. Toggling between the processor type will create a much more natural transition.

We’ve also taken care to check that the session is open and a conference has been joined, otherwise there will be no video feed to process. Similarly, you may want to set disabled on the btn-blur element until somebody joins a conference to maintain a consistent state for your users.

Remove Distractions in Live Events with Privacy Filters

The bokeh mode video filters can improve the experience of live events, e-learning, or regular conferencing. With this feature, not only does it allow your participants to maintain their privacy, it can remove distractions that are not related to the primary participant and the sound of their voice.

Read about what else you can do in the Dolby.io Web SDK 3.7 release and update to the latest Web SDK. If you haven’t gotten started, go sign-up for an account and get started with the tutorial.