From 59056b41038aaf2f3bbe2445ec54ae232e1b22ad Mon Sep 17 00:00:00 2001 From: Jonathan Bennett Date: Fri, 14 Jan 2022 23:14:43 -0600 Subject: [PATCH] Refactor Montage view js -- Janus in MonitorStream --- web/js/MonitorStream.js | 79 ++++++++++++++++++++ web/skins/classic/views/js/montage.js | 101 +++----------------------- 2 files changed, 88 insertions(+), 92 deletions(-) diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js index ef4d6db41..aaf5ac8fb 100644 --- a/web/js/MonitorStream.js +++ b/web/js/MonitorStream.js @@ -1,3 +1,5 @@ +var janus = null; +var streaming = []; function MonitorStream(monitorData) { this.id = monitorData.id; @@ -8,6 +10,7 @@ function MonitorStream(monitorData) { this.url_to_zms = monitorData.url_to_zms; this.width = monitorData.width; this.height = monitorData.height; + this.janusEnabled = monitorData.janusEnabled; this.scale = 100; this.status = null; this.alarmState = STATE_IDLE; @@ -80,6 +83,17 @@ function MonitorStream(monitorData) { const stream = this.getElement(); if (!stream) return; + if (this.janusEnabled) { + var id = parseInt(this.id); + var server = "http://" + window.location.hostname + ":8088/janus"; + if (janus == null) { + Janus.init({debug: "all", callback: function() { + janus = new Janus({server: server}); //new Janus + }}); + } + attachVideo(id); + return; + } if (!stream.src) { // Website Monitors won't have an img tag console.log('No src for #liveStream'+this.id); @@ -287,3 +301,68 @@ function MonitorStream(monitorData) { this.streamCmdReq(this.streamCmdParms); }; } // end function MonitorStream + +async function attachVideo(id) { + await waitUntil(() => janus.isConnected() ) + janus.attach({ + plugin: "janus.plugin.streaming", + opaqueId: "streamingtest-"+Janus.randomString(12), + success: function(pluginHandle) { + streaming[id] = pluginHandle; + var body = { "request": "watch", "id": id}; + streaming[id].send({"message": body}); + }, + error: function(error) { + Janus.error(" -- Error attaching plugin... ", error); + }, + onmessage: function(msg, jsep) { + Janus.debug(" ::: Got a message :::"); + Janus.debug(msg); + var result = msg["result"]; + if(result !== null && result !== undefined) { + if(result["status"] !== undefined && result["status"] !== null) { + var status = result["status"]; + Janus.debug(status); + } + } else if(msg["error"] !== undefined && msg["error"] !== null) { + return; + } + if(jsep !== undefined && jsep !== null) { + Janus.debug("Handling SDP as well..."); + Janus.debug(jsep); + // Offer from the plugin, let's answer + streaming[id].createAnswer({ + jsep: jsep, + // We want recvonly audio/video and, if negotiated, datachannels + media: { audioSend: false, videoSend: false, data: true }, + success: function(jsep) { + Janus.debug("Got SDP!"); + Janus.debug(jsep); + var body = { "request": "start"}; + streaming[id].send({"message": body, "jsep": jsep}); + }, + error: function(error) { + Janus.error("WebRTC error:", error); + } + }); + } + }, //onmessage function + onremotestream: function(ourstream) { + Janus.debug(" ::: Got a remote track :::"); + Janus.debug(ourstream); + Janus.attachMediaStream(document.getElementById("liveStream" + id), ourstream); + } + }); // janus.attach +} //function attachVideo + +const waitUntil = (condition) => { + return new Promise((resolve) => { + let interval = setInterval(() => { + if (!condition()) { + return; + } + clearInterval(interval); + resolve(); + }, 100); + }); +} diff --git a/web/skins/classic/views/js/montage.js b/web/skins/classic/views/js/montage.js index 369f23e8f..f6da7fbac 100644 --- a/web/skins/classic/views/js/montage.js +++ b/web/skins/classic/views/js/montage.js @@ -1,9 +1,3 @@ -var server; -var janus = null; -var opaqueId; -var globalCount = 0; -var streamingList = []; -var janusMonitors = []; /** * called when the layoutControl select element is changed, or the page * is rendered @@ -306,43 +300,19 @@ function initPage() { $j("#flipMontageHeader").slideToggle("fast"); $j("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); } - var initJanus = false; - //var streamingMonitors = []; for ( var i = 0, length = monitorData.length; i < length; i++ ) { - if (monitorData[i].janusEnabled) { - initJanus = true; - janusMonitors.push(monitorData[i]); - } - } - if (initJanus) { - server = "http://" + window.location.hostname + ":8088/janus"; - opaqueId = "streamingtest-"+Janus.randomString(12); - Janus.init({debug: "all", callback: function() { - janus = new Janus({ - server: server, - success: function() { - for ( var i = 0, length = janusMonitors.length; i < length; i++ ) { - attachVideo(janus, i); - } - } - }); - }}); - } - for ( var i = 0, length = monitorData.length; i < length; i++ ) { - if (!monitorData[i].janusEnabled) { - monitors[i] = new MonitorStream(monitorData[i]); + monitors[i] = new MonitorStream(monitorData[i]); - // Start the fps and status updates. give a random delay so that we don't assault the server - var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); - console.log("delay: " + delay); - monitors[i].start(delay); + // Start the fps and status updates. give a random delay so that we don't assault the server + var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); + console.log("delay: " + delay); + monitors[i].start(delay); - var interval = monitors[i].refresh; - if ( monitors[i].type == 'WebSite' && interval > 0 ) { - setInterval(reloadWebSite, interval*1000, i); - } - monitors[i].setup_onclick(); + var interval = monitors[i].refresh; + if ( monitors[i].type == 'WebSite' && interval > 0 ) { + setInterval(reloadWebSite, interval*1000, i); } + monitors[i].setup_onclick(); } selectLayout('#zmMontageLayout'); } @@ -352,58 +322,5 @@ function watchFullscreen() { openFullscreen(content); } -function attachVideo(janus, i) { - janus.attach({ - plugin: "janus.plugin.streaming", - opaqueId: "streamingtest-"+Janus.randomString(12), - success: function(pluginHandle) { - janusMonitors[i].streaming = pluginHandle; - var body = {"request": "watch", "id": parseInt(janusMonitors[i].id)}; - janusMonitors[i].streaming.send({"message": body}); - }, - error: function(error) { - Janus.error(" -- Error attaching plugin... ", error); - }, - onmessage: function(msg, jsep) { - Janus.debug(" ::: Got a message :::"); - Janus.debug(msg); - var result = msg["result"]; - if (result !== null && result !== undefined) { - if (result["status"] !== undefined && result["status"] !== null) { - const status = result["status"]; - console.log(status); - } - } else if (msg["error"] !== undefined && msg["error"] !== null) { - Janus.error(msg["error"]); - return; - } - if (jsep !== undefined && jsep !== null) { - Janus.debug("Handling SDP as well..."); - Janus.debug(jsep); - // Offer from the plugin, let's answer - janusMonitors[i].streaming.createAnswer({ - jsep: jsep, - // We want recvonly audio/video and, if negotiated, datachannels - media: {audioSend: false, videoSend: false, data: true}, - success: function(jsep) { - Janus.debug("Got SDP!"); - Janus.debug(jsep); - var body = {"request": "start"}; - janusMonitors[i].streaming.send({"message": body, "jsep": jsep}); - }, - error: function(error) { - Janus.error("WebRTC error:", error); - } - }); - } - }, //onmessage function - onremotestream: function(ourstream) { - Janus.debug(" ::: Got a remote track :::"); - Janus.debug(ourstream); - Janus.attachMediaStream(document.getElementById("liveStream" + janusMonitors[i].id), ourstream); - document.getElementById("liveStream" + janusMonitors[i].id).play(); - } - });// attach -} // Kick everything off $j(document).ready(initPage);