使用RecordRTC无法录制60fps视频，摄像头支持该帧率求解决方案

我之前也踩过这个坑！明明摄像头支持1080p@60fps，但用RecordRTC录WebM就是锁在30fps，后来折腾出几个有效的解决办法，分享给你：

• 先确保输入媒体流是60fps
  RecordRTC的frameRate参数只是一个提示，实际录制帧率完全取决于你传入的stream本身的帧率。很多人容易忽略：在调用getUserMedia获取摄像头流的时候，必须明确指定帧率约束，不然浏览器可能默认用30fps。修改你的流获取代码：

  navigator.mediaDevices.getUserMedia({
    video: {
      width: { ideal: 1920, max: 1920 },
      height: { ideal: 1080, max: 1080 },
      frameRate: { ideal: 60, max: 60 } // 强制要求理想和最大帧率为60
    }
  })
  .then(stream => {
    // 在这里初始化RecordRTC
    var options = {
      mimeType: 'video/webm',
      video: { width: 1920, height: 1080 },
      bitsPerSecond: 51200000,
      frameRate: 60
    };
    this.stream = stream;
    this.recordRTC = RecordRTC(stream, options);
  })
  

• 切换RecordRTC的录制器类型
  RecordRTC默认的录制器可能对高帧率支持有限，试试显式指定用MediaStreamRecorder（更贴近浏览器原生MediaRecorder），同时可以指定VP9编码（部分浏览器对VP9的高帧率兼容性更好）：

  var options = {
    mimeType: 'video/webm;codecs=vp9', // 指定VP9编码
    video: { width: 1920, height: 1080 },
    bitsPerSecond: 51200000,
    frameRate: 60,
    recorderType: RecordRTC.MediaStreamRecorder // 切换录制器类型
  };
  this.stream = stream;
  this.recordRTC = RecordRTC(stream, options);
  

• 验证实际录制帧率
  录完视频后，用工具确认实际帧率是否达标。比如用ffmpeg命令：

  ffmpeg -i your_recorded_video.webm
  

  在输出信息里查找fps字段，如果显示60就说明成功了。

• 注意浏览器性能限制
  如果你的CPU性能不足，浏览器可能会自动降帧来保证录制流畅。录制时尽量关闭其他占用资源的标签页和程序，用性能较好的设备测试。

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