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

Question

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

我目前正在创建这样的 MediaRecorder：

const recorder = new MediaRecorder(mediaStream);

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

到目前为止，我能找到的唯一策略是创建一个中间画布，重复将原始流复制到画布，然后根据画布创建具有所需帧速率的新流，如下所示：

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

有更好/更简单的方法吗？

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

Answer 1

你有正确的方法。您正在进行时间重采样。如果您使用本机代码执行此操作，这就是 ffmpeg 会执行的操作。

如果您从 30 fps 开始，则应重新采样为 10 fps 或 15 fps。这样您就可以保留每隔一个解码的帧，或每隔三个帧。这使得录音看起来更漂亮。

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