<canvas id="canvasEl"></canvas>
<br>
<input type="file" accept="video/mp4" onchange="start(this.files[0])">
<script type="module">
  import getVideoFrames from "https://deno.land/x/get_video_frames@v0.0.9/mod.js"
  
  window.start = async function(file) {
    let ctx = canvasEl.getContext("2d"); 

    // `getVideoFrames` requires a video URL as input.
    // If you have a file/blob instead of a videoUrl, turn it into a URL like this:
    let videoUrl = URL.createObjectURL(file);

    await getVideoFrames({
      videoUrl,
      onFrame(frame) {  // `frame` is a VideoFrame object: https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame
        ctx.drawImage(frame, 0, 0, canvasEl.width, canvasEl.height);
        frame.close();
      },
      onConfig(config) {
        canvasEl.width = config.codedWidth;
        canvasEl.height = config.codedHeight;
      },
      onFinish() {
        console.log("finished!");
      },
    });
    
    URL.revokeObjectURL(file); // revoke URL to prevent memory leak
  }
</script>