JS如何获取浏览器声音、麦克风以及通知权限

今天遇到一个需求，后端socket推送警告消息，浏览器提示消息弹框和声音。但是初次打开页面发小声音播放失败，控制台报错：

错误内容：play() failed because the user didn't interact with the document first.

意思就是，用户没有在当前页面进行任何操作。

方案一：手动打开浏览器声音权限，在浏览器地址栏输入下面链接打开浏览器设置

（经过测试这个链接地址没有办法通过a标签和js打开）

Google浏览器：chrome://settings/content/sound

Firefox浏览器：about:preferences#privacy

Edge浏览器：edge://settings/content/mediaAutoplay

方案二：声音播放失败提示用户手动授权，只要用户跟当前页面存在交互，浏览器就不会存在这个错误。

// 加载声音
const sound = new Audio(`video.mp3`)
// 播放声音
sound.play()
.then((res) => {
    console.log('视频播放成功')
})
.catch((error) => {
    // if (error.message.indexOf('didn't interact') !== -1) 判断报错内容
    // 如果视频播放失败在这里弹出提示框
    alert('由于您的浏览器设置，报警声音无法自动播放，请点击确认按钮授权播放。')
})

这里说下目前没有发现获取声音权限和设置声音权限的API

上面是解决办法，下面讲一下浏览器获取麦克风、通知，视频权限

1、可以通过navigator.permissions.query API 查询浏览器权限是否开启。

// 查询麦克风权限
navigator.permissions.query({ name: 'microphone' })
.then((res) => {
    if (res.state === 'granted') {
       // 已授权
    }
})

// 查询相机权限
navigator.permissions.query({ name: 'camera' })
.then((res) => {
    if (res.state === 'denied') {
       // 拒绝授权
    }
})

返回的结果：{name: "", onchange: "", state: ""}

下面权限列表，都经过测试。

microphone           麦克风权限

camera                  相机权限

geolocation            地理位置信息

notifications。        网站显示桌面通知权限

....等权限

 2、可以通过navigator API 设置浏览器允许权限。

// 设置麦克风权限
navigator.mediaDevices.getUserMedia({ audio: true })
.then((res) => {
    // 允许麦克风权限
})
.catch((error) => {
    // 拒绝麦克风权限
})

navigator.geolocation.getCurrentPosition(
() => {
    // 允许地理位置权限
},
() => {
    // 拒绝地理位置权限
})

下面设置权限，都经过测试。

navigator.mediaDevices.getUserMedia({ audio: true }).then()      麦克风权限

navigator.mediaDevices.getUserMedia({ video: true }).then()      摄像头权限

navigator.geolocation.getCurrentPosition(callback)                     地理位置权限

Notification.requestPermission().then()                                        通知权限

.....等设置权限

 经过在Google、Firefox、Safari、Edge浏览器上测试，发现只有Google浏览器全部支持，其他浏览器只部分支持。

总结

到此这篇关于JS如何获取浏览器声音、麦克风以及通知权限的文章就介绍到这了,更多相关JS获取浏览器权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！