如何检测麦克风权限状态

Question

我希望向用户显示不同的模式，以引导他们在我的应用程序中尝试使用麦克风需要任务时允许他们的权限 - 基于他们是否尚未被请求麦克风权限、授予权限或被阻止的权限。

如何可靠地找出用户所处的权限状态？最好使用onChange 处理程序来了解用户是否在任何时候撤销他们的权限以及适用于 Chrome、Firefox 和 Safari 的内容。

灵感来自voice.google.com，当他们在麦克风权限设置为“询问”、“允许”或“阻止”的情况下尝试拨打 Google 语音号码时，会在通话小部件上显示不同的屏幕。

我已经完成了https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web，但我似乎无法找到我希望如何实现它的解决方案。

编辑：

<div id="button">Click me</div>
<script>
  const button = document.getElementById("button")
  button.addEventListener('click', () => {
    navigator.mediaDevices.getUserMedia({
        audio: true
      })
      .then(function(stream) {
        console.log('You let me use your mic!')
        console.log(stream)
        navigator.permissions.query({
          name: 'microphone'
        }, ).then(function(permissionStatus) {
          console.log("PermissionStatus: ", permissionStatus.state); // granted, denied, prompt
          permissionStatus.onchange = function() {
            console.log("Permission changed to " + this.state);
          }
        })
      })
      .catch(function(err) {
        console.error(err)
        console.log('No mic for you!')
      });
  })
  navigator.permissions.query({
      name: 'microphone'
    })
    .then(function(permissionStatus) {
      console.log("PermissionStatus: ", permissionStatus.state); // granted, denied, prompt
      permissionStatus.onchange = function() {
        console.log("Permission changed to " + this.state);
      }
    })

</script>

Answer 1

名称是“麦克风”，您将获得“授权”、“提示”或“拒绝”作为状态。 https://developers.google.com/web/fundamentals/media/recording-audio#use_the_permissions_api_to_check_if_you_already_have_access