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.
Try it: playground.html
Step by step with many options so you can see the process. Uses the modules folder.
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.