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

Question

我编写了一个脚本，允许我们网站的访问者录制音频，然后将文件保存在我们的服务器上。

一切都很完美，直到我注意到，如果用户没有给予许可，但无论如何都按下了录制按钮，脚本就会崩溃。因此，我包括以下内容以确保授予权限：

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

不幸的是，这不适用于iOS Safari，因此在这种情况下会导致再次崩溃。我找到了几个关于这个主题的线程，但没有一个适用于iOS的解决方案。但一定有一个，对吧？如果我们无法确保授予权限，并且在拒绝麦克风访问的情况下录制也会导致崩溃，我们应该如何在 iPhone 上录制音频？

我希望任何人都有一个想法。提前谢谢。 丹尼尔

Answer 1

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

然而，从 kafinsalim 解决相同问题的答案来看，所有主要浏览器都支持地理位置对象。直接访问 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
}

Answer 2

请尝试这个。

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