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.
You have the right approach. You're doing temporal resampling. That's what ffmpeg would do if you did it with native code.
If you're starting with 30fps, you should resample to either 10fps or 15fps. That way you can keep every other decoded frame, or every third frame. That makes for a nicer-looking recording.
Resampling from 30fps to 12fps and getting tolerable output is possible, but it's a computational monster because of the need for temporal interpolation. Relying on browser WebRTC to do that? Not wise.