如何在RecordRTC屏幕录制功能中接入麦克风音频输入？

核心原因是getDisplayMedia接口仅支持捕获屏幕画面与可选的系统内部音频，无法直接获取麦克风输入的音频，需要单独请求麦克风音频流，再与屏幕流合并后传入RecordRTC即可实现同步录制。

调整后的完整代码 #

async startRecording() {
  // 1. 先获取屏幕录制流
  const screenConstraints = {
    video: true,
    audio: true // 开启后可以捕获系统内部音频，不需要的话设为false即可
  };
  const screenStream = await this.mediaDevices.getDisplayMedia(screenConstraints);

  // 2. 单独获取麦克风音频流
  const micConstraints = {
    audio: true,
    video: false
  };
  const micStream = await this.mediaDevices.getUserMedia(micConstraints);

  // 3. 合并两条流的音视频轨
  const combinedStream = new MediaStream();
  // 添加屏幕的视频轨
  screenStream.getVideoTracks().forEach(track => combinedStream.addTrack(track));
  // 添加屏幕的音频轨（如果需要保留系统音频就保留这段，不需要就删掉）
  screenStream.getAudioTracks().forEach(track => combinedStream.addTrack(track));
  // 添加麦克风的音频轨
  micStream.getAudioTracks().forEach(track => combinedStream.addTrack(track));

  // 4. 把合并后的流传入原来的回调
  this.successCallback(combinedStream);
}

successCallback(stream: MediaStream) {
  this.recording = true;
  var options = {
    mimeType: 'video/webm',
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 128000
  };
  this.stream = stream;
  this.recordRTC = RecordRTC(stream, options);
  this.recordRTC.startRecording();
  let video: HTMLVideoElement = this.rtcvideo.nativeElement;
  video.srcObject = stream; // 这里推荐用srcObject替代旧的URL.createObjectURL写法，兼容性更好
  this.toggleControls();
}

注意事项 #

• 浏览器会分别弹出屏幕录制、麦克风录制的两次授权提示，均需要用户同意才能正常工作
• 如果不需要录制系统内部音频，把screenConstraints里的audio设为false，同时删除添加屏幕音频轨的代码即可
• 原有代码里的bitsPerSecond参数优先级高于单独的音频/视频码率设置，如果你需要分别控制音视频码率可以删除这一行

内容的提问来源于stack exchange，提问作者Anthony Earl R. Cuartero