Feat: Using audio motion analyzer

web/includes/Monitor.php

@@ -227,6 +227,7 @@ public static function getStreamChannelOptions() {
     'AnalysisImage' => 'FullColour',
     'Enabled'   => array('type'=>'boolean','default'=>1),
     'Decoding'  => 'Always',
+    'WhatDisplay'   => 'OnlyVideo',
     'RTSP2WebEnabled'   => array('type'=>'integer','default'=>0),
     'DefaultPlayer' => '',
     'StreamChannel'   => 'Restream',
@@ -1078,6 +1079,7 @@ function getMonitorStateHTML() {
     $html = '
 <div id="monitorStatus'.$this->Id().'" class="monitorStatus">
   <div class="stream-info">
+    <div class="stream-info-status-track"></div>
     <div class="stream-info-status"></div>
     <div class="stream-info-mode"></div>
   </div>
@@ -1109,6 +1111,16 @@ function getMonitorStateHTML() {
  */
   function getStreamHTML($options) {
     global $basename;
+    global $view;
+
+    $whatDisplay = (isset($_COOKIE["zmWhatDisplay"])) ? strtolower($_COOKIE["zmWhatDisplay"]) : 'default';
+    $dataNotDisplayVideo = 'false';
+
+    if (false !== strpos($whatDisplay, 'default')) { // Default monitor settings
+      if (false === (strpos(strtolower($this->WhatDisplay()), 'video'))) $dataNotDisplayVideo = 'true';
+    } else {
+      if (false === (strpos($whatDisplay, 'video'))) $dataNotDisplayVideo = 'true';
+    }
 
     if (isset($options['scale']) and $options['scale'] != '' and $options['scale'] != 'fixed') {
       if ($options['scale'] != 'auto' && $options['scale'] != '0') {
@@ -1175,6 +1187,7 @@ function getStreamHTML($options) {
               class="monitorStream imageFeed"
               data-monitor-id="'. $this->Id() .'"
               data-width="'. $this->ViewWidth() .'"
+              data-not-display-video="'. $dataNotDisplayVideo .'"
               data-height="'.$this->ViewHeight() .'" style="'.
 #(($options['width'] and ($options['width'] != '0px')) ? 'width: '.$options['width'].';' : '').
 #(($options['height'] and ($options['height'] != '0px')) ? 'height: '.$options['height'].';' : '').
@@ -1270,6 +1283,22 @@ class="monitorStream imageFeed"
     //if ((!ZM_WEB_COMPACT_MONTAGE) && ($this->Type() != 'WebSite')) {
       $html .= $this->getMonitorStateHTML();
     }
+    $html .= '
+      <audio-motion id="audioVisualization'.$this->Id().'" class="audio-visualization">
+    '.PHP_EOL;
+    if ($view == 'montage') {
+      $html .= '
+        <div id="audioControlPanel'.$this->Id().'" class="audio-control-panel">
+          <div id="volumeControls'.$this->Id().'" class="disabled volume">
+            <div id="volumeSlider'.$this->Id().'" data-volume="50" data-muted="true" class="volumeSlider noUi-horizontal noUi-base noUi-round"></div>
+            <i id="controlMute'.$this->Id().'" class="audio-control-mute material-icons md-22"></i>
+          </div>
+        </div>
+        <canvas></canvas>
+      '.PHP_EOL;
+    }
+    $html .= '
+      </audio-motion>'.PHP_EOL;
     $html .= PHP_EOL.'</div></div><!--.grid-stack-item-content--></div><!--.grid-stack-item-->'.PHP_EOL;
     return $html;
   } // end getStreamHTML

web/js/MonitorStream.js

@@ -45,6 +45,7 @@ function MonitorStream(monitorData) {
   this.server_id = monitorData.server_id;
   this.scale = monitorData.scale ? parseInt(monitorData.scale) : 100;
   this.status = {capturefps: 0, analysisfps: 0}; // json object with alarmstatus, fps etc
+  this.whatDisplay = monitorData.whatDisplay;
   this.lastAlarmState = STATE_IDLE;
   this.statusCmdTimer = null; // timer for requests using ajax to get monitor status
   this.statusCmdParms = {
@@ -430,7 +431,8 @@ function MonitorStream(monitorData) {
 
     //console.log('start go2rtcenabled:', this.Go2RTCEnabled, 'this.player:', this.player, 'muted', this.muted);
 
-    $j('#volumeControls'+this.id).hide();
+    //$j('#volumeControls'+this.id).hide();
+    $j('#volumeControls'+this.id).addClass('disabled');
     $j('#delay'+this.id).addClass('hidden');
 
     if (this.Go2RTCEnabled && ((!this.player) || (-1 !== this.player.indexOf('go2rtc')))) {
@@ -640,6 +642,7 @@ function MonitorStream(monitorData) {
     this.handlerEventListener['killStream'] = this.streamListenerBind();
     this.activePlayer = 'zms';
     this.updateStreamInfo('ZMS MJPEG');
+    hideAudioMotion(this.id);
   }; // this.start
 
   this.setSrcInfoBlock = function() {
@@ -728,7 +731,14 @@ function MonitorStream(monitorData) {
       infoBlock.style.left = '50%';
       infoBlock.style.transform = 'translate(-50%, -50%)';
       infoBlock.style.pointerEvents = 'none';
-      this.getElement().parentNode.appendChild(infoBlock);
+      let node = null;
+      const _imageFeed = document.getElementById('imageFeed'+this.id);
+      if (_imageFeed && _imageFeed.getAttribute('data-not-display-video') === 'true') {
+        node = document.getElementById("audioVisualization" + this.id) || this.getElement();
+      } else {
+        node = this.getElement();
+      }
+      node.parentNode.appendChild(infoBlock);
       currentInfoBlock = infoBlock;
     }
     return currentInfoBlock;
@@ -803,6 +813,7 @@ function MonitorStream(monitorData) {
     } else {
       console.log("Unknown activePlayer", this.activePlayer);
     }
+    if (this.audioMotion && this.audioMotion.stop) this.audioMotion.stop();
     this.activePlayer = '';
     this.started = false;
   };
@@ -941,6 +952,7 @@ function MonitorStream(monitorData) {
       }
       this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout);
     }
+    if (this.audioMotion && this.audioMotion.init) this.audioMotion.init();
   };
 
   this.eventHandler = function(event) {
@@ -994,20 +1006,16 @@ function MonitorStream(monitorData) {
     this.onplay = func;
   };
 
-
   this.getVolumeControls = function() {
-    // On Watch page slider has no ID, on Montage page it has ID
-    return (document.getElementById('volumeControls')) ? document.getElementById('volumeControls') : document.getElementById('volumeControls'+this.id);
+    return getVolumeControls(this.id);
   };
 
   this.getVolumeSlider = function() {
-    // On Watch page slider has no ID, on Montage page it has ID
-    return (document.getElementById('volumeSlider')) ? document.getElementById('volumeSlider') : document.getElementById('volumeSlider'+this.id);
+    return getVolumeSlider(this.id);
   };
 
   this.getIconMute = function() {
-    // On Watch page icon has no ID, on Montage page it has ID
-    return (document.getElementById('controlMute')) ? document.getElementById('controlMute') : document.getElementById('controlMute'+this.id);
+    return getIconMute(this.id);
   };
 
   this.getAVStream = function() {
@@ -1051,8 +1059,9 @@ function MonitorStream(monitorData) {
     const volumeSlider = this.getVolumeSlider();
     const audioStream = this.getAVStream();
     if (!volumeSlider || !audioStream) return;
-    const iconMute = this.getIconMute();
-    $j('#volumeControls'+this.id).show();
+
+    //$j('#volumeControls'+this.id).show();
+    $j('#volumeControls'+this.id).removeClass('disabled');
     if (!this.handlerEventListener['volumechange']) {
       this.handlerEventListener['volumechange'] = manageEventListener.addEventListener(audioStream, 'volumechange',
           (event) => {
@@ -1061,155 +1070,56 @@ function MonitorStream(monitorData) {
       );
     }
     if (volumeSlider.noUiSlider) return;
-    const defaultVolume = (volumeSlider.getAttribute("data-volume") || 50);
-
-    noUiSlider.create(volumeSlider, {
-      start: [(defaultVolume) ? defaultVolume : audioStream.volume * 100],
-      step: 1,
-      //behaviour: 'unconstrained',
-      behaviour: 'tap',
-      connect: [true, false],
-      range: {
-        'min': 0,
-        'max': 100
-      },
-      /*tooltips: [
-        //true,
-        { to: function(value) { return value.toFixed(0) + '%'; } }
-      ],*/
-    });
-    volumeSlider.allowSetValue = true;
-    volumeSlider.noUiSlider.on('update', function onUpdateUiSlider(values, handle) {
-      audioStream.volume = values[0]/100;
-      if (values[0] > 0 && !audioStream.muted) {
-        iconMute.innerHTML = 'volume_up';
-        volumeSlider.classList.remove('noUi-mute');
-      } else {
-        iconMute.innerHTML = 'volume_off';
-        volumeSlider.classList.add('noUi-mute');
-      }
-      //console.log("Audio volume slider event: 'update'");
-    });
-    volumeSlider.noUiSlider.on('end', function onEndUiSlider(values, handle) {
-      volumeSlider.allowSetValue = true;
-      //console.log("Audio volume slider event: 'end'");
-    });
-    volumeSlider.noUiSlider.on('start', function onStartUiSlider(values, handle) {
-      volumeSlider.allowSetValue = false; // Let's prohibit changing the Value using the "Set" method, otherwise there will be lags and collapse when directly moving the slider with the mouse...
-      //console.log("Audio volume slider event: 'start'");
-    });
-    volumeSlider.noUiSlider.on('set', function onSetUiSlider(values, handle) {
-      //console.log("Audio volume slider event: 'set'");
-    });
-    volumeSlider.noUiSlider.on('slide', function onSlideUiSlider(values, handle) {
-      if (audioStream.volume > 0 && audioStream.muted) {
-        iconMute.innerHTML = 'volume_up';
-        audioStream.muted = false;
-      }
-      //console.log("Audio volume slider event: 'slide'");
-    });
 
-    if (volumeSlider.getAttribute("data-muted") !== "true") {
-      this.controlMute('off');
-    } else {
-      this.controlMute('on');
-    }
+    createVolumeSlider(volumeSlider, audioStream);
+
+    //if (volumeSlider.getAttribute("data-muted") !== "true") {
+    //  this.controlMute('off');
+    //} else {
+    //  this.controlMute('on');
+    //}
   };
 
   this.destroyVolumeSlider = function() {
-    $j('#volumeControls'+this.id).hide();
+    //$j('#volumeControls'+this.id).hide();
+    $j('#volumeControls'+this.id).addClass('disabled');
     const volumeSlider = this.getVolumeSlider();
+    destroyVolumeSlider(volumeSlider);
     //const iconMute = this.getIconMute();
     //if (iconMute) iconMute.innerText = "";
-    if (volumeSlider && volumeSlider.noUiSlider) {
-      volumeSlider.noUiSlider.destroy();
-      volumeSlider.noUiSlider = null;
-    }
   };
 
   /*
   * volume: on || off
   */
   this.changeStateIconMute = function(volume) {
-    const volumeControls = this.getVolumeControls();
-    const disabled = (volumeControls) ? volumeControls.classList.contains('disabled') : false;
-    const iconMute = this.getIconMute();
-    if (!disabled && iconMute) {
-      iconMute.innerHTML = (volume == 'on')? 'volume_up' : 'volume_off';
-    }
-    return iconMute;
+    return changeStateIconMute(this.id, volume);
   };
 
   /*
   * volume: on || off
   */
   this.changeVolumeSlider = function(volume) {
-    const volumeControls = this.getVolumeControls();
-    //const controlMute = document.querySelector('[id ^= "controlMute'+this.id+'"]');
-    const volumeSlider = this.getVolumeSlider();
-
-    if (volumeSlider) {
-      let disabled = false;
-      if (volumeControls) {
-        disabled = volumeControls.classList.contains('disabled');
-      }
-      if (volume == 'on') {
-        volumeSlider.classList.remove('noUi-mute');
-      } else if (volume == 'off') {
-        volumeSlider.classList.add('noUi-mute');
-      }
-      if (volumeSlider.noUiSlider) {
-        (disabled) ? volumeSlider.noUiSlider.disable() : volumeSlider.noUiSlider.enable();
-      }
-    }
-    return volumeSlider;
+    return changeVolumeSlider(this.id, volume);
   };
 
   /*
   * mode: switch, on, off
   */
   this.controlMute = function(mode = 'switch') {
-    let volumeSlider = this.getVolumeSlider();
     const audioStream = this.getAVStream();
-    const volumeControls = this.getVolumeControls();
-    const disabled = (volumeControls) ? volumeControls.classList.contains('disabled') : false;
-
-    if (volumeSlider && volumeSlider.noUiSlider) {
-      (disabled) ? volumeSlider.noUiSlider.disable() : volumeSlider.noUiSlider.enable();
-    }
-
-    if (disabled) {
-      console.log(`Volume control is disabled in controlMute for monitor ID=${this.id}`);
-      return;
-    }
-    if (!audioStream) {
-      console.log(`No audiostream! in controlMute for monitor ID=${this.id}`);
-      return;
-    }
-
-    if (mode=='switch') {
-      if (audioStream.muted) {
-        audioStream.muted = this.muted = false;
-        this.changeStateIconMute('on');
-        volumeSlider = this.changeVolumeSlider('on');
-        if (volumeSlider && volumeSlider.noUiSlider) {
-          audioStream.volume = volumeSlider.noUiSlider.get() / 100;
+    controlMute(this.id, mode);
+    if (audioStream) {
+      if (mode=='switch') {
+        if (audioStream.muted) {
+          this.muted = false;
+        } else {
+          this.muted = true;
         }
-      } else {
-        audioStream.muted = this.muted = true;
-        this.changeStateIconMute('off');
-        this.changeVolumeSlider('off');
-      }
-    } else if (mode=='on') {
-      audioStream.muted = this.muted = true;
-      this.changeStateIconMute('off');
-      this.changeVolumeSlider('off');
-    } else if (mode=='off') {
-      audioStream.muted = this.muted = false;
-      this.changeStateIconMute('on');
-      volumeSlider = this.changeVolumeSlider('on');
-      if (volumeSlider && volumeSlider.noUiSlider) {
-        audioStream.volume = volumeSlider.noUiSlider.get() / 100;
+      } else if (mode=='on') {
+        this.muted = true;
+      } else if (mode=='off') {
+        this.muted = false;
       }
     }
   };

web/lang/en_gb.php

@@ -1030,6 +1030,11 @@ function zmVlang($langVarArray, $count) {
      is set to "my_camera", access the stream at rtsp://ZM_HOST:20006/my_camera
      ',
     ),
+  'OPTIONS_WHATTODISPLAY' => array(
+     'Help' => '
+     On the Watch, Montage, Event page, you can display either a video stream, or an audio stream visualization, or both a video stream and an audio visualization.
+     ',
+    ),
   'FUNCTION_ANALYSIS_ENABLED' => array(
     'Help' => '
       When to perform motion detection on the captured video.