Recording the Canvas

q5's built-in canvas recorder provides a simple way to record videos of your canvas!

It's powered by MediaRecorder, which prioritizes low-latency super fast recording.

Yet, recording large canvases is an intensive process, so your computer still may not be able to do it in real time. If real-time interaction while recording is a priority, consider reducing the canvas' size, frame rate, and/or recording bitrate.

Limitations

You may want to consider using a screen capture tool like OBS Studio instead, due to MediaRecorder's limitations.

HDR video encoding is not yet supported by any web browser.

The big problem is it records at a variable frame rate (VFR). This means videos require re-encoding before they can be edited in video editing software, such as QuickTime and Da Vinci Resolve.

Re-Encoding

To re-encode videos at a consistent frame rate and higher compression level (for a smaller file size), use a tool like HandBrake or ffmpeg.

Chat AI is good at explaining video encoding setting and can help you use ffmpeg.

For example, this command takes an input file produced by MediaRecorder in Chrome and converts it to playback at 60fps with high visual quality with the h.265 (HVEC) compression format, with GPU hardware acceleration.

ffmpeg -i input.mp4 \
-c:v hevc_videotoolbox -q:v 50 \
-r 60 \
-tag:v hvc1 \
output.mp4