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

Fixes to specifying width and height of image due to us jquery. Implement changeRate/MaxFPS. Cleanup use of auth_hash in JSON.

This commit is contained in:
Isaac Connor 2021-12-16 16:38:15 -05:00
parent 4dd454325c
commit c081637036
3 changed files with 103 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
web/skins/classic/views/js/watch.js
View File

@ -130,6 +130,7 @@ function changeSize() {
function changeScale() {
var scale = $j('#scale').val();
setCookie('zmWatchScale'+monitorId, scale, 3600);
$j('#width').val('auto');
$j('#height').val('auto');
setCookie('zmCycleScale', scale, 3600);
@ -140,11 +141,16 @@ function changeScale() {
var newHeight;
var autoScale;
var streamImg = $j('#liveStream'+monitorId);
if (!streamImg.length) {
console.error('No element found for liveStream'+monitorId);
}
// Always turn it off, we will re-add it below. I don't know if you can add a callback multiple
// times and what the consequences would be
$j(window).off('resize', endOfResize); //remove resize handler when Scale to Fit is not active
if (scale == '0' || scale == 'auto') {
const newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId), $j('#replayStatus'));
const newSize = scaleToFit(monitorWidth, monitorHeight, streamImg, $j('#dvrControls'));
newWidth = newSize.width;
newHeight = newSize.height;
autoScale = newSize.autoScale;
@ -154,24 +160,21 @@ function changeScale() {
newHeight = monitorHeight * scale / SCALE_BASE;
}
setCookie('zmWatchScale'+monitorId, scale, 3600);
if (streamImg.prop('nodeName') == 'IMG') {
const oldSrc = streamImg.attr('src');
streamImg.attr('src', '');
// This is so that we don't waste bandwidth and let the browser do all the scaling.
if (autoScale > 100) autoScale = 100;
if (scale > 100) scale = 100;
const newSrc = oldSrc.replace(/scale=\d+/i, 'scale='+((scale == 'auto' || scale == '0') ? autoScale : scale));
var streamImg = $j('#liveStream'+monitorId);
if (streamImg) {
if (streamImg.nodeName == 'IMG') {
const oldSrc = streamImg.attr('src');
streamImg.attr('src', '');
// This is so that we don't waste bandwidth and let the browser do all the scaling.
if (autoScale > 100) autoScale = 100;
if (scale > 100) scale = 100;
const newSrc = oldSrc.replace(/scale=\d+/i, 'scale='+((scale == 'auto' || scale == '0') ? autoScale : scale));
streamImg.width(newWidth);
streamImg.height(newHeight);
streamImg.attr('src', newSrc);
}
streamImg.css('width', newWidth+'px');
streamImg.width(newWidth);
streamImg.css('height', newHeight+'px');
streamImg.height(newHeight);
streamImg.attr('src', newSrc);
} else {
console.error('No element found for liveStream'+monitorId);
console.log("Not an IMG, can't set size");
}
} // end function changeScale
@ -226,6 +229,15 @@ function setAlarmState(currentAlarmState) {
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.
@ -347,7 +359,9 @@ function getStreamCmdResponse(respObj, respText) {
} // end if have a new auth hash
} // end if respObj.status
} else {
console.log("Not ok");
checkStreamForErrors('getStreamCmdResponse', respObj);//log them
fetchImage($j('#imageFeed img'));
}
var streamCmdTimeout = statusRefreshTimeout;
@ -357,6 +371,10 @@ function getStreamCmdResponse(respObj, respText) {
streamCmdTimer = setTimeout(streamCmdQuery, streamCmdTimeout);
}
function streamCmdQuery() {
streamCmdReq({command: CMD_QUERY});
}
function streamCmdPause(action) {
setButtonState('pauseBtn', 'active');
setButtonState('playBtn', 'inactive');
@ -396,21 +414,10 @@ function streamCmdPlay(action) {
}
}
if (action) {
var data = {};
if (auth_hash) data.auth = auth_hash;
data.command = CMD_PLAY;
streamCmdReq(data);
streamCmdReq({command: CMD_PLAY});
}
}
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 streamCmdStop(action) {
setButtonState('pauseBtn', 'inactive');
@ -440,9 +447,7 @@ function streamCmdFastFwd(action) {
setButtonState('fastRevBtn', 'inactive');
}
if (action) {
var data = {};
data.command = CMD_FASTFWD;
streamCmdReq(data);
streamCmdReq({command: CMD_FASTFWD});
}
}
@ -457,9 +462,7 @@ function streamCmdSlowFwd(action) {
setButtonState('fastRevBtn', 'inactive');
}
if (action) {
var data = {};
data.command = CMD_SLOWFWD;
streamCmdReq(data);
streamCmdReq({command: CMD_SLOWFWD});
}
setButtonState('pauseBtn', 'active');
if (monitorStreamReplayBuffer) {
@ -478,9 +481,7 @@ function streamCmdSlowRev(action) {
setButtonState('fastRevBtn', 'inactive');
}
if (action) {
var data = {};
data.command = CMD_SLOWREV;
streamCmdReq(data);
streamCmdReq({command: CMD_SLOWREV});
}
setButtonState('pauseBtn', 'active');
if (monitorStreamReplayBuffer) {
@ -499,9 +500,7 @@ function streamCmdFastRev(action) {
setButtonState('fastRevBtn', 'inactive');
}
if (action) {
var data = {};
data.command = CMD_FASTREV;
streamCmdReq(data);
streamCmdReq({command: CMD_FASTREV});
}
}
@ -514,9 +513,7 @@ function streamCmdZoomIn(x, y) {
}
function streamCmdZoomOut() {
var data = {};
data.command = CMD_ZOOMOUT;
streamCmdReq(data);
streamCmdReq({command: CMD_ZOOMOUT});
}
function streamCmdScale(scale) {
@ -534,11 +531,6 @@ function streamCmdPan(x, y) {
streamCmdReq(data);
}
function streamCmdQuery() {
var data = {};
data.command = CMD_QUERY;
streamCmdReq(data);
}
/* getStatusCmd is used when not streaming, since there is no persistent zms */
function getStatusCmdResponse(respObj, respText) {
@ -713,7 +705,9 @@ function controlCmdImage(x, y) {
}
function fetchImage(streamImage) {
streamImage.attr('src', streamImage.attr('src').replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) )));
const oldsrc = streamImage.attr('src');
streamImage.attr('src', '');
streamImage.attr('src', oldsrc.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) )));
}
function handleClick(event) {
@ -904,10 +898,10 @@ function initPage() {
if (monitorType != 'WebSite') {
if (streamMode == 'single') {
statusCmdTimer = setTimeout(statusCmdQuery, 100);
statusCmdTimer = setTimeout(statusCmdQuery, 200);
setInterval(watchdogCheck, statusRefreshTimeout*2, 'status');
} else {
streamCmdTimer = setTimeout(streamCmdQuery, 100);
streamCmdTimer = setTimeout(streamCmdQuery, 200);
setInterval(watchdogCheck, statusRefreshTimeout*2, 'stream');
}
@ -927,6 +921,7 @@ function initPage() {
streamImg.on("error", function(thing) {
console.log("Error loading image");
console.log(thing);
setInterval(fetchImage, 100, $j('#imageFeed img'));
});
}
} // end if have streamImg
@ -942,6 +937,9 @@ function initPage() {
el.onchange = window['changeScale'];
});
changeScale();
document.querySelectorAll('select[name="changeRate"]').forEach(function(el) {
el.onchange = window['changeRate'].bind(el, el);
});
} else if (monitorRefresh > 0) {
setInterval(reloadWebSite, monitorRefresh*1000);
}
@ -1084,5 +1082,27 @@ function cycleToggle(e) {
button.toggleClass('btn-primary');
}
function changeRate(e) {
const newvalue = $j(e).val();
if (1) {
var data = {};
data.command = CMD_MAXFPS;
data.maxfps = newvalue;
streamCmdReq(data);
} else {
streamImage = $j('#liveStream'+monitorData[monIdx].id);
const oldsrc = streamImage.attr('src');
streamImage.attr('src', ''); // stop streaming
console.log(newvalue);
if (newvalue == '0') {
// Unlimited
streamImage.attr('src', oldsrc.replace(/maxfps=\d+/i, 'maxfps=0.00100'));
} else {
streamImage.attr('src', oldsrc.replace(/maxfps=\d+/i, 'maxfps='+newvalue));
}
}
setCookie('zmWatchRate', newvalue, 3600);
}
// Kick everything off
$j(document).ready(initPage);

1
web/skins/classic/views/js/watch.js.php
View File

@ -32,6 +32,7 @@ var CMD_PREV = <?php echo CMD_PREV ?>;
var CMD_NEXT = <?php echo CMD_NEXT ?>;
var CMD_SEEK = <?php echo CMD_SEEK ?>;
var CMD_QUERY = <?php echo CMD_QUERY ?>;
var CMD_MAXFPS = <?php echo CMD_MAXFPS ?>;
var SOUND_ON_ALARM = <?php echo ZM_WEB_SOUND_ON_ALARM ?>;
var POPUP_ON_ALARM = <?php echo ZM_WEB_POPUP_ON_ALARM ?>;

55
web/skins/classic/views/watch.php
View File

@ -81,23 +81,27 @@ $monitor = new ZM\Monitor($mid);
$nextMid = ($monitor_index == count($monitors)-1) ? $monitors[0]->Id() : $monitors[$monitor_index+1]->Id();
$cycle = isset($_REQUEST['cycle']) and ($_REQUEST['cycle'] == 'true');
$showCycle = $cycle;
ZM\Error("Show cycle: $showCycle");
if (isset($_COOKIE['zmCycleShow'])) {
$showCycle = $_COOKIE['zmCycleShow'] == 'true';
ZM\Error("Show cycle: $showCycle");
} else {
ZM\Error("Show cycle: not set");
}
#Whether to show the controls button
$showPtzControls = ( ZM_OPT_CONTROL && $monitor->Controllable() && canView('Control') && $monitor->Type() != 'WebSite' );
$options = array();
if (empty($_REQUEST['mode'])) {
$options['mode'] = canStream() ? 'stream' : 'still';
} else {
if (!empty($_REQUEST['mode']) and ($_REQUEST['mode']=='still' or $_REQUEST['mode']=='stream')) {
$options['mode'] = validHtmlStr($_REQUEST['mode']);
} else if (isset($_COOKIE['zmWatchMode'])) {
$options['mode'] = $_COOKIE['zmWatchMode'];
} else {
$options['mode'] = canStream() ? 'stream' : 'still';
}
if (!empty($_REQUEST['maxfps']) and validFloat($_REQUEST['maxfps']) and ($_REQUEST['maxfps']>0)) {
$options['maxfps'] = validHtmlStr($_REQUEST['maxfps']);
} else if (isset($_COOKIE['zmWatchRate'])) {
$options['maxfps'] = $_COOKIE['zmWatchRate'];
} else {
$options['maxfps'] = ''; // unlimited
}
zm_session_start();
$period = ZM_WEB_REFRESH_CYCLE;
if (isset($_REQUEST['period'])) {
@ -118,22 +122,17 @@ $options['scale'] = $scale;
if (isset($_REQUEST['width'])) {
$options['width'] = validInt($_REQUEST['width']);
} else if ( isset($_COOKIE['zmCycleWidth']) and $_COOKIE['zmCycleWidth'] ) {
$_SESSION['zmCycleWidth'] = $options['width'] = $_COOKIE['zmCycleWidth'];
#} elseif ( isset($_SESSION['zmCycleWidth']) and $_SESSION['zmCycleWidth'] ) {
#$options['width'] = $_SESSION['zmCycleWidth'];
$options['width'] = $_COOKIE['zmCycleWidth'];
} else {
$options['width'] = '';
}
if (isset($_REQUEST['height'])) {
$options['height'] =validInt($_REQUEST['height']);
} else if (isset($_COOKIE['zmCycleHeight']) and $_COOKIE['zmCycleHeight']) {
$_SESSION['zmCycleHeight'] = $options['height'] = $_COOKIE['zmCycleHeight'];
#else if ( isset($_SESSION['zmCycleHeight']) and $_SESSION['zmCycleHeight'] )
#$options['height'] = $_SESSION['zmCycleHeight'];
$options['height'] = $_COOKIE['zmCycleHeight'];
} else {
$options['height'] = '';
}
session_write_close();
$connkey = generateConnKey();
$streamMode = getStreamMode();
@ -161,15 +160,24 @@ xhtmlHeaders(__FILE__, $monitor->Name().' - '.translate('Feed'));
</div>
<div id="headerButtons">
<!--
<?php if ( $options['mode'] == 'stream' ) { ?>
<a href="?view=<?php echo $view ?>&amp;mode=still&amp;mid=<?php echo $monitor ? $monitor->Id() : '' ?>"><?php echo translate('Stills') ?></a>
<?php } else { ?>
<a href="?view=<?php echo $view ?>&amp;mode=stream&amp;mid=<?php echo $monitor ? $monitor->Id() : '' ?>"><?php echo translate('Stream') ?></a>
<?php } ?>
<button type="button" id="streamToggle" class="btn <?php echo $options['mode'] == 'stream' ? 'btn-primary':'btn-secondary'?>" title="<?php echo translate('Toggle Streaming/Stills')?>">
<span class="material-icons md-18">switch_video</span>
</button>
-->
<button type="button" id="cycleToggle" class="btn <?php echo $showCycle ? 'btn-primary':'btn-secondary'?>" title="<?php echo translate('Toggle cycle sidebar')?>">
<span class="material-icons md-18">view_carousel</span>
</button>
<?php
$maxfps_options = array(''=>translate('Unlimited'),
'0' => translate('Stills'),
'1' => '1 '.translate('FPS'),
'2' => '2 '.translate('FPS'),
'5' => '5 '.translate('FPS'),
'10' => '10 '.translate('FPS'),
'20' => '20 '.translate('FPS'),
);
echo htmlSelect('changeRate', $maxfps_options, $options['maxfps']);
?>
</div>
<div id="sizeControl">
<span id="widthControl">
@ -241,9 +249,8 @@ if ($streamMode == 'jpeg') {
echo 'title="Click to zoom, shift click to pan, ctrl click to zoom out"';
}
?>
><?php echo getStreamHTML($monitor, array('scale'=>$scale)); ?>
><?php echo getStreamHTML($monitor, $options); ?>
</div>
<?php if ($monitor->Type() != 'WebSite') { ?>
<div id="monitorStatus">
<div id="monitorState">
@ -262,8 +269,7 @@ if ($streamMode == 'jpeg') {
<span id="level"><?php echo translate('Buffer') ?>: <span id="levelValue"></span>%</span>
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue"></span>x</span>
</div>
<div class="buttons">
<div id="dvrControls">
<div class="buttons" id="dvrControls">
<?php
if ($streamMode == 'jpeg') {
if ($monitor->StreamReplayBuffer() != 0) {
@ -308,7 +314,6 @@ if ($streamMode == 'jpeg') {
} // end if streamMode==jpeg
?>
</div><!--dvrButtons-->
</div>
<?php } // end if $monitor->Type() != 'WebSite' ?>
<?php
if ( $showPtzControls ) {