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 Ant Media Server. Ant Media Server License is required to play back WebRTC. A trial license will work to play back WebRTC. The default WebRTC app for Ant Media Server is WebRTCAppEE.
In conferencing studio mode. For configured hosts and api token apiToken requires to be configured to use the server rest api to add/remove streams to the room maintrack stream. API Security
Participants join a lobby area for the host to add / remove the streams to the room.
Support added to feature participants larger fullscreen view by simply clicking the fullscreen icon on and off. Or an api is provided.
Conferencing master with graphics accelerated stream merger broadcasting and recording features. Using the conferencing plugin an api is provided to feature and mute a selected participant.
Ant Media default WebSocket signalling server supports room group calls by default. Datachannel setting is required to be turned on in the Ant Media console for custom commands to work.
The config roomName is required to connect to a specific room.
Configured is server side recording via Ant Media rest api. Configure a JWT token if the rest api security is enabled. Configure the stream name to record as the WebGL merger stream name ie C6Lx6ku6FEXgKtt-merge
Configured is stream token security if configured in the server using a JWT token.
<div class="flex w-full">
<div id="antmedia-conference-host" class="has-settings"></div>
</div>
<script type="text/javascript">
var player = flowplayer("#antmedia-conference-host", {
"antmedia": {
"apiToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.b8_QMj7F9lJ7aabDfswdXh6z3q4OkgLrgUtlvNfURsQ",
"subscriberCode": "",
"subscriberId": "",
"token": ""
},
"clip": {
"live": true,
"mergerSrc": "C6Lx6ku6FEXgKtt-merger",
"sources": [
{
"src": "C6Lx6ku6FEXgKtt",
"type": "application/webrtc"
}
],
"title": "Host"
},
"rtc": {
"applicationName": "WebRTCAppEE",
"autoStartDevice": true,
"buttons": false,
"channelName": "data",
"conference": {
"autoPublish": true,
"bgImage": "../../images/virtualbg.jpg",
"container": "#conference-container",
"enableFocus": true,
"featuredContainer": "#featured-container",
"fullscreenFeatured": true,
"host": true,
"lobbyContainer": "#conference-participant-container",
"lobbyPlayerTemplate": "<div id=\"${id}\" class=\"conference-player conference-lobby-player group flex justify-center items-center\"><div id=\"${playerid}\" class=\"fp-mute no-volume no-toggle\"></div><button class=\"invisible group-hover:visible bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 absolute font-semibold bg-gradient-to-tr from-iblue-default hover:from-iblue-light to-iblue-light hover:to-iblue-default text-white focus:shadow-outline focus:outline-none text-sm\" x-data=\"{ staged: ${staged} }\" x-text=\"staged ? 'Remove' : 'Add To Room'\" @click.prevent=\"addToRoom($event);\" data-name=\"${name}\">Add To Room</button></div>",
"logo": "../../images/wowza-logo.png",
"mergerApplication": "WebRTCAppEE",
"mergerContainer": "#conference-merge-container",
"mergerPreview": true,
"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
},
"dataChannel": true,
"iceServers": [
{
"urls": [
"stun:stun.l.google.com:19302",
"stun:stun1.l.google.com:19302",
"stun:stun2.l.google.com:19302",
"stun:stun3.l.google.com:19302",
"stun:stun4.l.google.com:19302"
]
}
],
"meterAutoStart": false,
"publisher": true,
"recording": {
"mimeType": "video/mp4",
"name": "C6Lx6ku6FEXgKtt-merger",
"server": true
},
"roomName": "room1",
"seperateScreen": true,
"server": "antmedia-conference",
"serverURL": "rtc.electroteque.org:5443",
"verticalMeter": false
},
"share": false
});
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) => {
});
</script>
