I am having a issue in bining two audio tracks into one, in order to add the whole merged audio to a video track.

  this.promises = [navigator.mediaDevices.getUserMedia({ audio: true, video: true })];
  if (navigator['getDisplayMedia']) {
    this.promises.push(navigator['getDisplayMedia'](this.streamConstraints));
  }
  else if (navigator.mediaDevices['getDisplayMedia']) {
    this.promises.push(navigator.mediaDevices['getDisplayMedia'](this.streamConstraints));
  }
  else {
    this.promises.push(navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' } as any }));
  }
  Promise.all(this.promises)
    .then((streams) => {
      // so here is the microphone audio and webcam video
      const avTracks = streams[0].getTracks();
      // here is the screen video and audio
      const screenRecordTracks = streams[1].getTracks();
      const firstAudioTrack = new MediaStream(avTracks).getAudioTracks();
      const secondAudioTrack= new MediaStream(screenRecordTracks ).getAudioTracks();

  // so here I want to merge these two audio tracks, and them to add this final track to the first video track like so..
  const wholeRecord = new MediaStream(avTracks).getVideoTracks(); + the merged audio track

How can I merge them into one track, can somebody help me please?

I am having a issue in bining two audio tracks into one, in order to add the whole merged audio to a video track.

  this.promises = [navigator.mediaDevices.getUserMedia({ audio: true, video: true })];
  if (navigator['getDisplayMedia']) {
    this.promises.push(navigator['getDisplayMedia'](this.streamConstraints));
  }
  else if (navigator.mediaDevices['getDisplayMedia']) {
    this.promises.push(navigator.mediaDevices['getDisplayMedia'](this.streamConstraints));
  }
  else {
    this.promises.push(navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' } as any }));
  }
  Promise.all(this.promises)
    .then((streams) => {
      // so here is the microphone audio and webcam video
      const avTracks = streams[0].getTracks();
      // here is the screen video and audio
      const screenRecordTracks = streams[1].getTracks();
      const firstAudioTrack = new MediaStream(avTracks).getAudioTracks();
      const secondAudioTrack= new MediaStream(screenRecordTracks ).getAudioTracks();

  // so here I want to merge these two audio tracks, and them to add this final track to the first video track like so..
  const wholeRecord = new MediaStream(avTracks).getVideoTracks(); + the merged audio track

How can I merge them into one track, can somebody help me please?

• javascript
• angular
• audiotrack
• mediastream

• What have you tried so far to solve this on your own? – Andreas Commented Nov 6, 2020 at 16:16
• I have no idea, man. I just found out that it is not possible to have two audio tracks, because one will not work. – Teodor Kostadinov Commented Nov 6, 2020 at 16:17

1 Answer 1

I was able to do this by using Web Audio API. I fetched the audio tracks from both the streams and joined them into one using audio context.

var OutgoingAudioMediaStream = new MediaStream();
OutgoingAudioMediaStream.addTrack(OutgoingStream.getAudioTracks()[0]);

var IningAudioMediaStream = new MediaStream();
IningAudioMediaStream.addTrack(IningStream.getAudioTracks()[0]);

const audioContext = new AudioContext();

audioIn_01 = audioContext.createMediaStreamSource(OutgoingAudioMediaStream);
audioIn_02 = audioContext.createMediaStreamSource(IningAudioMediaStream);

dest = audioContext.createMediaStreamDestination();

audioIn_01.connect(dest);
audioIn_02.connect(dest);

var FinalStream = dest.stream;

This worked perfectly.