Detect removal of restriction of devices

user_3342816 0
Viewed 443

Using getUserMedia to let user select microphone. Further I use enumerateDevices to create a select with devices so that user can change device from UI.

I am on Firefox and have not checked how others browsers fare, but at least for FF I have not found a solution.

If user selects to not allow access when asked one do not get to ask again[ 1 ] until user removes the restriction:

enter image description here

Question is if there is a way to detect when user removes the restriction?

Scenario is typically:

  1. User loads page and are asked to select input device

  2. User rejects

    UI disables device selector + hide various stuff

  3. User removes restriction (as per picture above)

    UI enables device selector + unhide various stuff

There is (obviously) not a way to reset the block from client side by Java Script, but is there a way to detect that user revokes the block? (Or is there? Sounds like something that could be exploited to keep looping a request for access.)

One could do a loop where one keep trying for the lifetime of the page, but would like to avoid that. Looking for an event for this.

In that regard, ondevicechange, does not trigger an event when block is removed - which is logical in a way as there is not a change in the available devices, in a way :P.

[ 1 ] That is: one can ask, but it result in a:

MediaStreamError
message: The request is not allowed by the user agent or the platform in the current context.
name: NotAllowedError ​

mediadevices media javascript
1 Answers

You should be able to detect this change from the Permissions API.

The PermissionStatus object returned by Permissions.prototype.query() has an onchange event handler. So a query to the "camera" or "microphone" will fire its change event when the user changes their setting.

const camera_perm = await navigator.permissions.query( { name: 'camera' } );
camera_perm.onchange = (evt) => {
  const allowed = camera_perm.state === "granted";
  if( allowed ) {
    // ...
  }
  else {

  }
};

This currently works in Chrome, but Firefox still doesn't support neither the "camera" nor the "microphone" members of PermissionDescriptor. So for that browser, the closest we can have is through polling, as explained in this Q/A: Event listener that "camera and microphone blocked" is allowed .

user_37027970
Related