#StackBounty: #javascript #canvas #optimization #webgl #mediarecorder Optimize performance of 1920×1080 canvas recording

Bounty: 50

I would like to make a basic canvas-recorder using the MediaRecorder API to record a webGL (or other) canvas.

I want the final video to be 1920×1080 size (even if the actual resolution is lower, AKA i’m fine with it being scaled up).

The problem is that when I try to load a 1920×1080 canvas and screen record it with WebGL, the results are very jittery and choppy, like, extremely (even though it does record it, choppyness and all).
All I want is the finished size of the video to be 1920×1080, even if it’s actually lower quality, and I need it to play in real time in a browser, without being choppy. So:

  1. Is there any way to make a webGL canvas a bigger size, while keeping the same performance it would have with a smaller size?

  2. Is there a way for the mediarecorder API to record a video that has a higher resolution than the stream (in this case, a canvas stream) that it is currently capturing?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.