diff --git a/hackyplayer/static/js/rvfc-polyfill.js b/hackyplayer/static/js/rvfc-polyfill.js new file mode 100644 index 0000000..975e100 --- /dev/null +++ b/hackyplayer/static/js/rvfc-polyfill.js @@ -0,0 +1,39 @@ +// From https://github.com/ThaUnknown/rvfc-polyfill +// Released under GNU General Public License v3.0 + +if (typeof HTMLVideoElement !== 'undefined' && !('requestVideoFrameCallback' in HTMLVideoElement.prototype) && 'getVideoPlaybackQuality' in HTMLVideoElement.prototype) { + HTMLVideoElement.prototype._rvfcpolyfillmap = {} + HTMLVideoElement.prototype.requestVideoFrameCallback = function (callback) { + const handle = performance.now() + const quality = this.getVideoPlaybackQuality() + const baseline = this.mozPresentedFrames || this.mozPaintedFrames || quality.totalVideoFrames - quality.droppedVideoFrames + + const check = (old, now) => { + const newquality = this.getVideoPlaybackQuality() + const presentedFrames = this.mozPresentedFrames || this.mozPaintedFrames || newquality.totalVideoFrames - newquality.droppedVideoFrames + if (presentedFrames > baseline) { + const processingDuration = this.mozFrameDelay || (newquality.totalFrameDelay - quality.totalFrameDelay) || 0 + const timediff = now - old // HighRes diff + callback(now, { + presentationTime: now + processingDuration * 1000, + expectedDisplayTime: now + timediff, + width: this.videoWidth, + height: this.videoHeight, + mediaTime: Math.max(0, this.currentTime || 0) + timediff / 1000, + presentedFrames, + processingDuration + }) + delete this._rvfcpolyfillmap[handle] + } else { + this._rvfcpolyfillmap[handle] = requestAnimationFrame(newer => check(now, newer)) + } + } + this._rvfcpolyfillmap[handle] = requestAnimationFrame(newer => check(handle, newer)) + return handle + } + + HTMLVideoElement.prototype.cancelVideoFrameCallback = function (handle) { + cancelAnimationFrame(this._rvfcpolyfillmap[handle]) + delete this._rvfcpolyfillmap[handle] + } + } \ No newline at end of file diff --git a/hackyplayer/static/js/videolog.js b/hackyplayer/static/js/videolog.js index 9957a68..c15c54a 100644 --- a/hackyplayer/static/js/videolog.js +++ b/hackyplayer/static/js/videolog.js @@ -1,5 +1,14 @@ var framerate = 50 +function bpp () { + // Button play pause + video = document.getElementById("video1") + if (video.paused) { + video.play() + } else { + video.pause() + } +} function bff (frames=1) { // Button Frame Forward document.getElementById("video1").currentTime = document.getElementById("video1").currentTime + frames/framerate @@ -101,16 +110,11 @@ function snap_to_timestamp (ele) { document.getElementById("video1").currentTime = new_time } -function updateTC(now, meta) { - var frames = seconds_to_timestamp(meta.mediaTime) +function updateTC(timestamp) { + var frames = seconds_to_timestamp(timestamp) document.getElementById("current_tc").value = frames - document.getElementById("video1").requestVideoFrameCallback(updateTC) }; -function frameevent() { - document.getElementById("video1").requestVideoFrameCallback(updateTC) -} - function checkKey(e) { e = e || window.event; @@ -153,7 +157,23 @@ function checkKey(e) { } } -window.onload = frameevent +function beginUpdatingTC(ele) { + const frameCallback = (now, meta) => { + updateTC(meta.mediaTime) + ele.requestVideoFrameCallback(frameCallback) + } + ele.requestVideoFrameCallback(frameCallback) + if (!('requestVideoFrameCallback' in HTMLVideoElement.prototype) || ('_rvfcpolyfillmap' in HTMLVideoElement.prototype)) { + console.info("requestVideoFrameCallback is not available or is polyfilled, added seeked listener to update TC") + ele.addEventListener("seeked", (ev) => { + updateTC(ele.currentTime) + }) + } +} + +document.addEventListener("DOMContentLoaded", (ev) => { + beginUpdatingTC(document.getElementById("video1")) +}) document.onkeydown = checkKey; @@ -265,7 +285,7 @@ function send_to_renderer(){ setTimeout(function() {document.getElementById("talkid").classList.add('invalid')}, 100) valid = false } - + if (valid) { // All good - send video for processing! var xhttp = new XMLHttpRequest(); diff --git a/hackyplayer/templates/log.html b/hackyplayer/templates/log.html index 79ece77..25bb9bb 100644 --- a/hackyplayer/templates/log.html +++ b/hackyplayer/templates/log.html @@ -1,5 +1,6 @@ {% include 'head.html' %} + @@ -75,7 +76,7 @@
- +