Rework to use MonitorStream.js

web/skins/classic/views/js/watch.js

@@ -182,73 +182,6 @@ function changeScale() {
   }
 } // end function changeScale
 
-function setAlarmState(currentAlarmState) {
-  alarmState = currentAlarmState;
-
-  var stateClass = '';
-  if (alarmState == STATE_ALARM) {
-    stateClass = 'alarm';
-  } else if (alarmState == STATE_ALERT) {
-    stateClass = 'alert';
-  }
-  $j('#stateValue').text(stateStrings[alarmState]);
-  if (stateClass) {
-    $j('#stateValue').addClass(stateClass);
-  } else {
-    $j('#stateValue').removeClass();
-  }
-
-  var isAlarmed = ( alarmState == STATE_ALARM || alarmState == STATE_ALERT );
-  var wasAlarmed = ( lastAlarmState == STATE_ALARM || lastAlarmState == STATE_ALERT );
-
-  var newAlarm = ( isAlarmed && !wasAlarmed );
-  var oldAlarm = ( !isAlarmed && wasAlarmed );
-
-  if (newAlarm) {
-    table.bootstrapTable('refresh');
-    if (SOUND_ON_ALARM) {
-      // Enable the alarm sound
-      if (!msieVer) {
-        $j('#alarmSound').removeClass('hidden');
-      } else {
-        $j('#MediaPlayer').trigger('play');
-      }
-    }
-    if (POPUP_ON_ALARM) {
-      window.focus();
-    }
-  }
-  if (oldAlarm) { // done with an event do a refresh
-    table.bootstrapTable('refresh');
-    if (SOUND_ON_ALARM) {
-      // Disable alarm sound
-      if (!msieVer) {
-        $j('#alarmSound').addClass('hidden');
-      } else {
-        $j('#MediaPlayer').trigger('pause');
-      }
-    }
-  }
-
-  lastAlarmState = alarmState;
-} // end function setAlarmState( currentAlarmState )
-
-function streamCmdReq(data) {
-  if (auth_hash) data.auth = auth_hash;
-  $j.getJSON(monitorUrl + '?view=request&request=stream&connkey='+connKey, data)
-      .done(getStreamCmdResponse)
-      .fail(getStreamCmdError);
-
-  streamCmdTimer = null;
-}
-
-function getStreamCmdError(text, error) {
-  console.log(error);
-  // Error are normally due to failed auth. reload the page.
-
-  //window.location.reload();
-}
-
 function getStreamCmdResponse(respObj, respText) {
   watchdogOk('stream');
   if (streamCmdTimer) {
@@ -379,7 +312,7 @@ function streamCmdQuery() {
   streamCmdReq({command: CMD_QUERY});
 }
 
-function streamCmdPause(action) {
+function onPause() {
   setButtonState('pauseBtn', 'active');
   setButtonState('playBtn', 'inactive');
   setButtonState('stopBtn', 'inactive');
@@ -389,18 +322,17 @@ function streamCmdPause(action) {
     setButtonState('slowRevBtn', 'inactive');
     setButtonState('fastRevBtn', 'inactive');
   }
+}
+function streamCmdPause(action) {
+  onPause();
   if (action) {
-    var data = {};
+    monitorStream.streamCommand(CMD_PAUSE);
-    if (auth_hash) data.auth = auth_hash;
-    data.command = CMD_PAUSE;
-    streamCmdReq(data);
   }
 }
-
+function onPlay() {
-function streamCmdPlay(action) {
   setButtonState('pauseBtn', 'inactive');
   setButtonState('playBtn', 'active');
-  if (streamStatus.delayed == true) {
+  if (monitorStream.status.delayed == true) {
     setButtonState('stopBtn', 'inactive');
     if (monitorStreamReplayBuffer) {
       setButtonState('fastFwdBtn', 'inactive');
@@ -417,11 +349,14 @@ function streamCmdPlay(action) {
       setButtonState('fastRevBtn', 'unavail');
     }
   }
-  if (action) {
-    streamCmdReq({command: CMD_PLAY});
-  }
 }
 
+function streamCmdPlay(action) {
+  onPlay();
+  if (action) {
+    monitorStream.streamCommand(CMD_PLAY);
+  }
+}
 
 function streamCmdStop(action) {
   setButtonState('pauseBtn', 'inactive');
@@ -434,7 +369,7 @@ function streamCmdStop(action) {
     setButtonState('fastRevBtn', 'unavail');
   }
   if (action) {
-    streamCmdReq({command: CMD_STOP});
+    monitorStream.streamCommand(CMD_STOP);
   }
   setButtonState('stopBtn', 'unavail');
   setButtonState('playBtn', 'active');
@@ -451,7 +386,7 @@ function streamCmdFastFwd(action) {
     setButtonState('fastRevBtn', 'inactive');
   }
   if (action) {
-    streamCmdReq({command: CMD_FASTFWD});
+    monitorStream.streamCommand(CMD_FASTFWD);
   }
 }
 
@@ -466,7 +401,7 @@ function streamCmdSlowFwd(action) {
     setButtonState('fastRevBtn', 'inactive');
   }
   if (action) {
-    streamCmdReq({command: CMD_SLOWFWD});
+    monitorStream.command(CMD_SLOWFWD);
   }
   setButtonState('pauseBtn', 'active');
   if (monitorStreamReplayBuffer) {
@@ -485,7 +420,7 @@ function streamCmdSlowRev(action) {
     setButtonState('fastRevBtn', 'inactive');
   }
   if (action) {
-    streamCmdReq({command: CMD_SLOWREV});
+    monitorStream.command(CMD_SLOWREV);
   }
   setButtonState('pauseBtn', 'active');
   if (monitorStreamReplayBuffer) {
@@ -504,35 +439,24 @@ function streamCmdFastRev(action) {
     setButtonState('fastRevBtn', 'inactive');
   }
   if (action) {
-    streamCmdReq({command: CMD_FASTREV});
+    monitorStream.command(CMD_FASTREV);
   }
 }
 
 function streamCmdZoomIn(x, y) {
-  var data = {};
+  monitorStream.streamCommand({x: x, y: y, command: CMD_ZOOMIN});
-  data.x = x;
-  data.y = y;
-  data.command = CMD_ZOOMIN;
-  streamCmdReq(data);
 }
 
 function streamCmdZoomOut() {
-  streamCmdReq({command: CMD_ZOOMOUT});
+  monitorStream.streamCommand(CMD_ZOOMOUT);
 }
 
 function streamCmdScale(scale) {
-  var data = {};
+  monitorStream.streamCommand({command: CMD_SCALE, scale: scale});
-  data.command = CMD_SCALE;
-  data.scale = scale;
-  streamCmdReq(data);
 }
 
 function streamCmdPan(x, y) {
-  var data = {};
+  monitorStream.streamCommand({x: x, y: y, command: CMD_PAN});
-  data.x = x;
-  data.y = y;
-  data.command = CMD_PAN;
-  streamCmdReq(data);
 }
 
 
@@ -565,33 +489,12 @@ function statusCmdQuery() {
   statusCmdTimer = null;
 }
 
-function alarmCmdReq(data) {
-  if (auth_hash) data.auth = auth_hash;
-  $j.getJSON(monitorUrl + '?view=request&request=alarm&id='+monitorId, data)
-      .done(getAlarmCmdResponse)
-      .fail(function(jqxhr, textStatus, error) {
-        if (textStatus === 'timeout') {
-          streamCmdQuery();
-        } else {
-          logAjaxFail(jqxhr, textStatus, error);
-        }
-      });
-}
-
-function getAlarmCmdResponse(respObj, respText) {
-  checkStreamForErrors('getAlarmCmdResponse', respObj);
-}
-
 function cmdDisableAlarms() {
-  var data = {};
+  monitorStream.alarmCommand('disableAlarms');
-  data.command = 'disableAlarms';
-  alarmCmdReq(data);
 }
 
 function cmdEnableAlarms() {
-  var data = {};
+  monitorStream.alarmCommand('enableAlarms');
-  data.command = 'enableAlarms';
-  alarmCmdReq(data);
 }
 
 function cmdAlarm() {
@@ -603,16 +506,13 @@ function cmdAlarm() {
 }
 
 function cmdForceAlarm() {
-  var data = {};
+  monitorStream.alarmCommand('forceAlarm');
-  data.command = 'forceAlarm';
-  alarmCmdReq(data);
   if (window.event) window.event.preventDefault();
+  return false;
 }
 
 function cmdCancelForcedAlarm() {
-  var data = {};
+  monitorStream.alarmCommand('cancelForcedAlarm');
-  data.command = 'cancelForcedAlarm';
-  alarmCmdReq(data);
   if (window.event) window.event.preventDefault();
   return false;
 }
@@ -717,6 +617,7 @@ function fetchImage(streamImage) {
 function handleClick(event) {
   // target should be the img tag
   var target = $j(event.target);
+  console.log("click " + showMode);
   var width = target.width();
   var height = target.height();
 
@@ -892,6 +793,10 @@ function msieVer() {
   }
 }
 
+function refresh_events_table() {
+  table.bootstrapTable('refresh');
+}
+
 function initPage() {
   if (canView.Control) {
     // Load the PTZ Preset modal into the DOM
@@ -899,9 +804,29 @@ function initPage() {
     // Load the settings modal into the DOM
     if (monitorType == 'Local') getSettingsModal();
   }
+  // Only enable the settings button for local cameras
+  settingsBtn.prop('disabled', !(canView.Control && (monitorType == 'Local')));
 
   if (monitorType != 'WebSite') {
-    if (streamMode != 'janus') {
+    monitorStream = new MonitorStream(monitorData[monIdx]);
+
+    // Start the fps and status updates. give a random delay so that we don't assault the server
+    monitorStream.setScale('auto');
+    monitorStream.start(Math.round( (Math.random()+0.5)*statusRefreshTimeout ));
+    if (streamMode == 'single') {
+      monitorStream.setup_onclick(fetchImage);
+    } else {
+      monitorStream.setup_onclick(handleClick);
+    }
+    monitorStream.setup_onpause(onPause);
+    monitorStream.setup_onplay(onPlay);
+    monitorStream.setup_onalarm(refresh_events_table);
+
+    monitorStream.setButton('enableAlarmButton', enableAlmBtn);
+    monitorStream.setButton('forceAlarmButton', forceAlmBtn);
+    monitorStream.setButton('zoomOutButton', $j('zoomOutBtn'));
+
+    /*
     if (streamMode == 'single') {
       statusCmdTimer = setTimeout(statusCmdQuery, 200);
       setInterval(watchdogCheck, statusRefreshTimeout*2, 'status');
@@ -909,69 +834,7 @@ function initPage() {
       streamCmdTimer = setTimeout(streamCmdQuery, 200);
       setInterval(watchdogCheck, statusRefreshTimeout*2, 'stream');
     }
-    }
+    if (canStreamNative || (streamMode == 'single')) {
-    if (streamMode == 'janus') {
-      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() {
-            janus.attach({
-              plugin: "janus.plugin.streaming",
-              opaqueId: opaqueId,
-              success: function(pluginHandle) {
-                streaming2 = pluginHandle;
-                var body = {"request": "watch", "id": monitorId};
-                streaming2.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"];
-                    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
-                  streaming2.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"};
-                      streaming2.send({"message": body, "jsep": jsep});
-                    },
-                    error: function(error) {
-                      Janus.error("WebRTC error:", error);
-                    }
-                  });
-                }
-              }, //onmessage function
-              onremotestream: function(stream) {
-                Janus.debug(" ::: Got a remote track :::");
-                Janus.debug(stream);
-                Janus.attachMediaStream(document.getElementById("liveStream" + monitorId), stream);
-                document.getElementById("liveStream" + monitorId).play();
-              }
-            }); // attach
-          } //Success functio
-        }); //new Janus
-      }}); //janus.init callback
-    } else if (canStreamNative || (streamMode == 'single')) {
       var streamImg = $j('#imageFeed img');
       if (!streamImg) streamImg = $j('#imageFeed object');
       if (!streamImg) {
@@ -996,6 +859,7 @@ function initPage() {
     if (refreshApplet && appletRefreshTime) {
       setTimeout(appletRefresh, appletRefreshTime*1000);
     }
+    */
     if (window.history.length == 1) {
       $j('#closeControl').html('');
     }
@@ -1006,6 +870,27 @@ function initPage() {
     document.querySelectorAll('select[name="changeRate"]').forEach(function(el) {
       el.onchange = window['changeRate'].bind(el, el);
     });
+
+    // Init the bootstrap-table
+    table.bootstrapTable({icons: icons});
+    // Update table rows each time after new data is loaded
+    table.on('post-body.bs.table', function(data) {
+      $j('#eventList tr:contains("New Event")').addClass('recent');
+    });
+
+    // Take appropriate action when the user clicks on a cell
+    table.on('click-cell.bs.table', processClicks);
+
+    // Some toolbar events break the thumbnail animation, so re-init eventlistener
+    table.on('all.bs.table', initThumbAnimation);
+
+    // Update table links each time after new data is loaded
+    table.on('post-body.bs.table', function(data) {
+      var thumb_ndx = $j('#eventList tr th').filter(function() {
+        return $j(this).text().trim() == 'Thumbnail';
+      }).index();
+      table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass('colThumbnail');
+    });
   } else if (monitorRefresh > 0) {
     setInterval(reloadWebSite, monitorRefresh*1000);
   }
@@ -1042,31 +927,6 @@ function initPage() {
   } else {
     cyclePause();
   }
-
-  // Only enable the settings button for local cameras
-  settingsBtn.prop('disabled', !(canView.Control && (monitorType == 'Local')));
-
-  // Init the bootstrap-table
-  if (monitorType != 'WebSite') table.bootstrapTable({icons: icons});
-
-  // Update table rows each time after new data is loaded
-  table.on('post-body.bs.table', function(data) {
-    $j('#eventList tr:contains("New Event")').addClass('recent');
-  });
-
-  // Take appropriate action when the user clicks on a cell
-  table.on('click-cell.bs.table', processClicks);
-
-  // Some toolbar events break the thumbnail animation, so re-init eventlistener
-  table.on('all.bs.table', initThumbAnimation);
-
-  // Update table links each time after new data is loaded
-  table.on('post-body.bs.table', function(data) {
-    var thumb_ndx = $j('#eventList tr th').filter(function() {
-      return $j(this).text().trim() == 'Thumbnail';
-    }).index();
-    table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass('colThumbnail');
-  });
 } // initPage
 
 function watchFullscreen() {
@@ -1151,10 +1011,7 @@ function cycleToggle(e) {
 function changeRate(e) {
   const newvalue = $j(e).val();
   if (1) {
-    var data = {};
+    monitorStream.streamCommand({command: CMD_MAXFPS, maxfps: newvalue});
-    data.command = CMD_MAXFPS;
-    data.maxfps = newvalue;
-    streamCmdReq(data);
   } else {
     streamImage = $j('#liveStream'+monitorData[monIdx].id);
     const oldsrc = streamImage.attr('src');