Wowza Media Studio Group Call

WebRTC Studio Conferencing for Wowza Media Server. Second participant with Mediapipe virtual background removal.

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

WebRTC Conferencing Studio configuration for Wowza Media Server. Wowza Media Developer and full licence works with WebRTC.

When participants start publishing, the host has to manually add their stream to the room.

Supplied is a custom example websocket signal server Wowza provider project for one to many and group call features.

The secondary Websocket Wowza provider project is required for signalling new room partipants after publishing begins. Subscribed streams of participants will be displayed in the configured container selector.

Configured is a custom publish token that is verified with the custom Wowza webrtc provider module using a configured shared secret.

A token service can be configured to refresh publish and subscribe tokens.

    
   <div class="flex w-full">
          <div id="wowza-conference-studio-1" class="has-settings conference-player"></div>
  </div>
  <script type="text/javascript">
  	var player = flowplayer("#wowza-conference-studio-1", {
    "clip": {
        "live": true,
        "sources": [
            {
                "src": "UdbKd2RJ4RQt0Lh6",
                "type": "application/webrtc"
            }
        ],
        "title": "Participant"
    },
    "rtc": {
        "applicationName": "webrtc-rooms/room2",
        "autoStartDevice": true,
        "buttons": false,
        "conference": {
            "container": "#conference-container",
            "featuredContainer": "#featured-container",
            "participantContainer": "#conference-participant-container",
            "playerTemplate": "<div id=\"${id}\" class=\"conference-player\"><div id=\"${playerid}\" class=\"fp-mute no-volume\"></div></div>",
            "profile": "../../images/wowza-logo.png",
            "roomContainer": "#room-container",
            "studioMode": true
        },
        "meterAutoStart": false,
        "opus": {
            "usedtx": 1
        },
        "publishToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ3ZWJydGMifQ.MjehxjweF5tPPqUJQjHEHdHLz4sjaXkTkJh0dkM8w9_M5PMKoyzUJZPYyYtgT1qn17eDZlUOUeIeyr37z-KhN1u66L2ScVCwvs0dBjf6s2ZSIw0shvKmCdq7u5bd5llWTY0FDbbtFA1l60CkfOsTd0_dQpeyKm3Y94XgIaPyJB_PCCezO8V1xmcyMT1aqPfwr99AmM8s_P_8nuDL6A1HHppImwZL550AnTjuPQaAMRSVSNuzlLrwFXBA1SRaKOa2AVkIzP0tYkqWCYd03Gvn_CpxZ5dhk5s4UYSoYeK2FX4nz4khn_k8loFO-vDu2M-1r7dvFXnt8iNYWGTzDxPNuQ",
        "publisher": true,
        "seperateScreen": true,
        "server": "wowza-conference",
        "serverURL": "rtc.electroteque.org",
        "tokenService": "tokenService",
        "verticalMeter": false,
        "virtual": {
            "backgroundColor": "000000",
            "bgImage": "../../images/virtualbg.jpg",
            "enable": false
        }
    },
    "share": false
});

async function tokenService() {
return new Promise((accept) => {
accept("eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ3ZWJydGMifQ.MjehxjweF5tPPqUJQjHEHdHLz4sjaXkTkJh0dkM8w9_M5PMKoyzUJZPYyYtgT1qn17eDZlUOUeIeyr37z-KhN1u66L2ScVCwvs0dBjf6s2ZSIw0shvKmCdq7u5bd5llWTY0FDbbtFA1l60CkfOsTd0_dQpeyKm3Y94XgIaPyJB_PCCezO8V1xmcyMT1aqPfwr99AmM8s_P_8nuDL6A1HHppImwZL550AnTjuPQaAMRSVSNuzlLrwFXBA1SRaKOa2AVkIzP0tYkqWCYd03Gvn_CpxZ5dhk5s4UYSoYeK2FX4nz4khn_k8loFO-vDu2M-1r7dvFXnt8iNYWGTzDxPNuQ");
});
}
player.on("selectedParticipant", (e, participant) => {
console.log("selected participant", participant);
}).on("unselectedParticipant", (e, participant) => {
console.log("unselected participant", participant);
}).on("participantleft", (e, sender) => {
}).on("participantfeatured", (e, sender) => {
}).on("participantunfeatured", (e, sender) => {
}).on("leaveroom", e => {
}).on("roomjoinfailed", e => {
}).on("existingparticipants", (e, sender) => {
}).on("roomPlayer", (e, item) => {
console.log("Room Player ", item);
}).on("roomConfig", (e, state, config) => {
console.log("Room Config ", state, config);
});
  </script>