CODEWITHSUNDEEP
javascriptwebrtcmediarecordermediastreamrecorder.js
Innit2
Innit2

Reputation: 107

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

I am using Matt Diamonds recorder.js to record audio as wav blob. I am using WEB RTC to call real numbers from the browser and I'd like to record the conversation. Everything else works fine but unfortunately I am able to record only from one source at a time(from 'stream' or 'recording_ms'). The reason I am using Matt's code is because it can produce a valid .wav file with correct RIFF header.

Here is a working example of my current code which only records one source:

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);
    });
  

}

I've tried:

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);

This method would work if the recorder object was MediaRecorder not Recorder but it doesn't and here is the error:

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

Undefined is because recorder.js(Matt Diamond's code) can't read this.context value because it doesn't exist. (

Can anyone help me with this problem? I've been stuck on it for days and I can't seem to find any other posts about this issue so It could be an easy fix that I just can't see. Thank you in advance!

Upvotes: 0

Views: 406

Answers (1)

chrisguttandin
chrisguttandin

Reputation: 9076

Since Recorderjs expects to be called with a MediaStreamAudioSourceNode I suspect it would work like this:

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

recorder = new Recorder(recordingSource);

If you prefer using the MediaRecorder interface you could give extendable-media-recorder a try. It can be extended to record WAV files as well. Internally it uses either the native MediaRecorder or an AudioWorklet which should give you a little better performance as the ScriptProcessorNode. (full disclosure: I'm the author of extendable-media-recorder.)

Upvotes: 1

Related Questions