ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge code from watch.js. Add an ajaxQueue. Link up buttons from UI

This commit is contained in:
Isaac Connor 2022-01-20 11:47:28 -05:00
parent 4bf55b1af1
commit 22b6337752
1 changed files with 264 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

350
web/js/MonitorStream.js
View File

@ -13,15 +13,22 @@ function MonitorStream(monitorData) {
this.janusEnabled = monitorData.janusEnabled; this.janusEnabled = monitorData.janusEnabled;
this.scale = 100; this.scale = 100;
this.status = null; this.status = null;
this.alarmState = STATE_IDLE;
this.lastAlarmState = STATE_IDLE; this.lastAlarmState = STATE_IDLE;
this.streamCmdTimer = null;
this.streamCmdParms = { this.streamCmdParms = {
view: 'request', view: 'request',
request: 'stream', request: 'stream',
connkey: this.connKey connkey: this.connKey
}; };
this.ajaxQueue = null;
this.type = monitorData.type; this.type = monitorData.type;
this.refresh = monitorData.refresh; this.refresh = monitorData.refresh;
this.buttons = {}; // index by name
this.setButton = function(name, element) {
this.buttons.name = element;
};
this.element = null; this.element = null;
this.getElement = function() { this.getElement = function() {
if (this.element) return this.element; if (this.element) return this.element;
@ -36,7 +43,7 @@ function MonitorStream(monitorData) {
this.show = function() { this.show = function() {
const stream = this.getElement(); const stream = this.getElement();
if (!stream.src) { if (!stream.src) {
stream.src = this.url_to_zms+"&mode=single&scale=100&connkey="+this.connKey; stream.src = this.url_to_zms+"&mode=single&scale=100&connkey="+this.connKey+this.auth_relay;
} }
}; };
@ -48,7 +55,7 @@ function MonitorStream(monitorData) {
const oldSrc = img.getAttribute('src'); const oldSrc = img.getAttribute('src');
if (!oldSrc) { if (!oldSrc) {
console.log("No src on img?!"); console.log('No src on img?!');
console.log(img); console.log(img);
return; return;
} }
@ -58,13 +65,10 @@ function MonitorStream(monitorData) {
console.log("Scaling to: " + newscale); console.log("Scaling to: " + newscale);
if (newscale == '0' || newscale == 'auto') { if (newscale == '0' || newscale == 'auto') {
let bottomElement = document.getElementById('replayStatus'); const bottomElement = document.getElementById('monitorState'+this.id);
if (!bottomElement) {
bottomElement = document.getElementById('monitorState');
}
var newSize = scaleToFit(this.width, this.height, $j(img), $j(bottomElement)); var newSize = scaleToFit(this.width, this.height, $j(img), $j(bottomElement));
console.log(newSize); //console.log(newSize);
newWidth = newSize.width; newWidth = newSize.width;
newHeight = newSize.height; newHeight = newSize.height;
autoScale = parseInt(newSize.autoScale); autoScale = parseInt(newSize.autoScale);
@ -83,11 +87,8 @@ function MonitorStream(monitorData) {
} }
img.setAttribute('src', newSrc); img.setAttribute('src', newSrc);
}; };
this.start = function(delay) {
// Step 1 make sure we are streaming instead of a static image
const stream = this.getElement();
if (!stream) return;
this.start = function(delay) {
if (this.janusEnabled) { if (this.janusEnabled) {
var id = parseInt(this.id); var id = parseInt(this.id);
var server; var server;
@ -106,47 +107,46 @@ function MonitorStream(monitorData) {
attachVideo(id); attachVideo(id);
return; return;
} }
const stream = this.getElement();
if (!stream) return;
if (!stream.src) { if (!stream.src) {
// Website Monitors won't have an img tag // Website Monitors won't have an img tag, neither will video
console.log('No src for #liveStream'+this.id); console.log('No src for #liveStream'+this.id);
console.log(stream); console.log(stream);
return; return;
} }
// Step 1 make sure we are streaming instead of a static image
src = stream.src.replace(/mode=single/i, 'mode=jpeg'); src = stream.src.replace(/mode=single/i, 'mode=jpeg');
if ( -1 == src.search('connkey') ) { if (-1 == src.search('connkey')) {
src += '&connkey='+this.connKey; src += '&connkey='+this.connKey;
} }
if ( stream.src != src ) { if (stream.src != src) {
console.log("Setting to streaming: " + src); console.log("Setting to streaming: " + src);
stream.src = ''; stream.src = '';
stream.src = src; stream.src = src;
} }
setTimeout(this.streamCmdQuery.bind(this), delay); setTimeout(this.statusQuery.bind(this), delay);
}; };
this.stop = function() { this.stop = function() {
if ( 0 ) { if ( 0 ) {
var stream = $j('#liveStream'+this.id)[0]; const stream = this.getElement();
if ( ! stream ) { if (!stream) return;
console.log('No live stream');
return;
}
src = stream.src.replace(/mode=jpeg/i, 'mode=single'); src = stream.src.replace(/mode=jpeg/i, 'mode=single');
if ( stream.src != src ) { if (stream.src != src) {
console.log("Setting to stopped"); console.log("Setting to stopped");
stream.src = ''; stream.src = '';
stream.src = src; stream.src = src;
} }
} }
this.streamCmdParms.command = CMD_STOP; this.streamCommand(CMD_STOP);
this.streamCmdReq(this.streamCmdParms);
}; };
this.pause = function() { this.pause = function() {
this.streamCmdParms.command = CMD_PAUSE; this.streamCommand(CMD_PAUSE);
this.streamCmdReq(this.streamCmdParms);
}; };
this.play = function() { this.play = function() {
this.streamCmdParms.command = CMD_PLAY; this.streamCommand(CMD_PLAY);
this.streamCmdReq(this.streamCmdParms);
}; };
this.eventHandler = function(event) { this.eventHandler = function(event) {
@ -154,77 +154,142 @@ function MonitorStream(monitorData) {
}; };
this.onclick = function(evt) { this.onclick = function(evt) {
var el = evt.currentTarget; console.log('onclick');
var id = el.getAttribute("data-monitor-id");
var url = '?view=watch&mid='+id;
evt.preventDefault();
window.location.assign(url);
}; };
this.setup_onclick = function() { this.setup_onclick = function(func) {
var el = document.getElementById('imageFeed'+this.id); this.onclick = func;
if ( el ) el.addEventListener('click', this.onclick, false); const el = this.getElement();
if (!el) return;
el.addEventListener('click', this.onclick, false);
}; };
this.disable_onclick = function() { this.disable_onclick = function() {
document.getElementById('imageFeed'+this.id).removeEventListener('click', this.onclick ); const el = this.getElement();
if (!el) return;
el.removeEventListener('click', this.onclick);
};
this.onpause = function() {
console.log('onpause');
};
this.setup_onpause = function(func) {
this.onpause = func;
};
this.onplay = null;
this.setup_onplay = function(func) {
this.onplay = func;
}; };
this.setStateClass = function(jobj, stateClass) { this.setStateClass = function(jobj, stateClass) {
if ( !jobj ) { if (!jobj) {
console.log("No obj in setStateClass");
return; return;
} }
if ( !jobj.hasClass( stateClass ) ) { if (!jobj.hasClass(stateClass)) {
if ( stateClass != 'alarm' ) jobj.removeClass('alarm'); if (stateClass != 'alarm') jobj.removeClass('alarm');
if ( stateClass != 'alert' ) jobj.removeClass('alert'); if (stateClass != 'alert') jobj.removeClass('alert');
if ( stateClass != 'idle' ) jobj.removeClass('idle'); if (stateClass != 'idle') jobj.removeClass('idle');
jobj.addClass(stateClass); jobj.addClass(stateClass);
} }
}; };
this.setAlarmState = function(alarmState) {
var stateClass = '';
if (alarmState == STATE_ALARM) {
stateClass = 'alarm';
} else if (alarmState == STATE_ALERT) {
stateClass = 'alert';
}
const stateValue = $j('#stateValue'+this.id);
if (stateValue.length) {
stateValue.text(stateStrings[alarmState]);
if (stateClass) {
stateValue.addClass(stateClass);
} else {
stateValue.removeClass();
}
} else {
console.log("No statevalue");
}
//const monitorState = $j('#monitorState'+this.id);
//if (monitorState.length) this.setStateClass(monitorState, stateClass);
const isAlarmed = ( alarmState == STATE_ALARM || alarmState == STATE_ALERT );
const wasAlarmed = ( this.lastAlarmState == STATE_ALARM || this.lastAlarmState == STATE_ALERT );
const newAlarm = ( isAlarmed && !wasAlarmed );
const oldAlarm = ( !isAlarmed && wasAlarmed );
if (newAlarm) {
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 (this.onalarm) {
this.onalarm();
}
}
if (oldAlarm) { // done with an event do a refresh
if (SOUND_ON_ALARM) {
// Disable alarm sound
if (!msieVer) {
$j('#alarmSound').addClass('hidden');
} else {
$j('#MediaPlayer').trigger('pause');
}
}
if (this.onalarm) {
this.onalarm();
}
}
this.lastAlarmState = alarmState;
}; // end function setAlarmState( currentAlarmState )
this.onalarm = null;
this.setup_onalarm = function(func) {
this.onalarm = func;
};
this.onFailure = function(jqxhr, textStatus, error) { this.onFailure = function(jqxhr, textStatus, error) {
// Assuming temporary problem, retry in a bit.
setTimeout(this.streamCmdQuery.bind(this), 1000*statusRefreshTimeout); setTimeout(this.streamCmdQuery.bind(this), 1000*statusRefreshTimeout);
logAjaxFail(jqxhr, textStatus, error); logAjaxFail(jqxhr, textStatus, error);
}; };
this.getStreamCmdResponse = function(respObj, respText) { this.getStreamCmdResponse = function(respObj, respText) {
var stream = $j('#liveStream'+this.id)[0]; var stream = this.getElement();
if (!stream) { if (!stream) {
console.log('No live stream');
return; return;
} }
//watchdogOk('stream'); //watchdogOk('stream');
if (streamCmdTimer) { if (this.streamCmdTimer) {
streamCmdTimer = clearTimeout(streamCmdTimer); this.streamCmdTimer = clearTimeout(this.streamCmdTimer);
} }
if ( respObj.result == 'Ok' ) { if (respObj.result == 'Ok') {
if ( respObj.status ) { if (respObj.status) {
this.status = respObj.status; const streamStatus = this.status = respObj.status;
this.alarmState = this.status.state;
var stateClass = '';
if ( this.alarmState == STATE_ALARM ) {
stateClass = 'alarm';
} else if ( this.alarmState == STATE_ALERT ) {
stateClass = 'alert';
} else {
stateClass = 'idle';
}
if ( ( if ( (
(typeof COMPACT_MONTAGE === 'undefined') || (typeof COMPACT_MONTAGE === 'undefined') ||
!COMPACT_MONTAGE) && !COMPACT_MONTAGE) &&
(this.type != 'WebSite') (this.type != 'WebSite')
) { ) {
const viewingFPSValue = $j('#vewingFPSValue'+this.id); const viewingFPSValue = $j('#viewingFPSValue'+this.id);
const captureFPSValue = $j('#captureFPSValue'+this.id); const captureFPSValue = $j('#captureFPSValue'+this.id);
const analysisFPSValue = $j('#analysisFPSValue'+this.id); const analysisFPSValue = $j('#analysisFPSValue'+this.id);
const stateValue = $j('#stateValue'+this.id);
const monitorState = $j('#monitorState'+this.id);
if (viewingFPSValue.length && (viewingFPSValue.text != this.status.fps)) { if (viewingFPSValue.length && (viewingFPSValue.text != this.status.fps)) {
viewingFPSValue.text(this.status.fps); viewingFPSValue.text(this.status.fps);
@ -236,40 +301,104 @@ function MonitorStream(monitorData) {
captureFPSValue.text(this.status.capturefps); captureFPSValue.text(this.status.capturefps);
} }
if (stateValue.length) stateValue.text(stateStrings[this.alarmState]); const levelValue = $j('#levelValue');
if (monitorState.length) this.setStateClass(monitorState, stateClass); if (levelValue.length) {
levelValue.text(this.status.level);
var newClass = 'ok';
if (this.status.level > 95) {
newClass = 'alarm';
} else if (this.status.level > 80) {
newClass = 'alert';
}
levelValue.removeClass();
levelValue.addClass(newClass);
} }
this.setStateClass($j('#monitor'+this.id), stateClass); const delayString = secsToTime(this.status.delay);
/*Stream could be an applet so can't use moo tools*/ if (this.status.paused == true) {
//stream.parentNode().className = stateClass; $j('#modeValue'+this.id).text('Paused');
$j('#rate'+this.id).addClass('hidden');
$j('#delayValue'+this.id).text(delayString);
$j('#delay'+this.id).removeClass('hidden');
$j('#level'+this.id).removeClass('hidden');
this.onpause();
} else if (this.status.delayed == true) {
$j('#modeValue'+this.id).text('Replay');
$j('#rateValue'+this.id).text(this.status.rate);
$j('#rate'+this.id).removeClass('hidden');
$j('#delayValue'+this.id).text(delayString);
$j('#delay'+this.id).removeClass('hidden');
$j('#level'+this.id).removeClass('hidden');
if (this.status.rate == 1) {
if (this.onplay) this.onplay();
} else if (this.status.rate > 0) {
if (this.status.rate < 1) {
streamCmdSlowFwd(false);
} else {
streamCmdFastFwd(false);
}
} else {
if (this.status.rate > -1) {
streamCmdSlowRev(false);
} else {
streamCmdFastRev(false);
}
} // rate
} else {
$j('#modeValue'+this.id).text('Live');
$j('#rate'+this.id).addClass('hidden');
$j('#delay'+this.id).addClass('hidden');
$j('#level'+this.id).addClass('hidden');
if (this.onplay) this.onplay();
} // end if paused or delayed
var isAlarmed = ( this.alarmState == STATE_ALARM || this.alarmState == STATE_ALERT ); $j('#zoomValue'+this.id).text(this.status.zoom);
var wasAlarmed = ( this.lastAlarmState == STATE_ALARM || this.lastAlarmState == STATE_ALERT ); if ('zoomOutBtn' in this.buttons) {
if (this.status.zoom == '1.0') {
setButtonState('zoomOutBtn', 'unavail');
} else {
setButtonState('zoomOutBtn', 'inactive');
}
}
} // end if compact montage
var newAlarm = ( isAlarmed && !wasAlarmed ); this.setAlarmState(this.status.state);
var oldAlarm = ( !isAlarmed && wasAlarmed );
if (newAlarm) { if (canEdit.Monitors) {
if (false && SOUND_ON_ALARM) { if (streamStatus.enabled) {
// Enable the alarm sound if ('enableAlarmButton' in this.buttons) {
$j('#alarmSound').removeClass('hidden'); this.buttons.enableAlarmButton.addClass('disabled');
this.buttons.enableAlarmButton.prop('title', disableAlarmsStr);
} }
if ((typeof POPUP_ON_ALARM !== 'undefined') && POPUP_ON_ALARM) { if ('forceAlarmButton' in this.buttons) {
windowToFront(); if (streamStatus.forced) {
this.buttons.forceAlarmButton.addClass('disabled');
this.buttons.forceAlarmButton.prop('title', cancelForcedAlarmStr);
} else {
this.buttons.forceAlarmButton.removeClass('disabled');
this.buttons.forceAlarmButton.prop('title', forceAlarmStr);
}
this.buttons.forceAlarmButton.prop('disabled', false);
}
} else {
if ('enableAlarmButton' in this.buttons) {
this.buttons.enableAlarmButton.removeClass('disabled');
this.buttons.enableAlarmButton.prop('title', enableAlarmsStr);
}
if ('forceAlarmButton' in this.buttons) {
this.buttons.forceAlarmButton.prop('disabled', true);
} }
} }
if (false && SOUND_ON_ALARM) { if ('enableAlarmButton' in this.buttons) {
if ( oldAlarm ) { this.buttons.enableAlarmButton.prop('disabled', false);
// Disable alarm sound
$j('#alarmSound').addClass('hidden');
}
} }
} // end if canEdit.Monitors
if (this.status.auth) { if (this.status.auth) {
if (this.status.auth != this.auth_hash) { if (this.status.auth != this.auth_hash) {
// Try to reload the image stream. // Try to reload the image stream.
if (stream) { if (stream && stream.src) {
const oldsrc = stream.src; const oldsrc = stream.src;
stream.src = ''; stream.src = '';
stream.src = oldsrc.replace(/auth=\w+/i, 'auth='+this.status.auth); stream.src = oldsrc.replace(/auth=\w+/i, 'auth='+this.status.auth);
@ -283,23 +412,25 @@ function MonitorStream(monitorData) {
console.error(respObj.message); console.error(respObj.message);
// Try to reload the image stream. // Try to reload the image stream.
if (stream) { if (stream) {
if ( stream.src ) { if (stream.src) {
console.log('Reloading stream: ' + stream.src); console.log('Reloading stream: ' + stream.src);
src = stream.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) )); src = stream.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
if ( src != stream.src ) { // Maybe navbar updated auth FIXME
if (src != stream.src) {
stream.src = src; stream.src = src;
} else { } else {
console.log("Failed to update rand on stream src"); console.log("Failed to update rand on stream src");
} }
} else {
} }
} else { } else {
console.log('No stream to reload?'); console.log('No stream to reload?');
} }
} // end if Ok or not } // end if Ok or not
};
this.lastAlarmState = this.alarmState; this.statusQuery = function() {
setTimeout(this.streamCmdQuery.bind(this), statusRefreshTimeout); this.streamCmdQuery(CMD_QUERY);
setTimeout(this.statusQuery.bind(this), statusRefreshTimeout);
}; };
this.streamCmdQuery = function(resent) { this.streamCmdQuery = function(resent) {
@ -310,15 +441,44 @@ function MonitorStream(monitorData) {
} }
}; };
if ( this.type != 'WebSite' ) { this.streamCommand = function(command) {
this.streamCmdReq = function(streamCmdParms) { if (typeof(command) == 'object') {
if ( auth_hash ) { for (const key in command) this.streamCmdParms[key] = command[key];
} else {
this.streamCmdParms.command = command;
}
this.streamCmdReq(this.streamCmdParms);
};
this.alarmCommand = function(command) {
if (this.ajaxQueue) {
this.ajaxQueue.abort();
}
const alarmCmdParms = Object.assign({}, this.streamCmdParms);
alarmCmdParms.request = 'alarm';
alarmCmdParms.command = command;
alarmCmdParms.id = this.id;
this.ajaxQueue = jQuery.ajaxQueue({
url: this.url,
data: alarmCmdParms, dataType: "json"})
.done(this.getStreamCmdResponse.bind(this))
.fail(this.onFailure.bind(this));
};
if (this.type != 'WebSite') {
$j.ajaxSetup({timeout: AJAX_TIMEOUT});
if (auth_hash) {
this.streamCmdParms.auth = auth_hash; this.streamCmdParms.auth = auth_hash;
} else if ( auth_relay ) { } else if ( auth_relay ) {
this.streamCmdParms.auth_relay = ''; this.streamCmdParms.auth_relay = '';
} }
$j.ajaxSetup({timeout: AJAX_TIMEOUT});
$j.getJSON(this.url, streamCmdParms) this.streamCmdReq = function(streamCmdParms) {
if (this.ajaxQueue) {
this.ajaxQueue.abort();
}
this.ajaxQueue = jQuery.ajaxQueue({url: this.url, data: streamCmdParms, dataType: "json"})
.done(this.getStreamCmdResponse.bind(this)) .done(this.getStreamCmdResponse.bind(this))
.fail(this.onFailure.bind(this)); .fail(this.onFailure.bind(this));
}; };
@ -326,7 +486,7 @@ function MonitorStream(monitorData) {
this.analyse_frames = true; this.analyse_frames = true;
this.show_analyse_frames = function(toggle) { this.show_analyse_frames = function(toggle) {
this.analyse_frames = toggle; this.analyse_frames = toggle;
this.streamCmdParms.command = this.analyse_frames?CMD_ANALYZE_ON:CMD_ANALYZE_OFF; this.streamCmdParms.command = this.analyse_frames ? CMD_ANALYZE_ON : CMD_ANALYZE_OFF;
this.streamCmdReq(this.streamCmdParms); this.streamCmdReq(this.streamCmdParms);
}; };
} // end function MonitorStream } // end function MonitorStream