transparent-virtual-background

Playground for exploring background removal in WebRTC

Background removal in the browser on a video camera image captured with getUserMedia and on that same video sent oover a RTCPeerConnection. MediaPipe is used for segmentation. Then that mask is used with the HTML canvas and various methods for adding transparency.

WebRTC’s RTCPeerConnection does not support the alpha channel, so these examples also remove the green background and apply the transparency for display.

See the How to make your virtual background transparent in WebRTC post on webrtcHacks.com for full details and experimental results.

playground.html

Try it: playground.html

Step by step with many options so you can see the process. Uses the modules folder.

transparency.html

Try it: transparency.html

All-in one file that uses WebRTC Insertable Streams (media capture transform / break out box). Meant to mimic a WebRTC app where you would send your video with a green screen to another user and view someone else’s incoming video with a transparent background.

Demo video