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',
@@ -1077,6 +1078,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>
@@ -1108,6 +1110,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') {
@@ -1174,6 +1186,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'].';' : '').
@@ -1269,6 +1282,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 = {
@@ -635,6 +636,7 @@ function MonitorStream(monitorData) {
     this.handlerEventListener['killStream'] = this.streamListenerBind();
     this.activePlayer = 'zms';
     this.updateStreamInfo('ZMS MJPEG');
+    hideAudioMotion(this.id);
   }; // this.start
 
   this.setSrcInfoBlock = function() {
@@ -723,7 +725,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;
@@ -798,6 +807,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;
   };
@@ -936,6 +946,7 @@ function MonitorStream(monitorData) {
       }
       this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout);
     }
+    if (this.audioMotion && this.audioMotion.play) this.audioMotion.play();
   };
 
   this.eventHandler = function(event) {
@@ -989,20 +1000,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() {
@@ -1024,7 +1031,7 @@ function MonitorStream(monitorData) {
       volumeSlider.setAttribute('data-volume', parseInt(audioStream.volume * 100));
       if (volumeSlider.allowSetValue) {
         volumeSlider.noUiSlider.set(audioStream.volume * 100);
-        if (audioStream.muted === true) {
+        if (audioStream.muted === true || audioStream.volume === 0) {
           this.changeStateIconMute('off');
           volumeSlider.classList.add('noUi-mute');
         } else {
@@ -1046,7 +1053,7 @@ function MonitorStream(monitorData) {
     const volumeSlider = this.getVolumeSlider();
     const audioStream = this.getAVStream();
     if (!volumeSlider || !audioStream) return;
-    const iconMute = this.getIconMute();
+
     $j('#volumeControls'+this.id).show();
     if (!this.handlerEventListener['volumechange']) {
       this.handlerEventListener['volumechange'] = manageEventListener.addEventListener(audioStream, 'volumechange',
@@ -1056,53 +1063,8 @@ 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'");
-    });
+
+    createVolumeSlider(volumeSlider, audioStream);
 
     if (volumeSlider.getAttribute("data-muted") !== "true") {
       this.controlMute('off');
@@ -1114,97 +1076,42 @@ function MonitorStream(monitorData) {
   this.destroyVolumeSlider = function() {
     $j('#volumeControls'+this.id).hide();
     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/skins/classic/css/base/skin.css

@@ -1589,6 +1589,48 @@ video-stream {
   padding:0;
 }
 
+/* +++ Audio-motion +++ */
+audio-motion {
+  display: block;
+  width: 100%;
+}
+
+.imageFeed[data-not-display-video="true"], .imageFeed[data-not-display-video="true"] video-stream, .imageFeed[data-not-display-video="true"] video, /* monitor */
+*[id^="videoFeedStream"][data-not-display-video="true"] video { /* event */
+  max-width:25px !important; /* Otherwise, the stream will not start playing, especially for RTSP2Web-MSE. You can't set it below 21px, as we have an analysis of 20px as a starting point for playback. */
+  max-height: 25px !important;
+  border: none !important;
+  visibility: hidden !important;
+  position: absolute !important;
+  overflow: hidden !important;
+}
+
+*[id^="videoFeedStream"][data-not-display-video="true"] .video-js{  /* event */
+  height: 55px !important;
+}
+
+*[id^="videoFeedStream"][data-not-display-video="true"] .vjs-control-bar { /* event */
+ opacity: 1 !important;
+}
+
+.montage-page .monitor { /* Experimental setting */
+  border: 1px solid;
+  border-radius: 4px;
+}
+
+.montage-page .monitor .imageFeed { /* Experimental setting */
+  margin: -1px -1px 0 -1px;
+}
+
+.audio-control-panel .volume {
+  display: inline-block;
+}
+
+.audio-visualization .audio-control-panel {
+  float: right;
+}
+/* --- Audio-motion --- */
+
 /*
 .stream-info-status, .stream-info-mode {
   background-color: rgba(0,0,0,0.3);

web/skins/classic/includes/config.php

@@ -18,6 +18,12 @@
 // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 //
 
+$whatDisplay = array(
+  'OnlyVideo' => translate('Only video'),
+  'OnlyAudioVisualization' => translate('Only audio visualization'),
+  'VideoAudioVisualization' => translate('Video and audio visualization'),
+);
+
 $RTSP2WebTypes = array(
   'HLS' => 'HLS',
   'MSE' => 'MSE',

web/skins/classic/includes/functions.php

@@ -1786,6 +1786,7 @@ function xhtmlFooter() {
   $skinJsFile = getSkinFile('js/skin.js');
 ?>
   <script nonce="<?php echo $cspNonce; ?>" src="<?php echo cache_bust($skinJsFile) ?>"></script>
+  <script type="module" src="skins/<?php echo $skin ?>/js/audioMotionAnalyzer.js"></script>
   </body>
 </html>
 <?php