720p 时的 getUserMedia/RecordRTC 性能问题

Question

我正在使用RecordRTC 脚本来录制视频/音频。

在我需要 720p 之前一切都很好。

如果您访问 RecordRTC 网站并为视频和画布选项选择 1280x720，您会发现与较小的尺寸相比，速度会显着降低（预期）。

如果我只录制视频，它可以完美运行，但我需要两者。

$('.btn.record').on('click',function() {
!window.stream && navigator.getUserMedia(
  {
    audio: true,
    video: {
      optional: [],
      mandatory: {
        minWidth: 1280,
        minHeight: 720,
        maxWidth: 1280,
        maxHeight: 720,
        minAspectRatio: 1.7777777778,
        maxAspectRatio: 1.7777777778,
      }
    }
  },
  function(stream) {
    window.stream = stream;
    onstream();
  },
  function(error) {
    alert(error);
  }
);

window.stream && onstream();

function onstream() {
    preview.src = window.URL.createObjectURL(stream);
    preview.play();
    preview.muted = true;

    recordAudio = RecordRTC(stream, {
        onAudioProcessStarted: function() {
            if(!isFirefox) {
                recordVideo.startRecording();
            }
        }
    });

    recordVideo = RecordRTC(stream, {
        type: 'video',
        video: {
          width: 1280,
          height: 720
        },
        canvas: {
          width: 1280,
          height: 720
        }
    });

    recordAudio.startRecording(); // DISABLE THIS AND VIDEO IS PERFECT
}

Answer 1

使用<canvas>宽度/高度尽可能低； 320*240 是建议值：

recordVideo = RecordRTC(stream, {
    type: 'video',
    video: {
        width: 1280, // redundant because offsetWidth/videoWidth   will be 1280
        height: 720  // redundant because offsetHeight/videoHeight will be 720
    },
    canvas: {
        width: 320,   // suggested width
        height: 240   // suggested height
    }
});