Virtual Screenshare Video mixer

GPU accelerated video and screenshare mixer

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

This example demonstrates GPU accelerating screensharing mixing with camera stream. The camera video will be resized in the foreground with the screenshare as a background texture.

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="max-w-screen-2xl h-auto my-auto">
          <div id="virtual-screen" class=""></div>
  <script type="text/javascript">
  	var player = jwplayer("virtual-screen").setup({
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "plugins": {
        "../../js/virtual-background-8.20.0.js": {
            "enable": true,
            "renderType": "screen",
            "toggleScreen": true
        "../../js/webrtcpeakmeter-8.20.0.js": {},
        "../../js/webrtcpublisher-8.20.0.js": {
            "applicationName": "webrtc",
            "autoStartDevice": true,
            "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%"