Как записать два медиаресурса одновременно, используя матовые бриллианты recorder.js

#javascript #webrtc #mediarecorder #mediastream #recorder.js

Вопрос:

Я использую Матовые бриллианты recorder.js для записи звука в виде большого двоичного объекта wav. Я использую WEB RTC для вызова реальных номеров из браузера и хотел бы записать разговор. Все остальное работает нормально, но, к сожалению, я могу записывать только из одного источника за раз(из «потока» или «recording_ms»). Причина, по которой я использую код Мэтта, заключается в том, что он может выдавать действительный .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);
 

Этот метод работал бы, если бы объектом записи был MediaRecorder, а не Recorder, но это не так, и вот ошибка:

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

Неопределенный — это потому, что recorder.js(Код Мэтта Даймонда) не может прочитать это значение.context, потому что оно не существует.
(

Кто-нибудь может помочь мне с этой проблемой? Я застрял на этом в течение нескольких дней и, похоже, не могу найти никаких других сообщений об этой проблеме, так что это может быть простое решение, которое я просто не вижу. Заранее благодарю вас!

Ответ №1:

Поскольку Recorderjs ожидает, что его вызовут с MediaStreamAudioSourceNode помощью, я подозреваю, что это будет работать так:

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

recorder = new Recorder(recordingSource);
 

Если вы предпочитаете использовать MediaRecorder интерфейс, вы можете попробовать extendable-media-recorder. Он также может быть расширен для записи WAV-файлов. Внутренне он использует либо собственный MediaRecorder , либо an AudioWorklet , что должно дать вам немного лучшую производительность в качестве ScriptProcessorNode . (полное раскрытие информации: я являюсь автором расширяемого носителя-рекордера.)