

Getting startedįirst, create a free Daily account and a room. In this post, we show you how to quickly implement virtual backgrounds for your own WebRTC based app without having to study machine learning or TensorFlow video processing. If you really want to get into the weeds, check out our FOSDEM 2022 talk about implementing blurred backgrounds for WebRTC by Ravi, one of our engineers. We’ve abstracted the complexities away so that you can get chromakey effects without the need for a green screen just by using our JavaScript libraries.

Under the hood, Daily uses mediapipe for the real-time semantic segmentation that in turn uses a TensorFlow WASM backend. A little… backgroundĭaily Prebuilt offers some sample background images already built-in, but in this project, we will be showing you how you can add your own custom WebRTC virtual backgrounds. For this demo we'll be using Daily Prebuilt, but this method is supported in our custom Client SDKs as well. We'll use Daily's updateInputSettings() API method to update and reset the video background. On the side of the call frame, we'll show a set of custom video backgrounds for the call participant to pick from: A beachy video call background We'll be building a small web app that embeds a Daily Prebuilt call frame onto a page. Now, let's take a look at how to build the same feature set in a vanilla JavaScript browser-based web app. In our last post on the topic, we went through how to extend an Electron application running Daily Prebuilt with a custom virtual backgrounds feature. We've talked a bit about Daily's virtual backgrounds feature before, which allows developers to add custom backgrounds to call participants' video tracks. Have your users ever wished their video call background was as exciting as those people working from a literal beach? With Daily's WebRTC API, developers can let participants introduce a little more excitement (or privacy) in their lives by hiding their room in favor of another video background image.
