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浏览器全部支持，其他浏览器只部分支持。