Canvas draw image method prevents ondataavailable from firing

Question

Have a good day!

On localhost, I'm having a continuously changing img tag (I'll explain more at the end) and am using a canvas to draw the image on it, so I can use MediaRecorder to capture the video-like image and save it.

The code I'm using is this:

var canvas2 = document.getElementById("canV");
var ctx = canvas2.getContext("2d");

// Start of marking

update();
function update(){
 ctx.drawImage(videos[0],0,0,640,480);
 requestAnimationFrame(update);
}

// End of marking

var videoStream = canvas2.captureStream(10); 
videoStream.getVideoTracks()[0].requestFrame();
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
 chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
 var blob = new Blob(chunks, { 'type' : 'video/mp4' });
 chunks = [];
 var videoURL = URL.createObjectURL(blob);
 const video = document.createElement("video");
 video.src = videoURL;
 document.body.appendChild(video);
};

And I run the code below in console:

mediaRecorder.start(1000);

//After seconds

mediaRecorder.stop()

Note that the changing image is videos[0];

I perceived that the dataavailable event is only fired when I stop the mediaRecorder. So I tried drawing other things on the canvas to debug it. I changed the part marked as "marking" in the snippet to:

var colors = ["red", "blue", "green"];
setInterval(update, 100);

function update(){
  ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
  ctx.fillRect(0, 0, 10, 10);
  ctx.drawImage(videos[0],0,0,640,480);
  requestAnimationFrame(update);
}

Until before, the blob is empty (I'm getting an error GET blob:http://local:8080/dbe7d1ac-1d97-4d4a-8921-2a0daa10d31a net::ERR_REQUEST_RANGE_NOT_SATISFIABLE) but after running this, I had a black background in the video generated, with a small red or blue or green square at the top left; it means the mediaRecorder records only the data when I run the stop method and si only recording the square not the drawImage, though; it still prevents dataavailable from firing.

Although, when I removed ctx.drawImage(videos[0],0,0,640,480); the event mentioned fires as expected.

So here comes two question, why the video doesn't show the changing image and why the draw image method prevents mediaRecorder from firing dataavialable event?

FURTHER INFORMATION The changing image actually is an IP Webcam (DroidCam on an android) and the source of that image is something like http://192.168.223.101:8080/video?640x480 and the image is actually a streaming camera in my cellphone.

Is it possible to be due to CORS or something?

And I'm not getting any more errors except the one I mentioned.

Any helps would be appreciated!