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>
</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": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ3ZWJydGMiLCJpYXQiOjE2MzczMzAyNTksImV4cCI6MTY2ODg2NjI1OSwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViIjoianJvY2tldEBleGFtcGxlLmNvbSIsInN0cmVhbU5hbWUiOiJDNkx4Nmt1NkZFWGdLdHQifQ.4_38rdgyqWabGvoV6WZREjrqevVeGIgCKK7xOknwGx4",
"publisher": true,
"server": "wowza",
"serverURL": "rtc.electroteque.org",
"toggleScreen": true,
"userData": {
"param1": "value1"
}
}
},
"poster": "../../images/virtualbg.jpg",
"sources": [
{
"appName": "webrtc",
"file": "C6Lx6ku6FEXgKtt",
"live": true,
"publisher": true,
"type": "mp4"
}
],
"width": "100%"
});
</script>
