1

I'm developing a browser based application/tool in Javascript that runs WebGL to animate images loaded by the user. The animation stuff is working good. Now I want the user to be able to save/export the animation. I'm currently using the HTML MediaRecorder API to record the browser screen on the fly/in real time, generating a WEBM file that saves to their PC.

Overall this works well enough. However if a very large image is being animated, ie 2048x2048 pixels, when the recording process starts the browser FPS drops to about 12. Obviously then the recorded animation looks crap. Now what I can do is detect the FPS, and if it drops below say 24fps I can slow down the animation accordingly. eg if fps drops to 12, I set the animation to half speed while recording. Afterwards I can then run the output video in VLC player, increase playback speed to 200%, and the video looks smooth.

So, my question... Can I somehow set the encoding information of the WEBM file so that it will play smoothly in the player? Tell the player what the FPS is? (ie 12 in the above example). Or tell it what the playback speed is?

How do I know what the default recording FPS is with HTML MediaRecorder? I've tried using the FFMPEG tools on the output files but not really getting much useful information from it (possibly user error here).

(Video encoding noob here, so I'm probably screwing up terminology, but hopefully my problem/intention is explained clearly enough)

EDIT: Is it possible to get the MediaRecorder API to record in step with the animation frame? It seems like it runs independent of the actual browser FPS.

Kimble Mo Jimble
  • 11
  • 3
  • Do you have a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) to share? I would try to run the animation on [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to have each frame be exactly one step of the animation, no matter the frame rate. Can't test it though, too much time to set up for me right now – blex Jan 24 '20 at 23:21
  • Sorry dont have a minimal example. I'm using a framework, Phaser3, which largely abstracts away all the nitty gritty of rendering frames etc, but thanks I will look into requestAnimationFrame. Hmmm, thinking about it some more now, its seems like its the MediaRecorder API that I really want to keep in step with the animation. – Kimble Mo Jimble Jan 25 '20 at 00:10
  • Basically the same question as [Record at constant fps with CanvasCaptureMediaStream even on slow computers](https://stackoverflow.com/q/58907270/3702797) which doesn't have an upvoted answer and can't be used as a dupe target... – Kaiido Jan 25 '20 at 04:08
  • Thanks, I'll take a closer look at your detailed response in that one. I did play around with pause and resume earlier, I might have to try that again. – Kimble Mo Jimble Jan 25 '20 at 22:38

0 Answers0