javascript - 检测解除设备限制

Question

使用 getUserMedia让用户选择麦克风。此外，我使用 enumerateDevices使用设备创建选择，以便用户可以从 UI 更改设备。

我在 Firefox 上，并没有检查其他浏览器的表现如何，但至少对于 FF 我还没有找到解决方案。

如果用户在被询问时选择不允许访问，则在用户取消限制之前不会再次询问^{[ 1 ]}:

问题是是否有办法检测用户何时取消限制？

场景通常是:

1. 用户加载页面并被要求选择输入设备

2. 用户拒绝

   UI disables device selector + hide various stuff
   

3. 用户解除限制(如上图所示)

   UI enables device selector + unhide various stuff
   

(显然)没有办法通过 Java Script 从客户端重置阻止，但是有没有办法检测到用户撤销了阻止？ (或者有吗？听起来像是可以用来不断循环访问请求的东西。)

可以做一个循环，在该循环中不断尝试页面的生命周期，但希望避免这种情况。为此寻找事件。

在这方面，ondevicechange , 当 block 被移除时不会触发事件 - 这在某种程度上是合乎逻辑的，因为可用设备在某种程度上没有变化 :P。

---

^{[ 1 ]} 即:可以问，但结果是:

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

Answer 1

您应该能够从 Permissions API 中检测到此更改.

PermissionStatus Permissions.prototype.query() 返回的对象有一个 onchange 事件处理程序。因此，当用户更改其设置时，对 “camera” 或 “microphone” 的查询将触发其更改事件。

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

  }
};

当前 works in Chrome , 但 Firefox 仍然不支持PermissionDescriptor 的"camera" 和"microphone" 成员。因此对于该浏览器，我们可以拥有的最接近的是通过轮询，如本问答中所述:Event listener that "camera and microphone blocked" is allowed .