Low framerate using MediaRecorder API to capture three editor canvas on Android, fine on iOS

Questions
1

Hi folks, cant share implementation as it’s a client project but the workflow is like this:

get reference to the three editor’s renderer dom element canvas element and use it to get stream for the MediaRecorder:

const mimeType = 'video/mp4; codecs="avc1.424028, mp4a.40.2"';
        if (!MediaRecorder.isTypeSupported(mimeType)) {
          console.error('MIME type not supported');
          return;
        }

        var videoStream = canvasToCapture.captureStream(30);
        var options = {
            audioBitsPerSecond: 0,
            videoBitsPerSecond: 5000000,
            mimeType: mimeType,
        };
        this.mediaRecorder = new MediaRecorder(videoStream, options );

On iOS the recording is silky smooth but on Android it chugs. I’ve found a workaround which involves drawing the renderer canvas to a virtual canvas which is not rendered which in turn feeds the MediaRecorder, this works better but doesn’t feel like the right solution.

Any ideas would warmly welcomed!
Thanks Dan

2

The android device may have a different device pixel ratio?

does renderer.setPixelRatio(1) at init time change the behavior?