在请求之前检测UserMedia权限

Question

我想向用户解释为什么在询问之前需要相机/麦克风,这样如果他们想要授予它们,他们可以做出更好的选择.

为了实现这一点,我需要一种方法来检测先前是否已经授予了权限,以便我可以在实际询问之前向用户解释该请求.我也不想每次都问(即使我已经拥有权限!).

Answer 1

navigator.mediaDevices.enumerateDevices().then(devices => 
  devices.forEach(device => console.log(device.label)))

尚未允许时device.label ==""
允许时使用device.label!=""

Answer 2

使用 cookie 或localStorage记住您之前问过他们并得到了肯定。

某些浏览器允许用户授予每次使用摄像头或麦克风的权限，因此如果您的指标是您不想每次都询问他们，那么不要将您的消息与您是否已被授予永久访问权限联系起来。

navigator.mediaDevices.enumerateDevices另一个答案中提到的技巧目前可以很好地检测到对相机和/或麦克风的持久许可- 但您不知道是哪一个，或者您是否已被授予两者。

此外，这可能会随着时间的推移而中断，因为最近更新了规范以将标签访问与相机和/或麦克风的持久访问分开，部分是为了更好地支持一次性许可用例。一旦浏览器更新到规范，在这些情况下就不再意味着持久的摄像头和/或麦克风许可。

是否持久化权限的长期答案是使用query，但正如您从运行中看到的那样，浏览器尚不支持"camera"和"microphone"（或在某些情况下根本不支持）：

navigator.permissions.query({name: "camera"})
.then(({state}) => console.log(state),
      e => console.log(e.name +": "+ e.message));