Question

我希望在加载时检测我的网站上是否已授予麦克风权限，而不实际执行以下操作：

navigator.webkitGetUserMedia({audio: active}, 
    function(){alert('worked')}, 
    function(){alert('failed')});

是否有一个简单的API来检测用户是否已永久授予我的应用程序（通过https运行）的麦克风访问权限？

Answer 1

你可能希望它可以从权限api访问，但它不是：（

也许在这个功能中，这可以像其他部分一样工作：

navigator.permissions.query(
    // {name: 'video'}  <-- doesn't work
    // {name: 'audio'}  <-- doesn't work
    {name: 'geolocation'}
    // {name: 'notifications'} 
    // {name: 'midi', sysex: false}
    // {name: 'midi', sysex: true}
    // {name: 'push', userVisibleOnly: true}
    // {name: 'push'} // without userVisibleOnly isn't supported in chrome M45, yet
).then(function(permissionStatus){

    console.log(permissionStatus.state); // granted, denied, prompt

    permissionStatus.onchange = function(){
        console.log("Permission changed to " + this.state);
    }

})

我认为可能的唯一方法是，当您请求许可时，您可以使用localStorage中的键/值项自行跟踪。

不幸的是，它在更改后没有通知您

// initialization
if( localStorage.getItem("voice_access") === null ){
    // just assume it is prompt
    localStorage.setItem("voice_access", "prompt");
}

// Then somewhere
navigator.getUserMedia({audio: true}, function(e){

    // http://stackoverflow.com/q/15993581/1008999
    //
    // In chrome, If your app is running from SSL (https://),
    // this permission will be persistent.
    // That is, users won't have to grant/deny access every time.
    localStorage.setItem("voice_access", "granted");

}, function(err){
    if(err.name == "PermissionDismissedError"){
        localStorage.setItem("voice_access", "prompt");
    }
    if(err.name == "PermissionDeniedError"){
        localStorage.setItem("voice_access", "denied");
    }
});

你可以加倍努力，使用上面的代码构建一个漂亮的小包装器，并扩展/替换权限api以处理更多的枚举名称，并创建一个broadcast api，以便在其更改时告诉其他选项卡。但为什么要这么复杂......？ localStorage不可100％受信任。它可以在任何时候在允许和存储空间清除的情况下随时更改

Answer 2

您已经获得了用于检查权限的轮询方法。以下是来自MDN的一些信息： https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia

还有一些：https://developer.mozilla.org/en-US/docs/WebRTC

这是一个例子：

navigator.getMedia (
// constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },

   // errorCallback
   function(err) {
    console.log("The following error occured: " + err);
   }

);

Answer 3

navigator.getUserMedia现在已过时，取而代之的是MediaDevices.getUserMedia，它返回了一个承诺。如果承诺被拒绝，您将得到一个DOMException并带有问题指示。权限不足是其中一种选择。

详细信息在这里： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

如何检测Chrome中是否已授予麦克风权限

3 个答案: