How to record audio too?

[ZulluBalti]

I want to record both user's mic audio and ouput from the speaker. How can I do that?

[Asirimihindu]

//I joined the audio stream from Mic with the video stream from screen capture , making {audio:true } in //navigator.mediaDevices.getUserMedia did not work for some reason let audioTrack, videoTrack; ...... async function selectSource(source) {

videoSelectBtn.innerText = Capturing ${source.name}..;

const constraints = { audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: source.id,

  }

}

};

// Create Streams for audio and video separately and then combining them into one stream
const videostream = await navigator.mediaDevices.getUserMedia(constraints); const audiostream = await navigator.mediaDevices.getUserMedia({video:false,audio:true}); [videoTrack] = videostream.getVideoTracks(); [audioTrack] = audiostream.getAudioTracks(); //combining them into one stream
var stream = new MediaStream([videoTrack, audioTrack]);

// Preview the source in a video element videoElement.srcObject = stream; videoElement.play(); videoElement.muted=true;

[DracoCoder]

If You want to record desktop audio you need to change the following code.

Instead of This:

const constraints = {
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: source.id
      }
    }

Write This:

const constraints = {
    audio: {
      mandatory: {
        chromeMediaSource: 'desktop'
      }
    },
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: source.id
      }
    }

And Mute The Audio In Preview By Adding This:: ... // Preview the source in a video element videoElement.srcObject = stream; videoElement.play();

 //Mute Preview
  videoElement.muted = true;

[akshaygarg7]

@Asirimihindu @DracoCoder I tried the settings suggested above to record screen, speaker output, mic input -

const constraints = {
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop'
    }
  },
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: source.id
    }
  }
}

const videostream = await navigator.mediaDevices.getUserMedia(constraints);

const audiostream = await navigator.mediaDevices.getUserMedia({video:false,audio:true});

[videoTrack] = videostream.getVideoTracks();
[audioTrack] = audiostream.getAudioTracks();

//combining them into one stream
var stream = new MediaStream([videoTrack, audioTrack]);

var recorder = MediaRecorder(stream);
recorder.start()

When I playback recording, voice of audio captured from audio stream is clear but voice of audio track from video stream is not very clear. did you face similar issue or do you have any suggestions ?