Add requestVideoFrameCallback polyfill

wlcx · wlcx · commit 72a20753ae2d · 2024-06-13T18:41:35.000+02:00
diff --git a/static/js/rvfc-polyfill.js b/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]
+    }
+  }
diff --git a/static/js/videolog.js b/static/js/videolog.js
@@ -274,7 +274,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/templates/log.html b/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>

Original file line number	Diff line number	Diff line change
`@@ -274,7 +274,7 @@ function send_to_renderer(){`
`274`	`274`	`setTimeout(function() {document.getElementById("talkid").classList.add('invalid')}, 100)`
`275`	`275`	`valid = false`
`276`	`276`	`}`
`277`		`-`
	`277`	`+`
`278`	`278`	`if (valid) {`
`279`	`279`	`// All good - send video for processing!`
`280`	`280`	`var xhttp = new XMLHttpRequest();`