I'm working on a web project where user chooses a design of a mobile mockup and save some chat conversations. As an output the application should give a high quality video (or 1080p at least) of the chat saved before so that it looks like the real chat conversation is captured.

As of now I'm drawing mockup and conversation on HTML5 Canvas and recording it with canvas.captureStream() method.

It is able to record upto 1280px wide canvas but when I tried Increasing it to achieve 1080p video. Canvas animations slows down and browser stop working sometimes. I'm done with googling how to optimize canvas and all the stuff that can help me.

Looks like canvas is no more able to work for me, So is there any way to record DOM and render it as video.

I was using captureStream method of canvas

const stream = canvas.captureStream();

And mediaRecorder to capture it.

let options = {mimeType: 'video/webm'};
let mediaRecorder = new MediaRecorder(stream, options);

I expect to get a way of recording video of DOM in high quality. So that I can run chat with javascript and it records the same in order to achieve the output.

0 Answers