Recording HTML5 canvas animation in mp4 format

Question

I am having trouble with recording canvas as video in mp4 file format. I managed to record the canvas as webm format using RecordRTC. When I tried to give mimetype: video/mp4 it gives an error unable to record as mimetype: video/mp4.

 var canvas = document.getElementById('canvas');
            var canvasStream = canvas.captureStream();

            var finalStream = new MediaStream();
            audioStream.getAudioTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });
            canvasStream.getVideoTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });

            var recorder = RecordRTC(finalStream, {
            type: 'video',
            mimeType: 'video/mp4'
            });

            recorder.startRecording();

The above code works for webM format. I see no way to record HTML5 canvas to video in mp4 format. I just need to convert it to mp4 from webm. It takes a lot of time. Is there any way to directly record canvas as mp4 without going through the process of first making webm and then converting it to mp4?

Thanks.

Chrome supports recording of h264 codec in webm, might fasten the conversion to mp4 container. But FF only supports vp8... — Kaiido

D-L D-L · Accepted Answer · 2018-01-18T11:35:41

Check this article out. In it, they convert canvas animations to mp4, by using socket.io to save canvas frame images to the server and then by using ffmpeg to convert to mp4. Using this method, it is possible to go from capturing frames to mp4 without first creating a webM video. Hope it helps.

Web Archive snapshot

Recording HTML5 canvas animation in mp4 format

1 Answers