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>
