canvas to video recording yields blurry video

[Zhenglai Liu]

I'm using MediaRecorder to merge a video stream and a camera stream into a single video. I took MultiStreamMixer as a reference and created this codepen as a demo (https://codepen.io/lzl124631x/pen/jOWoWaL).

What I'm doing is rendering video and camera streams onto the same canvas and generate a single output stream and record it.

It works. You can click "Mix" first to create mixed stream, then start recording and end recording. You'll see the recorded merged video. But if you wave you hand fast in the camera, the recorded video becomes very blurry.

I found this is also an issue for the webrtc demo (https://groups.google.com/forum/#!forum/discuss-webrtc). The recorded teapot is blurry and you can't see the text on it clearly.

Am I doing something incorrectly? Or it's just because that I shouldn't use Canvas and MediaRecorder to do this merging video task? Should I use other tools like ffmpeg instead?

"directly record camera.webm" is what I recorded directly using MediaRecorder with camera stream. It's a bit blurry at the beginning but it's mostly good.

"merged using canvas.webm" is what I recorded by merging streams using canvas and using MediaRecorder to record the canvas. It's very blurry :(

[Zhenglai Liu]

Bump

[Eric Davies]

 The most likely problem is that your captured resolution requires a higher video bandwidth than you are supplying.
See https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder for the videoBitsPerSecond option in the constructor.