@@ -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 .= '
+
+ '.PHP_EOL;
+ if ($view == 'montage') {
+ $html .= '
+
+
+ '.PHP_EOL;
+ }
+ $html .= '
+ '.PHP_EOL;
$html .= PHP_EOL.'
'.PHP_EOL;
return $html;
} // end getStreamHTML
diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js
index c386ad3ba2..6b4787e632 100644
--- a/web/js/MonitorStream.js
+++ b/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;
}
}
};
diff --git a/web/lang/en_gb.php b/web/lang/en_gb.php
index 8857eab90c..04e48fa37a 100644
--- a/web/lang/en_gb.php
+++ b/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.
diff --git a/web/skins/classic/assets/audioMotion-analyzer/src/audioMotion-analyzer.js b/web/skins/classic/assets/audioMotion-analyzer/src/audioMotion-analyzer.js
new file mode 100644
index 0000000000..abc6186a23
--- /dev/null
+++ b/web/skins/classic/assets/audioMotion-analyzer/src/audioMotion-analyzer.js
@@ -0,0 +1,2713 @@
+/**!
+ * audioMotion-analyzer
+ * High-resolution real-time graphic audio spectrum analyzer JS module
+ *
+ * @version 4.5.4
+ * @author Henrique Avila Vianna