Chromekey Background

Greenscreen camera background support

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

Note: Not a live demo, server configuration is just for example. For live working example try the Millicast Publisher and Subscriber example.

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

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

.jwplayer {
    background-image: url(../../images/bbb.jpg) !important;
}
    <div class="max-w-screen-2xl h-auto my-auto">
          <div id="chromakey-background" class=""></div>
  </div>
  <script type="text/javascript">
  	var player = jwplayer("chromakey-background", {
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "plugins": {
        "../../js/virtual-background-8.0.0.js": {
            "backgroundColor": [
                0,
                255,
                0
            ],
            "backgroundType": "green",
            "renderType": "chromakey"
        },
        "../../js/webrtcpeakmeter-8.20.0.js": {},
        "../../js/webrtcpublisher-8.20.0.js": {
            "applicationName": "webrtc",
            "autoStartDevice": true,
            "publisher": true,
            "server": "wowza",
            "serverURL": "rtc.electroteque.org",
            "userData": {
                "param1": "value1"
            }
        }
    },
    "sources": [
        {
            "appName": "webrtc",
            "file": "C6Lx6ku6FEXgKtt",
            "live": true,
            "publisher": true,
            "type": "mp4"
        }
    ],
    "width": "100%"
});
  </script>