如何不借助Canvas，用MediaRecorder恒定帧率录制原始摄像头流？

核心思路 #

通过严格约束摄像头输入帧率、配置MediaRecorder编码参数，无需额外视频处理即可实现恒定帧率录制，同时保留最佳画质。

具体步骤 #

• 强制摄像头输出固定帧率
  调用getUserMedia时，明确指定精确帧率，避免摄像头输出波动。示例代码：

  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      width: 3840,
      height: 2160,
      frameRate: { exact: 30 } // 也可设置min/max均为30，效果一致
    }
  });
  

  这会让CamLink识别的摄像头强制输出30fps，从源头避免帧率波动。

• 配置MediaRecorder的编码参数
  选择支持恒定帧率编码的容器与编码格式，并设置恒定比特率（CBR），确保编码过程中帧率稳定：

  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/mp4;codecs=h264', // 优先选硬件支持的编码格式
    videoBitsPerSecond: 50000000 // 4K 30fps建议50Mbps以上，保证画质
  });
  

  可通过MediaRecorder.isTypeSupported('video/mp4;codecs=h264')检查当前设备是否支持该编码格式，优先选择硬件加速支持的编码，性能更稳定。

• 避免录制时的性能干扰
  在Tauri应用中，确保录制过程中窗口处于活跃状态，关闭后台不必要的进程，避免CPU/GPU资源被占用导致帧率下降。

补充说明 #

如果仍存在帧率波动，可能是CamLink本身的输出稳定性问题，可尝试更新CamLink驱动或调整相机输出设置（强制相机输出30fps），再配合上述getUserMedia的帧率约束，基本可以解决问题。

内容的提问来源于stack exchange，提问作者KaliaJS