Refactor Montage view js -- Janus in MonitorStream

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);
+  });
+}

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) {
+    monitors[i] = new MonitorStream(monitorData[i]);
-      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]);
 
-      // Start the fps and status updates. give a random delay so that we don't assault the server
+    // 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 );
+    var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
-      console.log("delay: " + delay);
+    console.log("delay: " + delay);
-      monitors[i].start(delay);
+    monitors[i].start(delay);
 
-      var interval = monitors[i].refresh;
+    var interval = monitors[i].refresh;
-      if ( monitors[i].type == 'WebSite' && interval > 0 ) {
+    if ( monitors[i].type == 'WebSite' && interval > 0 ) {
-        setInterval(reloadWebSite, interval*1000, i);
+      setInterval(reloadWebSite, interval*1000, i);
-      }
-      monitors[i].setup_onclick();
     }
+    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);