如何使用 Matt Diamonds 同时录制两个媒体源 recorder.js

Question

我正在使用 Matt Diamonds recorder.js 将音频录制为 wav blob。我正在使用 WEB RTC 从浏览器呼叫真实号码，我想记录对话。其他一切正常，但不幸的是我一次只能从一个来源录制（来自 'stream' 或 'recording_ms'）。我使用 Matt 代码的原因是因为它可以生成具有正确 RIFF header.

的有效 .wav 文件

这是我当前代码的一个工作示例，它只记录一个来源：

function startRecording(){
  if(isRecording){
    console.log("Already recording");
    return;
  }
  if(!inCall){
    console.log("Not in call");
    return;
  }
  if(!recording_ms){
    console.log("No mediastream");
    return;
  }
  console.log("incall:"+inCall);


  CONTEXT = new AudioContext();
  
    navigator.mediaDevices.getUserMedia({audio:true})
    .then(function(stream) {


      let mediaStreamSource = CONTEXT.createMediaStreamSource(stream); // outgoing
      let mediaStreamSource2 = CONTEXT.createMediaStreamSource(recording_ms); // incoming


      recorder = new Recorder(mediaStreamSource); // mediaStreamSource or mediaStreamSource2
      recorder.record();
      isRecording=true;
      console.log('Recording');
    })
    .catch(function(err) { 
      console.log(err);
    });
  

}

我试过：

navigator.mediaDevices.getUserMedia({audio:true})
.then(function(stream) {


  const source1 = CONTEXT.createMediaStreamSource(recording_ms);
  const source2 = CONTEXT.createMediaStreamSource(stream);

  recordingstream = CONTEXT.createMediaStreamDestination();

  source1.connect(recordingstream);
  source2.connect(recordingstream);
  
  const outputStream= new MediaStream();

  outputStream.addTrack(recordingstream.stream.getAudioTracks()[0]);

  recorder = new Recorder(outputStream);
  recorder.record();
  isRecording=true;
  console.log('Recording');
})
.catch(function(err) { 
  console.log(err);

如果记录器 object 是 MediaRecorder 而不是 Recorder，则此方法会起作用，但它不是，这是错误：

TypeError: Cannot read property 'createScriptProcessor' of undefined
    at new Recorder (recorder.js:58)
    at recording.js:49

未定义是因为 recorder.js（Matt Diamond 的代码）无法读取 this.context 值，因为它不存在。 (

谁能帮我解决这个问题？我已经坚持了好几天了，我似乎找不到关于这个问题的任何其他帖子，所以这可能是一个我看不到的简单修复。提前致谢！

Answer 1

由于 Recorderjs 需要用 MediaStreamAudioSourceNode 调用，我怀疑它会像这样工作：

const recordingSource = CONTEXT.createMediaStreamSource(
    recordingstream.stream
);

recorder = new Recorder(recordingSource);

如果您更喜欢使用 MediaRecorder 界面，可以尝试 extendable-media-recorder。它也可以扩展为录制 WAV 文件。在内部它使用本机 MediaRecorder 或 AudioWorklet，这应该比 ScriptProcessorNode 给你更好的性能。（完全披露：我是 extendable-media-recorder 的作者。）

如何使用 Matt Diamonds 同时录制两个媒体源 recorder.js

How to record two mediasources simultaneously using Matt Diamonds recorder.js

javascript

webrtc

mediarecorder

mediastream

recorder.js