Virtual Background Removal

AI auto camera background removal using TensorFlow

Advanced
Bitrate
Video Resolution (ideal)
Video Framerate (ideal)
Audio/Video Inputs
Video Input Source
Audio Input Source
Audio Output Source

This example demonstrates dynamic virtual background removal using Bodypix and Tensorflow AI.

Backgrounds can be applied using CSS, and bgImage config on the publisher and subscriber. The video element needs to be shown or rendering stops.

Configuring a background image for the video stream is possible by setting the player poster image.

.video-js {
    background-color: #000000 !important;
    background-image: url(../../images/virtualbg.jpg) !important;
    background-repeat: 'no-repeat !important';
    background-position: 'center center !important';
}
    <div class="max-w-screen-2xl h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid virtual" crossorigin="anonymous" controls="" id="virtual-background"></video>
  </div>
  <script type="text/javascript">
  	var player = videojs("virtual-background", {
    "plugins": {
        "peakmeter": {},
        "rtcpublisher": {
            "applicationName": "webrtc",
            "autoStartDevice": true,
            "publisher": true,
            "server": "wowza",
            "serverURL": "rtc.electroteque.org",
            "userData": {
                "param1": "value1"
            }
        },
        "virtualbackground": {
            "enable": true
        }
    },
    "poster": "../../images/virtualbg.jpg",
    "sources": [
        {
            "src": "myStream",
            "type": "application/webrtc"
        }
    ]
});




      player.on("devices", (event, devicesMap, deviceInfos) => {
//get available devices here for building your own UI
console.log("devices", devicesMap, deviceInfos);
});
player.on("mediastart", (e, info, deviceInfo, videoConstraints, capabilities) => {
//console.log("mediastart111", deviceInfo);
//selected device has been activated
console.log("Device Start ", info.deviceInfo);
console.log("Updated Device Info ", info.newDeviceInfo);
console.log("Video Constraints ", info.videoConstraints);
console.log("Capabilities ", info.capabilities);
});
player.on("mediastop", (e) => {
console.log("Device Stop");
});
player.on("startpublish", (e, supportsParams) => {
console.log("Publishing Started");
//use this for enabling / disabling bandwidth select menus while publishing
//browsers that don"t support it cannot update bitrate controls while publishing
console.log("Browser Supports peer setParameters ", supportsParams);
});
player.on("stoppublish", (e) => {
console.log("Publishing Stopped");
});
player.on("recordstart", (e) => {
console.log("Recording Started");
});
player.on("recordstop", (e) => {
console.log("Recording Stopped");
});
player.on("sendmessage", (e, message) => {
console.log("Signal Server Send Message: ", message);
});
player.on("gotmessage", (e, message) => {
console.log("Signal Server Receive Message: ", message);
});
player.on("offer", (e, offer) => {
console.log("WebRTC Offer ", offer.sdp);
});
player.on("answer", (e, answer) => {
console.log("WebRTC Answer ", answer.sdp);
});
player.on("bitratechanged", (e, params) => {
console.log("WebRTC Bitrate Changed ", params);
});
player.on("outputsuccess", (e, sinkId) => {
console.log("Success, audio output device attached:" + sinkId);
});
player.on("outputerror", (e, message) => {
console.log(message);
});
player.on("rtcerror", (e, error) => {
console.log("WebRTC Error: ", error.message, error.name);
});
  </script>