fix(worker): debounce chunks decoding to fix Chromium 1-frame delay

Author: Justineantoine

vue-components/src/utils/decoder.js

@@ -45,37 +45,75 @@ function createDecoder(canvas) {
   return new VideoDecoder(init);
 }
 
+let decoder = null;
+let debounceTimer = null;
+let lastChunkData = null;
+let lastChunkMeta = null;
+
+function resetDebounceTimer() {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+    debounceTimer = null;
+  }
+}
+
+function executeDebouncedDecode() {
+  if (lastChunkData && decoder) {
+    decoder.decode(new EncodedVideoChunk({
+      timestamp: lastChunkMeta.timestamp + 1,
+      type: lastChunkMeta.type,
+      data: lastChunkData,
+    }));
+    lastChunkData = null;
+    lastChunkMeta = null;
+  }
+}
+
 onmessage = async function({ data: msg }) {
   switch(msg.action) {
     case 1: // init
       this.canvas = msg.canvas;
-      this.decoder = createDecoder(this.canvas);
+      decoder = createDecoder(this.canvas);
       break;
+
     case 2: // config
       this.canvas.width = msg.config.codedWidth;
       this.canvas.height = msg.config.codedHeight;
-      this.decoder.configure(msg.config);
+      decoder.configure(msg.config);
       break;
+
     case 3: // chunk
-      this.decoder.decode(new EncodedVideoChunk({
+      resetDebounceTimer();
+      lastChunkData = msg.data.slice(0);
+      lastChunkMeta = { timestamp: msg.timestamp, type: msg.type };
+
+      decoder.decode(new EncodedVideoChunk({
         timestamp: msg.timestamp,
         type: msg.type,
         data: msg.data,
       }));
+
+      debounceTimer = setTimeout(executeDebouncedDecode, 35);
       break;
+
     case 4: // flush
-      this.decoder.flush();
+      resetDebounceTimer();
+      decoder.flush();
       break;
+
     case 5: // reset
-      this.decoder.reset();
+      resetDebounceTimer();
+      decoder.reset();
       break;
+
     case 6: // close
       // flush before close() to avoid currepoted state.
       // calling postMessage(flush)
       //         postMessage(close) is not enough since the second
       // abort the first before it finishes.
-      await this.decoder.flush();
-      this.decoder.close();
+      resetDebounceTimer();
+      await decoder.flush();
+      decoder.close();
       break;
   }
 }