<html>
|
<head>
|
<title>WebRTC Streamer</title>
|
<link rel="icon" type="image/png" href="webrtc.png" />
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
<script src="libs/adapter.min.js" ></script>
|
<script src="webrtcconfig.js" ></script>
|
<script src="webrtcstreamer.js" ></script>
|
<script>
|
// ------------------------------------------
|
// WebRTC connections
|
// ------------------------------------------
|
var webRtcServerList = {};
|
|
// ------------------------------------------
|
// decode URL arguments
|
// ------------------------------------------
|
var argurl = { video:location.search.slice(1) };
|
var argoptions = null;
|
var layout = null;
|
if (typeof URLSearchParams != 'undefined') {
|
var params = new URLSearchParams(location.search);
|
argurl = { video:params.get("video"), audio:params.get("audio") };
|
argoptions = params.get("options");
|
if (!argoptions) {
|
argoptions = webrtcConfig.options;
|
}
|
layout = params.get("layout");
|
} else {
|
console.log("URLSearchParams not supported then no argument could be used");
|
}
|
|
// ------------------------------------------
|
// get text from url object (video,audio)
|
// ------------------------------------------
|
function getText(url) {
|
var text;
|
if (url.video) {
|
text = url.video + " ";
|
}
|
if (url.audio && (url.audio != url.video)) {
|
text += url.audio + " ";
|
}
|
return text;
|
}
|
|
// ------------------------------------------
|
// get the div where to insert a video
|
// ------------------------------------------
|
function getContentDiv() {
|
var contentDiv = null;
|
if (document.getElementById("layout")) {
|
var divList = document.getElementsByTagName("div");
|
for (var i=0; i<divList.length; i++) {
|
if (divList[i].childNodes.length == 0) {
|
contentDiv = divList[i];
|
break;
|
}
|
}
|
} else {
|
contentDiv = document.getElementById("content");
|
}
|
return contentDiv;
|
}
|
|
// ------------------------------------------
|
// init device list
|
// ------------------------------------------
|
function onGetDeviceList(remoteDeviceList) {
|
var deviceList = [];
|
if (argurl.video || argurl.audio) {
|
deviceList.push( argurl );
|
}
|
if (remoteDeviceList) {
|
deviceList.push.apply( deviceList, remoteDeviceList );
|
}
|
|
// create navigation menu
|
var urllist = document.getElementById("menu");
|
for (var dev in deviceList) {
|
var url = deviceList[dev];
|
var option = document.createElement("a");
|
var videoTag = "video_" + JSON.stringify(url);
|
option.url = url;
|
option.text = getText(url);
|
option.id = "nav_" + videoTag;
|
option.onclick = function () {
|
if (this.className === "active") {
|
del(this.url);
|
} else {
|
add(this.url);
|
}
|
}
|
urllist.appendChild(option);
|
}
|
|
if (argurl.video || argurl.audio) {
|
add(argurl);
|
} else {
|
var nbVideos = 1;
|
if (layout) {
|
var splitLayout = layout.split("x");
|
var nbrow = parseInt(splitLayout[0]);
|
var nbcol = parseInt(splitLayout[1]);
|
nbVideos = nbrow*nbcol;
|
}
|
var random = deviceList.sort(() => .5 - Math.random()).slice(0,nbVideos);
|
random.forEach((stream) => {
|
add(stream);
|
});
|
}
|
}
|
|
// ------------------------------------------
|
// Fill version
|
// ------------------------------------------
|
function onVersion(version) {
|
document.getElementById("footer").innerHTML = "<p><a href='https://github.com/mpromonet/webrtc-streamer'>WebRTC-Streamer</a>"
|
+ " " + version.split(" ")[0] + "</p>";
|
}
|
|
// ------------------------------------------
|
// add a webrtc client connection
|
// ------------------------------------------
|
function del(url) {
|
var videoTag = "video_" + JSON.stringify(url);
|
|
// disconnect webrtc connection
|
var webrtcServer = webRtcServerList[videoTag];
|
if (webrtcServer) {
|
webrtcServer.disconnect();
|
webRtcServerList[videoTag] = undefined;
|
}
|
|
// remove the video element and its tile
|
var divElt = document.getElementById ("div_" + videoTag);
|
divElt.parentElement.removeChild(divElt);
|
|
// unhighlight the navigation
|
var navElt = document.getElementById ("nav_" + videoTag);
|
navElt.className = "";
|
}
|
|
// ------------------------------------------
|
// add a webrtc client connection
|
// ------------------------------------------
|
function add(url) {
|
var videoTag = "video_" + JSON.stringify(url);
|
|
// add a video element to display webrtc stream
|
if (document.getElementById (videoTag) === null) {
|
var contentDiv = getContentDiv();
|
if (contentDiv) {
|
let webstreamurl = webrtcConfig.url + "/webrtcstreamer.html?";
|
if (url.video) {
|
webstreamurl += "video=" + encodeURIComponent(url.video) + "&";
|
}
|
if (url.audio) {
|
webstreamurl += "audio=" + encodeURIComponent(url.audio) + "&";
|
}
|
if (argoptions) {
|
webstreamurl += "options=" + encodeURIComponent(argoptions) + "&";
|
}
|
var divelt = document.createElement("div");
|
divelt.id = "div_" + videoTag
|
var nameelt = document.createElement("h2");
|
nameelt.id = "title_" + videoTag
|
nameelt.innerHTML = "<a href='" + webstreamurl +"' >"+getText(url)+"</a>";
|
divelt.appendChild(nameelt);
|
var videoelt = document.createElement("video");
|
videoelt.id = videoTag;
|
videoelt.title = getText(url);
|
videoelt.muted = true;
|
videoelt.controls = true;
|
videoelt.playsinline = true;
|
if (layout) {
|
var splitLayout = layout.split("x");
|
var nbrow = parseInt(splitLayout[0]);
|
var nbcol = parseInt(splitLayout[1]);
|
videoelt.width = window.innerWidth / (nbcol+1)
|
videoelt.height = window.innerHeight / (nbrow+1)
|
}
|
divelt.appendChild(videoelt);
|
contentDiv.appendChild(divelt);
|
}
|
}
|
|
var videoelt = document.getElementById (videoTag);
|
if (videoelt) {
|
// connect video element to webrtc stream
|
var webRtcServer = new WebRtcStreamer(videoTag, webrtcConfig.url);
|
|
var options = argoptions;
|
if (layout) {
|
options += webrtcConfig.layoutextraoptions;
|
}
|
|
webRtcServer.connect(url.video, url.audio, options);
|
|
// highlight the navigation
|
var navElt = document.getElementById ("nav_" + videoTag);
|
navElt.className = "active";
|
|
// register webrtc streamer connection
|
webRtcServerList[videoTag] = webRtcServer;
|
}
|
}
|
|
// ------------------------------------------
|
// load/unload callbacks
|
// ------------------------------------------
|
window.onload = function() {
|
if (layout) {
|
var splitLayout = layout.split("x");
|
var nbrow = parseInt(splitLayout[0]);
|
var nbcol = parseInt(splitLayout[1]);
|
const layoutElement = document.createElement("div")
|
layoutElement.id = "layout"
|
layoutElement.style.display= "grid"
|
layoutElement.style.gridTemplateColumns= `repeat(${nbcol}, 1fr)`
|
for (var irow=0; irow<nbrow; irow++) {
|
for (var icol=0; icol<nbcol; icol++) {
|
const divElement = document.createElement("div")
|
divElement.id = "cell_" + irow + "_" + icol
|
divElement.style.width = "1fr"
|
divElement.style.height = "1fr"
|
layoutElement.appendChild(divElement);
|
}
|
}
|
let content = document.getElementById("content")
|
content.appendChild(layoutElement)
|
}
|
|
fetch(webrtcConfig.url + "/api/getMediaList")
|
.then( (response) => response.json() )
|
.then( (response) => onGetDeviceList( response ))
|
|
fetch(webrtcConfig.url + "/api/version")
|
.then( (response) => response.text() )
|
.then( (response) => onVersion( response ))
|
|
}
|
window.onbeforeunload = function() {
|
for (var url in webRtcServerList) {
|
webRtcServerList[url].disconnect()
|
}
|
};
|
</script>
|
</head>
|
<body>
|
<nav id="menu"></nav>
|
<div id="content"></div>
|
<footer id="footer"></footer>
|
</body>
|
</html>
|
