Media recorder in Canvas Video

Question

I have added video in my canvas as prefilled but after startRecording and on ending the bytes are always zero in it but with refrence to I want to record video on canvas in React this is getting played can somebody help with what wrong i am doing it will be of great use

      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var i;
      const stream = c.captureStream(25);
      const recordedChunks = [];
      console.log(stream);

      const options = { mimeType: "video/webm; codecs=vp9" };
      const mediaRecorder = new MediaRecorder(stream, options);

      v.addEventListener(
        "play",
        function() {
          i = window.setInterval(function() {
            ctx.drawImage(v, 5, 5, 260, 125);
          }, 20);
        },
        false
      );
      v.addEventListener(
        "pause",
        function() {
          window.clearInterval(i);
        },
        false
      );
      v.addEventListener(
        "ended",
        function() {
          clearInterval(i);
        },
        false
      );
      mediaRecorder.start();
      setTimeout(() => mediaRecorder.stop(), 20000);

      mediaRecorder.addEventListener("dataavailable", evt => {
        const url = URL.createObjectURL(evt.data);
      });

here is the code which i have done evt.data.size is always coming zero

 <video
          style={{ display: "none" }}
          autoPlay
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
          controls="controls"
          id="video1"
          height="200"
        ></video>
        <canvas id="myCanvas" width="270" height="135">
          Your browser does not support the HTML5 canvas tag.
        </canvas>

This is the html