My intention is to show the user proper message depending upon on the browser permissions of the user ie. if the permission is not already given show something like "allow access", if the permission is already provided, then show no user feedback at all.

But with navigator.mediaDevices.getUserMedia(), only depending upon the success or failure of the promise, I can know the status. This results in showing the message(Allow access message) for tiny bit of time, which is not great.

message.info("Please allow access");
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
  console.log("received accesss");
}).catch(err => console.log(err));

BTW, i'm using React but the problem is same for any Library. Also, the navigators.permissions API is still experimental and not supported in Safari, hence need a cross browser way to resolve this. Thanks in advance.

My intention is to show the user proper message depending upon on the browser permissions of the user ie. if the permission is not already given show something like "allow access", if the permission is already provided, then show no user feedback at all.

But with navigator.mediaDevices.getUserMedia(), only depending upon the success or failure of the promise, I can know the status. This results in showing the message(Allow access message) for tiny bit of time, which is not great.

message.info("Please allow access");
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
  console.log("received accesss");
}).catch(err => console.log(err));

BTW, i'm using React but the problem is same for any Library. Also, the navigators.permissions API is still experimental and not supported in Safari, hence need a cross browser way to resolve this. Thanks in advance.

• javascript
• reactjs

• 1 No, there's no way to detect if your page already has permissions. You can infer it by seeing how long it takes for the promise to resolve but, by then, the popup has already shown. – Ouroborus Commented Dec 29, 2020 at 6:57
• Yeah precisely the issue, Thanks for answer – Morsh Commented Dec 29, 2020 at 7:03

1 Answer 1

The Permissions API should do just that.

For the camera you'd do

const permission = await navigator.permissions.query( { name: "camera" } );

and for the microphone

const permission = await navigator.permissions.query( { name: "microphone" } );

Which would return a PermissionStatus object with its .state set either to 'granted', 'denied', or 'prompt'.

But unfortunately, as you noted, camera and microphone permissions are still only supported in Chrome.

In browsers that don't support it, you could try to read the .label of a device, if this value is set, you have some rights, otherwise, either it will prompt, either it was denied.

const not_granted = !(await navigator.mediaDevices.enumerateDevices())[0].label;

But note that it only tells you that you don't have any permissions granted. You could very well only have the ones for the microphone and it would still expose that information, even if your application has been denied to access the camera.