requestVideoFrameCallback polyfill

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]
+    }
+  }

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();

hackyplayer/templates/log.html

@@ -1,5 +1,6 @@
 {% include 'head.html' %}
         <script src="{{url_for('static', filename='js/videolog.js')}}"></script>
+        <script src="{{url_for('static', filename='js/rvfc-polyfill.js')}}"></script>
         <link rel="stylesheet" href="{{url_for('static', filename='css/log.css')}}">
     </head>
     <body>
@@ -75,7 +76,7 @@
                             <!--<input type="submit" value="Send to Renderer"/>-->
                             <button type="button" onclick="get_shuttle()">Connect to Shuttle controller</button><br/>
                         </div>
-                        
+
                     </div>
                 </div>
             </form>