Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to record audio from output device without sharing the screen

I’m working on a ReactJS project with a feature that needs to record the system audio output (the audio output of the device, not the user’s microphone input).

I know that I can use navigator.mediaDevices.getDisplayMedia() to get a stream from the system audio output. However, this approach requires obtaining the authorization to stream the whole screen, which would lead to some user refusing to grant the authorization.

Is there any way to record the system audio output with less intrusive authorization from the user ?

edit to be clearer: The idea isn’t to have no authorization from the user at all, but only audio related authorization (getDisplayMedia() requires authorization to stream the screen).

Tags:

2

Answers


  1. 0

    Use the MediaDevices.enumerateDevices() method to list all the input and output media devices available.

    If an audio device is available then use

    MediaDevices.getUserMedia({
  audio: true
});

    As for bypassing authorization, that would be almost impossible with most browsers due to security reasons, the users will have to agree to the fact that you will be recording their speaker.

    But with the above method, the request to record audio would be
    less scary for the user than a permission asking to record the entire screen.

    Documentation links:

    Login or Signup to reply.
  2. 0

    I think you have to use useRef hook function for your purpose

    const [stream, setStream] = useState(null);
const videoRef = useRef();

const startCapture = async () => {
    try {
      const captureStream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: 'screen:0',
          },
        },
      });
      setStream(captureStream);
      videoRef.current.srcObject = captureStream;
    } catch (err) {
      console.error('Error accessing media devices: ', err);
    }
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search