降低 MediaRecorder 使用的帧速率的最佳方法是什么？

Question

我有一个来自 WebRTC 远程对等端的 MediaStream，我想在浏览器中创建一个视频记录。

我目前正在这样创建 MediaRecorder：

const recorder = new MediaRecorder(mediaStream);

原始流的帧速率为例如每秒 30 帧。我希望录制的帧率较低，例如12fps.

到目前为止，我能找到的唯一策略是创建一个中介 canvas，重复将原始流复制到 canvas，然后根据 canvas 创建一个具有所需帧率的新流=25=]，像这样：

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));

有better/simpler方法吗？

注意：我知道 videoBitsPerSecond 设置可用于降低输出录制的比特率。但我发现，即使对于固定的 videoBitsPerSecond 设置值，降低 canvas 流的 fps 也会降低 MediaRecorder 的有效比特率。

Answer 1

你的方法是对的。你正在进行时间重采样。如果您使用本机代码，这就是 ffmpeg 会做的事情。

如果您从 30fps 开始，您应该重新采样到 10fps 或 15fps。这样你就可以保留每隔一个解码帧，或者每隔三个帧。这样录音效果会更好看。

从 30fps 重采样到 12fps 并获得可接受的输出是可能的，但由于需要时间插值，它是一个计算怪物。依靠浏览器 WebRTC 来做到这一点？不明智。

降低 MediaRecorder 使用的帧速率的最佳方法是什么？

What's the best way to reduce the frame rate used by a MediaRecorder?

javascript

video

html5-video

web-mediarecorder

mediastream