iOS Safari的navigator.permissions.query替代方案

Question

我编写了一个脚本，让我们网站的访问者可以录制音频并将文件保存到我们的服务器上。

一切都很完美，直到我发现，如果用户没有授权但仍然按下录制按钮，脚本会崩溃。因此我添加了以下内容以确保已经获得授权：

navigator.permissions.query({name:'microphone'}).then(function(result) {
 if (result.state == 'granted') {
 //GRANTED
 } else if (result.state == 'denied') {
  //DENIED
 }
});

很遗憾，这种方法无法在iOS Safari上使用，因此在这种情况下会再次导致崩溃。我找到了一些关于这个问题的讨论，但是在iOS上没有一个解决方案。但肯定有一个解决方案，对吧？如果我们不能确定已经被授权，而在麦克风访问被拒绝的情况下进行录音也会导致崩溃，那么我们应该如何在iPhone上记录音频呢？

希望有人能想到一个办法。提前致谢。 丹尼尔

- HenryChinaski

Answer 1

MDN Navigator.permissions (最后编辑于2021-09-14)提到这是一项“实验性技术”，兼容性表格显示Safari在MAC和移动设备上均不支持（IE和Android WebView也一样）。

然而，从kafinsalim的回答中解决同样的问题可以看出，geolocation对象在所有主流浏览器上都得到支持。直接访问navigator.geolocation而不检查权限会引发权限提示而不会抛出错误。

因此，如果您仍需要使用navigator.permissions，请检查userAgent：

if (!/(safari))/i.test(navigator.userAgent)) {
  navigator.permissions.query({ name: 'geolocation' }).then(({state}) => {
    switch(state) {
      case 'granted':
        showMap();
        break;
      case 'prompt':
        showButtonToEnableMap();
        break;
      default:
        console.log('Geo permitions denied');
  }});
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions#examples
} else {
  // Safari bypassing permissions
  navigator.geolocation.getCurrentPosition(
   pos => console.log('success', pos.coords),
   e => console.log('failed', e)
  );
// https://w3c.github.io/geolocation-api/#handling-errors
}

- CPHPython

---

你的回答如何与最初要求麦克风的问题相关？ - Jimmy

@Jimmy navigator.permissions.query({name:'WHATEVER'}) 在Safari中不受支持，因此我能够通过测试userAgent并使用该浏览器支持的另一个对象来避免OP提到的崩溃：在我的情况下是navigator.geolocation，对于他的情况navigator.mediaDevices可能有所帮助（请注意，问题提到了**替代navigator.permissions.query**的方法）。 - CPHPython

这里的提问者询问如何检查音频权限，我们建议检查地理位置。这听起来有些矛盾。唯一能帮助解决问题的是mediadevices。 - Jimmy

并不是真的解决了应用程序崩溃问题，而是通过使用userAgent检查来防止.permissions的使用。如果Safari不支持与麦克风相关对象的其他用途，那么这是浏览器的问题，我只是提供了一个“permissions.query替代方案”的解决方案。你试过mediaDevices吗？ - CPHPython

是的，mediaDevices 只能帮助检查苹果设备的音频访问权限。地理位置检查无法回答这个问题，因为提问者正在寻找检查麦克风使用情况的替代方法。 - Jimmy

Answer 2

请试试这个。

navigator.permissions.query({name:'microphone'}).then(function(result) {
 if (result.state === 'granted') {
    //GRANTED
 } else if (result.state === 'denied') {
  //DENIED
 }
});

- Kevin Baldha

---

谢谢你的提示。你只是把“==”改成“===”了吗？不幸的是，这并没有改变任何东西... - HenryChinaski