3

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.

DigitalM0nkey
  • 127
  • 1
  • 3
  • 8

1 Answers1

3

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.

jordan sandberg
  • 182
  • 2
  • 10
  • 1
    If you have a Rails backend, make sure you check application.rb as the feature-policy could be hiding there. – DigitalM0nkey Jun 07 '21 at 18:41
  • Thanks. That was exactly the problem on my end. The microphone was disabled thru the Permissions-Policy header. The Voice Search feature in Algolia was not working anymore. – Guy Dumais May 02 '22 at 01:05