A working example showing how to read a MP4 as fast as possible using WebCodec

import { Mp4VideoDecoder } from "./MP4VideoDecoder";

const fpsTxt = document.body.appendChild(document.createElement("div"));

let mp4Decoder = new Mp4VideoDecoder();
let canvas:HTMLCanvasElement = document.createElement("canvas");
document.body.appendChild(canvas);


let time:number;
mp4Decoder.onReadyToDecode = ()=>{
  time = new Date().getTime();
  canvas.width = mp4Decoder.width;
  canvas.height = mp4Decoder.height;
  mp4Decoder.nextFrame();
}


let fps = 0;
mp4Decoder.onFrameReady = (bmp:ImageBitmap)=>{
  if(new Date().getTime() - time >= 1000){
      time += 1000;
      fpsTxt.innerText = fps+" FPS"
      fps = 0;
  }
  fps++;
  (canvas.getContext("2d") as CanvasRenderingContext2D).drawImage(bmp,0,0);
  mp4Decoder.nextFrame();
}


mp4Decoder.onReadComplete = ()=>{ console.log("complete");}

mp4Decoder.init("./bbb.mp4")

How to run :

npm install 
npm run dev