Virtual Background with Screensharing

Bodypix GPU accelerated virtual background with virtual screenshare

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.

.jwplayer {
    background-image: url(../../images/virtualbg.jpg) !important;
    background-color: #000000 !important;
    background-repeat: 'no-repeat !important';
    background-position: 'center center !important';
    <div class="flex w-full h-auto my-auto">
          <div id="virtual-screen-background" class=""></div>
  <script type="text/javascript">
  	var player = jwplayer("virtual-screen-background").setup({
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "plugins": {
        "../../js/virtual-background-8.20.0.js": {
            "enable": true,
            "toggleScreen": true
        "../../js/webrtcpeakmeter-8.20.0.js": {},
        "../../js/webrtcpublisher-8.20.0.js": {
            "applicationName": "webrtc",
            "autoStartDevice": true,
            "publishToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyLCJpc3MiOiJ3ZWJydGMiLCJleHAiOjE3MDI2NjAxNDMzNjN9.mOZo9AQ42Ff_HazlVOTBsnejew1GTtGrtggBPZi_Yas",
            "publisher": true,
            "server": "wowza",
            "serverURL": "",
            "toggleScreen": true,
            "userData": {
                "param1": "value1"
    "poster": "../../images/virtualbg.jpg",
    "sources": [
            "appName": "webrtc",
            "file": "C6Lx6ku6FEXgKtt",
            "live": true,
            "publisher": true,
            "type": "mp4"
    "width": "100%"