getting 0xc00d3e8c Error and duration is not shown

[glitch-txs]

I'm recording a canvas animation and trying to download it as webm file, when using this library I get 0xc00d3e8c error on the media player and duration is neither shown in the properties of the file. I can open however the animation on my browser but if I download it from there the quality is very low and the duration is still infinity/not fixed.

This is my code:

import ysFixWebmDuration from "fix-webm-duration"

function startRecording() {
    setStartTime(Date.now())
    const canvas = container.current.firstChild as HTMLCanvasElement
    const chunks = []; // here we will store our recorded media chunks (Blobs)  
    const stream = canvas.captureStream(60); // grab our canvas MediaStream
    const rec = new MediaRecorder(stream, {
      mimeType:'video/webm',
      videoBitsPerSecond: 8000000
    }); // init the recorder
    // every time the recorder has new data, we will store it in our array
    rec.ondataavailable = e => chunks.push(e.data);
    // only when the recorder stops, we construct a complete Blob from all the chunks
    rec.onstop = e => exportVid(chunks);

    rec.start();
    setTimeout(()=>rec.stop(), 10000); // stop recording in 3s
  }

  function exportVid(chunks: BlobPart[]) {

    const duration = Date.now() - startTime

    const blob = new Blob(chunks, {type: 'video/webm'})
    ysFixWebmDuration(blob, duration, {logger: false}).then((fixedBlob) => {
      const a = document.createElement('a');
      a.download = 'Animation.webm';
      a.href = URL.createObjectURL(fixedBlob);
      a.textContent = 'download the video';
      document.body.appendChild(a);
    })
  }