DOMException: Permission denied - navigator.mediaDevices.getUserMedia( );

Question

I am trying to access the webcam (more specifically the phone camera) using navigator.mediaDevices.getUserMedia(). However, no matter what I try, I am not getting the prompt to 'allow use of the camera'. I am primarily using Chrome. However, I have tried Brave & Edge, with the same result. Firefox does provide the prompt, although only for desktop. I have not been successful at all on any mobile browser.

To rule out some of the common answers I have found on StackOverflow and the web:

• Yes, permission is granted on my mac (Have also tested on Windows)
• No, I have not denied permission in the past
• I have tried both localhost and our https:// production server

I have tried several iterations of code with no success. Here is the the current code block doing the work:

  async function enableVideoStream() {
    try {
      console.log('In useUserMedia =>');
      const stream = await navigator.mediaDevices.getUserMedia(
        {
          audio: false,
          video: { facingMode: 'environment' },
        },
      );
      setMediaStream(stream);
    } catch (err) {
      console.log('err =>', err);
    }
  }

Here is my console log outputs:

In useUserMedia =>
err => DOMException: Permission denied

This is a React front-end, Rails back-end app.

Answer 1

Check the headers of your application. The feature policy has the ability to block hardware on the client side.

Make sure Feature-Policy: camera: none doesn't exist in your response headers.