I have a MediaStream from a WebRTC remote peer from which I would like to create a video recording in the browser.

I'm currently creating the MediaRecorder like this:

const recorder = new MediaRecorder(mediaStream);

The original stream has a frame rate of e.g. 30fps. I would like the recording to have a lower framerate, e.g. 12fps.

So far the only strategy I can find is to create an intermediary canvas, repeatedly copy the original stream to the canvas, and create a new stream with the desired framerate based on the canvas, something like this:

const video = document.getElementById('my_video_element');
// ... do more to set up video here
video.srcObject = mediaStream;
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
setInterval(() => {
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
}, 18);
const desiredFps = 12;
const recorder = new MediaRecorder(canvas.captureStream(desiredFps));

Is there a better/simpler way?

Note: I am aware that the videoBitsPerSecond setting can be used to reduce the bitrate of the output recording. But I find that even for a fixed videoBitsPerSecond setting value, reducing the fps of the canvas stream reduces the effective bitrate of the MediaRecorder.