search

cginternals / webgl-operate

A TypeScript based WebGL rendering framework.
https://webgl-operate.org
MIT License
167 stars 25 forks source link

CanvasRecorder using MediaStream API #253

Closed Zanthelo closed 4 years ago

Zanthelo commented 4 years ago

Adds the CanvasRecorder class, which can record a Canvas. Internally it uses the MediaStream / MediaRecorder API, which is supported by all major Browsers but Internet Explorer and the old Edge.

Some experimental features are used, but since they're widely supported it should pose no problem.

There is one fundamental issue with this implementation: It can not record stutter free videos, if the renderer takes longer than 16ms per (multi-)frame. That's because the MediaStream API is not designed to work this way. I've looked around for some potential workarounds but could not find a way to integrate any of them into the already existing controller / renderer architecture. So by using this API it probably won't be possible to record high-quality, 60 fps videos of the canvas, if a single frame takes longer than 16ms to render.

It is still possible and easy as well to take videos, when the renderer renders at the same or more fps than the fps of the video is supposed to be.

coveralls commented 4 years ago

Coverage Status

Coverage decreased (-0.1%) to 20.099% when pulling 0ba7eb0b127d63ae6be3a55eedf64a9b5fb1cbd4 on Zanthelo:record-canvas into bf09502b241ca075f8f77c925cff42a423e44d62 on cginternals:master.