[mediacapture-record] The changes in the canvas are not being recognized correctly. (#218)

yoshi-pi has just created a new issue for https://github.com/w3c/mediacapture-record:

== The changes in the canvas are not being recognized correctly. ==
## Problem
I wrote code to display a green screen on the canvas for 1000ms and a blue screen for 300ms, alternating between the two, but the recorded video shows that the blue and green screens are displayed irregularly. Is there any way to address this issue?


## Code


```:javascript
const canvas = document.createElement("canvas");
canvas.width = 3840;
canvas.height = 2160;
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream();
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    download();
  }
};

async function start() {
  mediaRecorder.start();
  for (let i = 0; i < 20; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    });
    requestAnimationFrame(() => {
      ctx.fillStyle = "blue";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    });
    await new Promise((resolve) => {
      setTimeout(resolve, 300);
    });
  }
  mediaRecorder.stop();
}
start();

function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "tmp.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

```

## Result Video
[test.webm](https://user-images.githubusercontent.com/19358565/233222132-e3aaabae-0095-450a-8a58-6a20e08b9b1a.webm)


Please view or discuss this issue at https://github.com/w3c/mediacapture-record/issues/218 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 19 April 2023 23:53:05 UTC