From c08163703608aa83d7aec82a7b198cc241435d2f Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Thu, 16 Dec 2021 16:38:15 -0500 Subject: [PATCH] Fixes to specifying width and height of image due to us jquery. Implement changeRate/MaxFPS. Cleanup use of auth_hash in JSON. --- web/skins/classic/views/js/watch.js | 124 ++++++++++++++---------- web/skins/classic/views/js/watch.js.php | 1 + web/skins/classic/views/watch.php | 55 ++++++----- 3 files changed, 103 insertions(+), 77 deletions(-) diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js index f290e1998..89f774ed1 100644 --- a/web/skins/classic/views/js/watch.js +++ b/web/skins/classic/views/js/watch.js @@ -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); diff --git a/web/skins/classic/views/js/watch.js.php b/web/skins/classic/views/js/watch.js.php index 36a0417de..04a6c0757 100644 --- a/web/skins/classic/views/js/watch.js.php +++ b/web/skins/classic/views/js/watch.js.php @@ -32,6 +32,7 @@ var CMD_PREV = ; var CMD_NEXT = ; var CMD_SEEK = ; var CMD_QUERY = ; +var CMD_MAXFPS = ; var SOUND_ON_ALARM = ; var POPUP_ON_ALARM = ; diff --git a/web/skins/classic/views/watch.php b/web/skins/classic/views/watch.php index 58d24ac85..6acce1b5c 100644 --- a/web/skins/classic/views/watch.php +++ b/web/skins/classic/views/watch.php @@ -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'));
+ 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']); +?>
@@ -241,9 +249,8 @@ if ($streamMode == 'jpeg') { echo 'title="Click to zoom, shift click to pan, ctrl click to zoom out"'; } ?> ->$scale)); ?> +>
- Type() != 'WebSite') { ?>
@@ -262,8 +269,7 @@ if ($streamMode == 'jpeg') { : % : x
-
-
+
StreamReplayBuffer() != 0) { @@ -308,7 +314,6 @@ if ($streamMode == 'jpeg') { } // end if streamMode==jpeg ?>
-
Type() != 'WebSite' ?>