<html>
|
<head>
|
<script src="libs/EventEmitter.min.js" ></script>
|
<script src="janusconfig.js" ></script>
|
<script src="janusvideoroom.js" ></script>
|
<script src="webrtcconfig.js" ></script>
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
<script type="module" src="webrtc-streamer-footer-element.js"></script>
|
</head>
|
<body>
|
Janus Url:<input id="janusUrl" type="text" size="50" />
|
Room id:<input id="janusRoom" type="number" />
|
<input type="button" onclick="connect()" value="ConnectRoom" />
|
<input type="button" onclick="openroom()" value="OpenRoom" />
|
<nav id="menu"></nav>
|
<webrtc-streamer-footer></webrtc-streamer-footer>
|
</body>
|
<script>
|
// set default value
|
document.querySelector('#janusUrl').value = janusRoomConfig.url;
|
document.querySelector('#janusRoom').value = janusRoomConfig.roomId;
|
|
function getText(url) {
|
var text;
|
if (url.video) {
|
text = url.video + " ";
|
}
|
if (url.audio) {
|
text += url.audio + " ";
|
}
|
return text;
|
}
|
|
function clientCallBack (name, status) {
|
console.log("clientCallBack name:"+ name + " status:"+ status);
|
|
const navId = "nav_" + name;
|
const navElt = document.querySelector(`[id="${navId}"]`);
|
if (navElt) {
|
if (status == "down") {
|
navElt.className = "";
|
} else if (status == "up") {
|
navElt.className = "active";
|
}
|
}
|
}
|
|
var bus = new EventEmitter();
|
bus.addListener('state', clientCallBack);
|
|
var janus = {};
|
|
|
function connect(webrtcStream, user) {
|
var serverName = document.querySelector('#janusUrl').value;
|
var roomName = parseInt(document.querySelector('#janusRoom').value);
|
|
let janusserver = new JanusVideoRoom(serverName, webrtcConfig.url, bus);
|
janus[serverName] = janusserver;
|
if (janusserver) {
|
janusserver.join(roomName);
|
}
|
return janusserver;
|
}
|
|
function disconnect(webrtcStream, user) {
|
var serverName = document.querySelector('#janusUrl').value;
|
|
let janusserver = janus[serverName];
|
janus[serverName] = undefined;
|
}
|
|
function join(webrtcStream, user) {
|
var roomName = parseInt(document.querySelector('#janusRoom').value);
|
|
let janusserver = connect();
|
if (janusserver) {
|
janusserver.join(roomName, webrtcStream, user);
|
}
|
}
|
|
function leave(webrtcStream, user) {
|
var serverName = document.querySelector('#janusUrl').value;
|
var roomName = parseInt(document.querySelector('#janusRoom').value);
|
|
let janusserver = janus[serverName];
|
if (janusserver) {
|
janusserver.leave(roomName, webrtcStream, user);
|
}
|
}
|
|
|
function openroom() {
|
var serverName = document.querySelector('#janusUrl').value;
|
var roomName = document.querySelector('#janusRoom').value;
|
window.open( serverName + "/videoroomtest.html");
|
}
|
|
// ------------------------------------------
|
// init device list
|
// ------------------------------------------
|
function onGetDeviceList(remoteDeviceList) {
|
var deviceList = [];
|
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");
|
option.url = url;
|
option.text = getText(url);
|
option.id = "nav_" + url.video;
|
option.onclick = function () {
|
if (this.className === "active") {
|
leave(this.url, this.url.video);
|
} else {
|
join(this.url, this.url.video);
|
}
|
}
|
urllist.appendChild(option);
|
}
|
}
|
|
|
// load
|
window.onload = function() {
|
fetch(webrtcConfig.url + "/api/getMediaList")
|
.then( (response) => (response.json()) )
|
.then( (response) => onGetDeviceList(response) )
|
.catch( (error) => console.log("getMediaList " + error ));
|
connect();
|
}
|
|
// unload
|
window.onbeforeunload = function() {
|
}
|
</script>
|
</html>
|
