0

I'm having a hard time recording my computer screen + all its audio interface (system + mic) with getDisplayMedia, however I'm using a code from a react js component which refers to this code

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

export default function useScreenRecording({
  displayMediaOptions = defaultDisplayMediaOptions,
  onEnd = () => {},
  onError = () => {},
  onStart = () => {},
} = {}) {
  const [captureStream, setCaptureStream] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [mediaRecorder, setMediaRecorder] = React.useState(null);
  const [isRecording, setIsRecording] = React.useState(false);
  const [recording, setRecording] = React.useState(null);

  
  const stopRecording = () => {
    try {
      setIsRecording(false);
      mediaRecorder.stop();
      captureStream.getTracks().forEach(track => track.stop());
    } catch (e) {
      onError(e);
      setError(e);
    }
  };
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia(
        displayMediaOptions,
      );

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

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

So far the recording is only managing to get the screen of my pc and the system's audio. Could anyone help me with this question. It is possible to record my pc screen plus all the audio outputs. I did a test recording with getUserMedia and its audio capture works 100% as I expect, but displayMedia doesn't do the same. Thank you in advance for your help

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Pedro Henrique
  • 1

1 Answers1

0

You can merge tracks from getUserMedia to to the displayMedia to get the audio from user mic.

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

export default function useScreenRecording({
  displayMediaOptions = defaultDisplayMediaOptions,
  onEnd = () => {},
  onError = () => {},
  onStart = () => {},
} = {}) {
  const [captureStream, setCaptureStream] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [mediaRecorder, setMediaRecorder] = React.useState(null);
  const [isRecording, setIsRecording] = React.useState(false);
  const [recording, setRecording] = React.useState(null);

  
  const stopRecording = () => {
    try {
      setIsRecording(false);
      mediaRecorder.stop();
      captureStream.getTracks().forEach(track => track.stop());
    } catch (e) {
      onError(e);
      setError(e);
    }
  };
  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);
    }
  };
Shubham Kumar
  • 538
  • 5
  • 12