Electroteque Media

Camera Merger API Test

Conferencing video merger api tests

Merger Preview

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 configuration for Wowza Media Server. Wowza Media Developer and full licence works with WebRTC.

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 conferenceContainer container selector.

HLS conferencing subscribing is possible with Wowza configuring the conferenceSubscribeHls config. A transcoder is required for each WebRTC stream to convert the Opus audio codec to AAC with a passthrough for video.

    <div class="flex w-full h-auto my-auto">
          <div id="camera-merger-api" class=""></div>
  </div>

  <script type="text/javascript">

  	var player = jwplayer("camera-merger-api").setup({
    "aspectratio": "16:9",
    "mergerSrc": "C6Lx6ku6FEXgKtt-merger",
    "playbackRateControls": true,
    "plugins": {
        "../../js/webrtcconference-8.20.0.js": {
            "container": "#conference-container",
            "master": true,
            "mergerOnly": true
        },
        "../../js/webrtcmerger-8.20.0.js": {
            "autoPublish": true,
            "bgImage": "../../images/virtualbg.jpg",
            "enableFocus": true,
            "master": true,
            "mergerContainer": "#conference-merge-container",
            "mergerPreview": "#merger-preview-container"
        },
        "../../js/webrtcpeakmeter-8.20.0.js": {},
        "../../js/webrtcpublisher-8.20.0.js": {
            "applicationName": "webrtc/room1",
            "autoStartDevice": true,
            "buttons": false,
            "debug": true,
            "maxDeviceDimensions": false,
            "maxHeight": 720,
            "maxWidth": 1280,
            "publishToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ3ZWJydGMifQ.MjehxjweF5tPPqUJQjHEHdHLz4sjaXkTkJh0dkM8w9_M5PMKoyzUJZPYyYtgT1qn17eDZlUOUeIeyr37z-KhN1u66L2ScVCwvs0dBjf6s2ZSIw0shvKmCdq7u5bd5llWTY0FDbbtFA1l60CkfOsTd0_dQpeyKm3Y94XgIaPyJB_PCCezO8V1xmcyMT1aqPfwr99AmM8s_P_8nuDL6A1HHppImwZL550AnTjuPQaAMRSVSNuzlLrwFXBA1SRaKOa2AVkIzP0tYkqWCYd03Gvn_CpxZ5dhk5s4UYSoYeK2FX4nz4khn_k8loFO-vDu2M-1r7dvFXnt8iNYWGTzDxPNuQ",
            "publisher": true,
            "recording": {
                "codec": "VP9",
                "mimeType": "video/webm",
                "name": "recording1"
            },
            "server": "wowza-conference",
            "serverURL": "rtc.electroteque.org",
            "toggleScreen": true,
            "userData": {
                "param1": "value1"
            }
        }
    },
    "sources": [
        {
            "appName": "webrtc/room1",
            "file": "C6Lx6ku6FEXgKtt",
            "live": true,
            "publisher": true,
            "type": "mp4"
        }
    ],
    "title": "Participant 1",
    "width": "100%"
});

player.on("ready", function() {
player.on("devices", (devicesMap, deviceInfos) => {
//get available devices here for building your own UI
console.log("devices", devicesMap);
}).on("mediastart", (info, stream) => {
console.log("Device Start ", info.deviceInfo);
console.log("Updated Device Info ", info.newDeviceInfo);
console.log("Video Constraints ", info.videoConstraints);
console.log("Capabilities ", info.capabilities);
}).on("mediastop", (e) => {
console.log("Device Stop");
}).on("startpublish", (supportsParams) => {
console.log("Publishing Started");
//use this for enabling / disabling bandwidth select menus while publishing
//browsers that don't support it cannot update bitrate controls while publishing
//console.log("Browser Supports peer setParameters ", supportsParams);
}).on("stoppublish", (e) => {
console.log("Publishing Stopped");
}).on("recordstart", (e) => {
console.log("Recording Started");
}).on("recordstop", (e) => {
console.log("Recording Stopped");
}).on("sendmessage", (message) => {
console.log("Signal Server Send Message: ",message);
}).on("gotmessage", (message) => {
console.log("Signal Server Receive Message: ", message);
}).on("offer", (offer) => {
console.log("WebRTC Offer ", offer.sdp);
}).on("answer", (answer) => {
console.log("WebRTC Answer ", answer.sdp);
}).on("bitratechanged", (params) => {
console.log("WebRTC Bitrate Changed ", params);
}).on("outputsuccess", (sinkId) => {
console.log("Success, audio output device attached:" + sinkId);
}).on("outputerror", (message) => {
console.log(message);
}).on("ready", function(eo) {
// console.log("READY", video);
}).on("screensharestart", (e) => {
console.log("screen share started");
}).on("screensharestop", (e) => {
console.log("screen share stopped");
});
});

  </script>