22

I'm making a web app that needs to check whether user camera access permission has been granted or not using permission query.

I have tried the code:

navigator.permissions.query({name:'camera'}).then(function(result) {
 console.log(result);
});

It ran fine on Google Chrome 70 but gave me an error on firefox:

TypeError: 'name' member of PermissionDescriptor 'camera' is not a valid value for enumeration PermissionName.

I have been searching for this issue but nothing helped.

Can anyone help me please ?

Thanks,

Redplane
  • 2,971
  • 4
  • 30
  • 59

1 Answers1

34

The Permissions API is marked as an experimental technology.

The issue is that Firefox does have navigator.permissions and support the query method on it, too, however, it does not support all the permission names that are listed on MDN's Permissions API page.

You can try this yourself: go to the console on Firefox and execute

// geolocation is working fine
navigator.permissions.query({ name: 'geolocation' }).then(console.log)

// camera, microphone is not supported, throws
navigator.permissions.query({ name: 'camera' })
// TypeError: 'name' member of PermissionDescriptor 'camera' is not a valid value for enumeration PermissionName.
navigator.permissions.query({ name: 'microphone' })
// TypeError: 'name' member of PermissionDescriptor 'microphone' is not a valid value for enumeration PermissionName.

There is an open discussion on Github in the mozilla/standards-positions about their position on the Permissions API. To be honest, as I see, they did not reach any conclusion yet.

What you can do is you create a basic functionality that works on all browsers without the permissions information and on Chrome, you progressively enhance the user experience by using the Permissions.query for figuring out the permissions for camera and microphone.

Alternatively, you can come up with some logic to handle this using MediaDevices.getUserMedia: for example, you can call getUserMedia and immediately stop the tracks, if the only thing you want is to ensure you app has permissions granted for microphone and camera. Be careful though, there are multiple problems with this:

  1. the camera light will be turned on for a second
  2. if your user denies permission, you will have a hard time asking for it again, so before you ask for permission, you should clarify to your users why you need these permissions
Vince Varga
  • 6,101
  • 6
  • 43
  • 60
  • This method is working. But how can I get the state. For example if state = 'granted' I wanna change the UI little bit – deluxan May 18 '20 at 04:13
  • 1
    My understanding is that it's not possible to do that in a way that works on all popular browsers. Keep in mind it was 2018 I worked with these APIs. > What you can do is create a basic functionality that works on all browsers without the permissions information and on Chrome, you progressively enhance the user experience by using the Permissions.query for figuring out the permissions for camera and microphone. – Vince Varga May 18 '20 at 07:20
  • 1
    It is Sept 2020. Safari 14 doesn't appear to have a navigator.permissions object. FF 80 still doesn't support the name: 'camera' nor name: 'microphone'. For FF adding a catch to the promise returned from .query() at least allows you an edge to maintain some state so you know you can't subscribe to updates. I found this necessary to keep track of anyway to conditionally cancel the event listener. – Blaine Garrett Sep 27 '20 at 15:34
  • stopping all tracks immediately after fetching permission is not removing the camera light for me. – Shubham Gautam Mar 07 '21 at 12:27
  • 3
    In March 2023, Firefox 111 still has no "microphone" in PermissionName. – John Rizzo Mar 17 '23 at 14:34