Merge branch 'rate_dropdown'

This commit is contained in:
Isaac Connor 2020-03-10 18:47:19 -04:00
commit 9a3127da06
4 changed files with 82 additions and 35 deletions

View File

@ -100,6 +100,7 @@ bool EventStream::loadInitialEventData(uint64_t init_event_id, unsigned int init
if ( init_frame_id >= event_data->frame_count ) { if ( init_frame_id >= event_data->frame_count ) {
Error("Invalid frame id specified. %d > %d", init_frame_id, event_data->frame_count); Error("Invalid frame id specified. %d > %d", init_frame_id, event_data->frame_count);
curr_stream_time = event_data->start_time; curr_stream_time = event_data->start_time;
curr_frame_id = 1;
} else { } else {
curr_stream_time = event_data->frames[init_frame_id-1].timestamp; curr_stream_time = event_data->frames[init_frame_id-1].timestamp;
curr_frame_id = init_frame_id; curr_frame_id = init_frame_id;
@ -383,6 +384,8 @@ void EventStream::processCommand(const CmdMsg *msg) {
paused = true; paused = true;
replay_rate = ZM_RATE_BASE; replay_rate = ZM_RATE_BASE;
step = -1; step = -1;
curr_frame_id -= 1;
if ( curr_frame_id < 1 ) curr_frame_id = 1;
break; break;
case CMD_FASTREV : case CMD_FASTREV :
Debug(1, "Got FAST REV command"); Debug(1, "Got FAST REV command");
@ -932,7 +935,7 @@ void EventStream::runStream() {
send_frame = true; send_frame = true;
} }
} else if ( step != 0 ) { } else if ( step != 0 ) {
Debug(2, "Paused with step"); Debug(2, "Paused with step %d", step);
// We are paused and are just stepping forward or backward one frame // We are paused and are just stepping forward or backward one frame
step = 0; step = 0;
send_frame = true; send_frame = true;

View File

@ -145,8 +145,12 @@ AVFrame *FFmpeg_Input::get_frame(int stream_id) {
av_frame_free(&frame); av_frame_free(&frame);
continue; continue;
} else { } else {
if ( is_video_stream(input_format_context->streams[packet.stream_index]) ) {
zm_dump_video_frame(frame, "resulting video frame");
} else {
zm_dump_frame(frame, "resulting frame"); zm_dump_frame(frame, "resulting frame");
} }
}
frameComplete = 1; frameComplete = 1;
} // end if it's the right stream } // end if it's the right stream

View File

@ -104,7 +104,10 @@ if ( $Monitor->VideoWriter() == '2' ) {
$Zoom = $Event->Height()/$Event->Width(); $Zoom = $Event->Height()/$Event->Width();
} }
// These are here to figure out the next/prev event // These are here to figure out the next/prev event, however id there is no filter, then default to one that specifies the Monitor
if ( !isset($_REQUEST['filter']) ) {
$_REQUEST['filter'] = array( 'Query'=>array('terms'=> array( array('attr' => 'MonitorId', 'op' => '=', 'val' => $Event->MonitorId() ) ) ) );
}
parseSort(); parseSort();
parseFilter($_REQUEST['filter']); parseFilter($_REQUEST['filter']);
$filterQuery = $_REQUEST['filter']['query']; $filterQuery = $_REQUEST['filter']['query'];
@ -257,7 +260,12 @@ if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
</p> </p>
<div id="replayStatus"> <div id="replayStatus">
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span> <span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
<span id="rate"><?php echo translate('Rate') ?>: <span id="rateValue"><?php echo $rate/100 ?></span>x</span> <span id="rate"><?php echo translate('Rate') ?>:
<?php
$rates = array( -800=>'-8x', -400=>'-4x', -200=>'-2x', -100=>'-1x', 0=>translate('Stop'), 100 => '1x', 200=>'2x', 400=>'4x', 800=>'8x' );
echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
?>
<!--<span id="rateValue"><?php echo $rate/100 ?></span>x</span>-->
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span> <span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span> <span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
</div> </div>

View File

@ -1,4 +1,7 @@
var vid = null; var vid = null;
var spf = Math.round((eventData.Length / eventData.Frames)*1000000 )/1000000;//Seconds per frame for videojs frame by frame.
var intervalRewind;
var revSpeed = .5;
// Function called when video.js hits the end of the video // Function called when video.js hits the end of the video
function vjsReplay() { function vjsReplay() {
@ -39,7 +42,7 @@ function vjsReplay() {
streamNext(true); streamNext(true);
break; break;
} }
} } // end function vjsReplay
$j.ajaxSetup({timeout: AJAX_TIMEOUT}); //sets timeout for all getJSON. $j.ajaxSetup({timeout: AJAX_TIMEOUT}); //sets timeout for all getJSON.
@ -67,14 +70,14 @@ function renderAlarmCues(containerEl) {
var spanTimeStart = 0; var spanTimeStart = 0;
var spanTimeEnd = 0; var spanTimeEnd = 0;
var alarmed = 0; var alarmed = 0;
var alarmHtml = ""; var alarmHtml = '';
var pixSkew = 0; var pixSkew = 0;
var skip = 0; var skip = 0;
var num_cueFrames = cueFrames.length; var num_cueFrames = cueFrames.length;
for ( var i = 0; i < num_cueFrames; i++ ) { for ( var i = 0; i < num_cueFrames; i++ ) {
skip = 0; skip = 0;
frame = cueFrames[i]; frame = cueFrames[i];
if (frame.Type == "Alarm" && alarmed == 0) { //From nothing to alarm. End nothing and start alarm. if ( (frame.Type == 'Alarm') && (alarmed == 0) ) { //From nothing to alarm. End nothing and start alarm.
alarmed = 1; alarmed = 1;
if (frame.Delta == 0) continue; //If event starts with an alarm or too few for a nonespan if (frame.Delta == 0) continue; //If event starts with an alarm or too few for a nonespan
spanTimeEnd = frame.Delta * 100; spanTimeEnd = frame.Delta * 100;
@ -88,24 +91,24 @@ function renderAlarmCues(containerEl) {
} }
alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>'; alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd; spanTimeStart = spanTimeEnd;
} else if (frame.Type !== "Alarm" && alarmed == 1) { //from alarm to nothing. End alarm and start nothing. } else if ( (frame.Type !== 'Alarm') && (alarmed == 1) ) { //from alarm to nothing. End alarm and start nothing.
futNone = 0; futNone = 0;
indexPlus = i+1; indexPlus = i+1;
if (((frame.Delta * 100) - spanTimeStart) < minAlarm && indexPlus < num_cueFrames) { if (((frame.Delta * 100) - spanTimeStart) < minAlarm && indexPlus < num_cueFrames) {
//alarm is too short and there is more event //alarm is too short and there is more event
continue; continue;
} }
while (futNone < minAlarm) { //check ahead to see if there's enough for a nonespan while ( futNone < minAlarm ) { //check ahead to see if there's enough for a nonespan
if (indexPlus >= cueFrames.length) break; //check if end of event. if ( indexPlus >= cueFrames.length ) break; //check if end of event.
futNone = (cueFrames[indexPlus].Delta *100) - (frame.Delta *100); futNone = (cueFrames[indexPlus].Delta *100) - (frame.Delta *100);
if (cueFrames[indexPlus].Type == "Alarm") { if ( cueFrames[indexPlus].Type == 'Alarm' ) {
i = --indexPlus; i = --indexPlus;
skip = 1; skip = 1;
break; break;
} }
indexPlus++; indexPlus++;
} }
if (skip == 1) continue; //javascript doesn't support continue 2; if ( skip == 1 ) continue; //javascript doesn't support continue 2;
spanTimeEnd = frame.Delta *100; spanTimeEnd = frame.Delta *100;
spanTime = spanTimeEnd - spanTimeStart; spanTime = spanTimeEnd - spanTimeStart;
alarmed = 0; alarmed = 0;
@ -118,7 +121,7 @@ function renderAlarmCues(containerEl) {
} }
alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>'; alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd; spanTimeStart = spanTimeEnd;
} else if (frame.Type == "Alarm" && alarmed == 1 && i + 1 >= cueFrames.length) { //event ends on an alarm } else if ( (frame.Type == 'Alarm') && (alarmed == 1) && (i + 1 >= cueFrames.length) ) { //event ends on an alarm
spanTimeEnd = frame.Delta * 100; spanTimeEnd = frame.Delta * 100;
spanTime = spanTimeEnd - spanTimeStart; spanTime = spanTimeEnd - spanTimeStart;
alarmed = 0; alarmed = 0;
@ -148,7 +151,7 @@ function changeScale() {
} else { } else {
eventViewer = $j(vid ? '#videoobj' : '#evtStream'); eventViewer = $j(vid ? '#videoobj' : '#evtStream');
} }
if ( scale == '0' ) { if ( scale == '0' || scale == 'auto' ) {
var newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, bottomEl); var newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, bottomEl);
newWidth = newSize.width; newWidth = newSize.width;
newHeight = newSize.height; newHeight = newSize.height;
@ -188,6 +191,33 @@ function changeReplayMode() {
refreshWindow(); refreshWindow();
} }
function changeRate() {
var rate = parseInt($j('select[name="rate"]').val());
if ( ! rate ) {
pauseClicked();
} else if ( rate < 0 ) {
if ( vid ) { //There is no reverse play with mp4. Set the speed to 0 and manually set the time back.
revSpeed = rates[rates.indexOf(-1*rate)-1]/100;
clearInterval(intervalRewind);
intervalRewind = setInterval(function() {
if ( vid.currentTime() <= 0 ) {
clearInterval(intervalRewind);
vid.pause();
} else {
vid.playbackRate(0);
vid.currentTime(vid.currentTime() - (revSpeed/2)); //Half of reverse speed because our interval is 500ms.
}
}, 500); //500ms is a compromise between smooth reverse and realistic performance
} // end if vid
} else { // Forward rate
if ( vid ) {
vid.playbackRate(rate/100);
}
}
Cookie.write('zmEventRate', rate, {duration: 10*365});
} // end function changeRate
var streamParms = "view=request&request=stream&connkey="+connKey; var streamParms = "view=request&request=stream&connkey="+connKey;
if ( auth_hash ) { if ( auth_hash ) {
streamParms += '&auth='+auth_hash; streamParms += '&auth='+auth_hash;
@ -233,7 +263,8 @@ function getCmdResponse( respObj, respText ) {
if ( streamStatus.paused == true ) { if ( streamStatus.paused == true ) {
streamPause( ); streamPause( );
} else { } else {
$j('#rateValue').html(streamStatus.rate); console.log('streamStatus.rate: ' + streamStatus.rate);
$j('select[name="rate"]').val(streamStatus.rate*100);
Cookie.write('zmEventRate', streamStatus.rate*100, {duration: 10*365}); Cookie.write('zmEventRate', streamStatus.rate*100, {duration: 10*365});
streamPlay( ); streamPlay( );
} }
@ -268,23 +299,19 @@ var streamReq = new Request.JSON( {
function pauseClicked() { function pauseClicked() {
if ( vid ) { if ( vid ) {
if ( intervalRewind ) {
stopFastRev();
}
vid.pause(); vid.pause();
} else { } else {
streamReq.send(streamParms+"&command="+CMD_PAUSE); streamReq.send(streamParms+"&command="+CMD_PAUSE);
streamPause();
}
}
function vjsPause() {
if ( intervalRewind ) {
stopFastRev();
} }
streamPause(); streamPause();
} }
function streamPause( ) { function streamPause( ) {
$j('#modeValue').html('Paused'); $j('#modeValue').html('Paused');
$j('#rateValue').html('0');
setButtonState( $('pauseBtn'), 'active' ); setButtonState( $('pauseBtn'), 'active' );
setButtonState( $('playBtn'), 'inactive' ); setButtonState( $('playBtn'), 'inactive' );
setButtonState( $('fastFwdBtn'), 'unavail' ); setButtonState( $('fastFwdBtn'), 'unavail' );
@ -294,6 +321,10 @@ function streamPause( ) {
} }
function playClicked( ) { function playClicked( ) {
var rate_select = $j('select[name="rate"]');
if ( ! rate_select.val() ) {
$j('select[name="rate"]').val(100);
}
if ( vid ) { if ( vid ) {
if ( vid.paused() ) { if ( vid.paused() ) {
vid.play(); vid.play();
@ -302,21 +333,20 @@ function playClicked( ) {
} }
} else { } else {
streamReq.send(streamParms+"&command="+CMD_PLAY); streamReq.send(streamParms+"&command="+CMD_PLAY);
streamPlay();
} }
streamPlay();
} }
function vjsPlay() { //catches if we change mode programatically function vjsPlay() { //catches if we change mode programatically
if ( intervalRewind ) { if ( intervalRewind ) {
stopFastRev(); stopFastRev();
} }
$j('#rateValue').html(vid.playbackRate()); $j('select[name="rate"]').val(vid.playbackRate()*100);
Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365}); Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365});
streamPlay(); streamPlay();
} }
function streamPlay( ) { function streamPlay( ) {
$j('#modeValue').html('Replay');
setButtonState( $('pauseBtn'), 'inactive' ); setButtonState( $('pauseBtn'), 'inactive' );
setButtonState( $('playBtn'), 'active' ); setButtonState( $('playBtn'), 'active' );
setButtonState( $('fastFwdBtn'), 'inactive' ); setButtonState( $('fastFwdBtn'), 'inactive' );
@ -338,16 +368,13 @@ function streamFastFwd( action ) {
if ( rates.indexOf(vid.playbackRate()*100)-1 == -1 ) { if ( rates.indexOf(vid.playbackRate()*100)-1 == -1 ) {
setButtonState($('fastFwdBtn'), 'unavail'); setButtonState($('fastFwdBtn'), 'unavail');
} }
$j('#rateValue').html(vid.playbackRate()); $j('select[name="rate"]').val(vid.playbackRate()*100);
Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365}); Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365});
} else { } else {
streamReq.send(streamParms+"&command="+CMD_FASTFWD); streamReq.send(streamParms+"&command="+CMD_FASTFWD);
} }
} }
var spf = Math.round((eventData.Length / eventData.Frames)*1000000 )/1000000;//Seconds per frame for videojs frame by frame.
var intervalRewind;
var revSpeed = .5;
function streamSlowFwd( action ) { function streamSlowFwd( action ) {
if ( vid ) { if ( vid ) {
@ -368,6 +395,7 @@ function streamSlowRev( action ) {
function stopFastRev() { function stopFastRev() {
clearInterval(intervalRewind); clearInterval(intervalRewind);
vid.playbackRate(1); vid.playbackRate(1);
$j('select[name="rate"]').val(vid.playbackRate()*100);
Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365}); Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365});
revSpeed = .5; revSpeed = .5;
} }
@ -385,7 +413,7 @@ function streamFastRev( action ) {
setButtonState( $('fastRevBtn'), 'unavail' ); setButtonState( $('fastRevBtn'), 'unavail' );
} }
clearInterval(intervalRewind); clearInterval(intervalRewind);
$j('#rateValue').html(-revSpeed); $j('select[name="rate"]').val(-revSpeed*100);
Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365}); Cookie.write('zmEventRate', vid.playbackRate()*100, {duration: 10*365});
intervalRewind = setInterval(function() { intervalRewind = setInterval(function() {
if (vid.currentTime() <= 0) { if (vid.currentTime() <= 0) {
@ -576,7 +604,7 @@ function getEventResponse(respObj, respText) {
CurEventDefVideoPath = null; CurEventDefVideoPath = null;
$j('#modeValue').html('Replay'); $j('#modeValue').html('Replay');
$j('#zoomValue').html('1'); $j('#zoomValue').html('1');
$j('#rateValue').html('1'); $j('#rate').val('100');
vjsPanZoom('zoomOut'); vjsPanZoom('zoomOut');
} else { } else {
drawProgressBar(); drawProgressBar();
@ -1047,7 +1075,7 @@ function initPage() {
$j('.vjs-progress-control').append('<div class="alarmCue"></div>');//add a place for videojs only on first load $j('.vjs-progress-control').append('<div class="alarmCue"></div>');//add a place for videojs only on first load
vid.on('ended', vjsReplay); vid.on('ended', vjsReplay);
vid.on('play', vjsPlay); vid.on('play', vjsPlay);
vid.on('pause', vjsPause); vid.on('pause', pauseClicked);
vid.on('click', function(event) { vid.on('click', function(event) {
handleClick(event); handleClick(event);
}); });
@ -1055,7 +1083,8 @@ function initPage() {
$j('#progressValue').html(secsToTime(Math.floor(vid.currentTime()))); $j('#progressValue').html(secsToTime(Math.floor(vid.currentTime())));
}); });
if ( rate > 1 ) { // rate is in % so 100 would be 1x
if ( rate > 0 ) {
// rate should be 100 = 1x, etc. // rate should be 100 = 1x, etc.
vid.playbackRate(rate/100); vid.playbackRate(rate/100);
} }
@ -1079,7 +1108,10 @@ function initPage() {
} }
nearEventsQuery(eventData.Id); nearEventsQuery(eventData.Id);
initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues
if ( scale == '0' ) changeScale(); if ( scale == '0' || scale == 'auto' ) changeScale();
document.querySelectorAll('select[name="rate"]').forEach(function(el) {
el.onchange = window['changeRate'];
});
} }
// Kick everything off // Kick everything off