Vue JS : Why the video created from a blob that I display on my website is not the same as the one when I download it ? (even if the URL is the same)

I created a video from an “Base64 string” images array which I display on a canvas.

const speed = ref(500);

function animVideoCreation() {
  const canvas = document.getElementById("myFinalCanvas");
  const ctx = canvas.getContext("2d");
  if (x >= size.value) {
    x = 0;
  }
  ctx.clearRect(0, 0, width.value, height.value);
  //  Give the current image to the canvas
  var img = new Image();
  var src = "data:image/png;base64," + bytesArray.value[x];
  img.src = src;
  img.addEventListener("load", () => {
    ctx.drawImage(img, 0, 0);
    x++;
    setTimeout(animVideoCreation, speed.value);
  });
}

The images are displayed well and the transition between them is perfect.
After that, I tried to record my canvas to create a video from it.

const videoDuration = ref((speed.value / 1000) * size.value);

let chunks = [];

function downloadAnimation() {
  x = 0;
  const canvas = document.getElementById("myFinalCanvas");
  let cStream = canvas.captureStream();
  let recorder = new MediaRecorder(cStream);
  recorder.start();
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => exportStream();
  setTimeout(() => {
    recorder.stop();
  }, videoDuration.value * 1000 + 500);
  console.log("oui");
}

function exportStream() {
  // combine all our chunks in one blob
  var blob = new Blob(chunks, { type: "video/mp4" });
  // do something with this blob
  var vidURL = URL.createObjectURL(blob);
  var vid = document.createElement("video");
  vid.controls = true;
  vid.src = vidURL;
  document.getElementById("app").appendChild(vid);
  let link = document.createElement("a");
  link.href = vid.src;
  link.download = "MyFlipBook";
  vid.addEventListener("loadeddata", () => {
    link.click();
  });
}

The video created with the vid variable is displayed well except when it is in full sreen mode, and the problem is the same as the one on the video downloaded with the link variable : the video flashs and looks to bug.

I tried to add a frame per second value for my recoder and nothing changed.

I hope someone will figure it out because I don’t and I’m completely blocked.