How to record hd video media recorder canvas, with set framerate?

  canvas, javascript, web-mediarecorder

Wasn’t sure how to word this exactly, but basically I want to make a web app that allows people to make basic key frame animations of elements in a canvas, similar in concept to after effects or flash etc, and then click "render", which would then start playing the keyframes etc. into the media recorder api in order to render it to an HD video, but not necessarily realtime, rather, one frame at a time, by it has to be an exact frame rate, so the audio matches up with the video etc.

Basically, like after effects or blender rendering in the browser, how do I use the MediaRecorder API. (or perhaps ffmpeg.js) to record an HD video based on pre designed canvas animations, at an exact framerate (even if some frames take longer to render than others, but the video, finished product should be a set framerate)?

I’m aware of the canvas.captureStream(frame rate here), then I simply pass that stream to the media recorder api, and start playing the animation of the canvas etc,

For example if the desired final video frame rate is 30 FPS, then I could capture the canvas at 15 FPS and play the keyframes back with JavaScript also at 15 FPS, although I think I’m missing something, because I don’t think that would result in the final video being 30FPS, and some frames might take a little longer etc, but it has to be an exact frame rate

Is there a way to do the kind of rendering that after effects and blender does with client side JavaScript, either using the media recorder API or something else? How can I guarantee a set frame rate?

Source: Ask Javascript Questions

LEAVE A COMMENT