ios - iOS Safari 的 navigator.permissions.query 替代品
问题描述
我编写了一个脚本,允许我们网站的访问者录制音频,然后将文件保存在我们的服务器上。
一切都很顺利,直到我注意到,如果用户没有给予他的许可但无论如何按下了录制按钮,脚本就会崩溃。因此,我将其包括在内以确保授予权限:
navigator.permissions.query({name:'microphone'}).then(function(result) {
if (result.state == 'granted') {
//GRANTED
} else if (result.state == 'denied') {
//DENIED
}
});
不幸的是,这不适用于 iOS Safari,因此在这种情况下会再次导致崩溃。我找到了几个关于这个主题的主题,但没有找到一个适用于 iOS 的解决方案。但一定有一个,对吧?如果我们无法确保已授予权限并且在拒绝麦克风访问的情况下录制也会导致崩溃,我们应该如何在 iPhone 上录制音频?
我希望任何人都有一个想法。提前致谢。丹尼尔
解决方案
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
}
推荐阅读
- spring - 如何修复'从'XXX'重定向到'YYY'已被cors策略阻止
- javascript - Vue.js 如何在渲染完成后使用 vue-router 创建自定义链接?
- r - 如何在 ggtree 的 `facet_plot` 中为构面添加图例?
- javascript - try / catch / finally 不是多余的吗?
- azure-devops - Azure devops 中的 Publish Artifact 任务在自动触发时失败,但在手动排队时通过
- laravel - 在 Laravel 中重用控制器/模型
- android - 如何在 Jetpack compose 中使用 EditText 或 TextInput 小部件?
- uefi - 更新 EFI 分区表缓存
- php - 如何在不使用内置函数的情况下在 php 中找到一个数组的缺失元素到另一个数组?
- webview - 在启动画面处于活动状态时,是否有办法加载 webview?