Recording multiple streams with different media (getUserMedia and getDisplayMedia)

482 / 5000

Hello community, I’m wanting to start a screen recording with javascript, where I want to mix the system audio streams + the user’s microphone along with the pc screen video stream. I was told that it would be possible to do this by mixing the streams, but I made some modifications to my code and no results were expected. Could someone help me with this question please? I appreciate the help in advance. Below is an example of code that I tried to implement.

const defaultDisplayMediaOptions = {
  video: {
    cursor: "never",
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,
  },
};

const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia(
        displayMediaOptions,
      );
      const audioStream = await navigator.mediaDevices.getUserMedia({audio:true})

      setIsRecording(true);
      stream.getTracks().forEach(track => {
        track.onended = stopRecording;
      });
      audioStream.getAudioTracks().forEach(track=>{
          stream.addTrack(track);
      });

      setCaptureStream(stream);
      const recorder = new MediaRecorder(stream);
      recorder.ondataavailable = event => {
        onEnd(event);
        setRecording(event.data);
      };
      recorder.start();
      setMediaRecorder(recorder);
      onStart({ stream, recorder });
    } catch (e) {
      setIsRecording(false);
      onError(e);
      setError(e);
    }
  };