本文旨在解决移动端浏览器中 navigator.permissions.query({ name: "camera" }) 的 onchange 事件无法触发的问题。通过监听 PermissionStatus 对象的 state 属性变化，并利用 permissionStatus.onchange 事件，开发者可以有效地在手机端检测相机权限的变更，并根据用户操作做出相应处理。
在Web开发中，有时我们需要监听用户对特定权限的更改，例如相机权限。虽然 navigator.permissions.query 方法在PC端可以正常触发 onchange 事件，但在某些移动设备上，这个事件可能无法按预期工作。 这会导致无法及时响应用户对权限的更改，影响用户体验。本文将介绍一种在移动端可靠地监听相机权限变更的方法。
使用 PermissionStatus.onchange 监听权限变更
核心思想是利用 PermissionStatus 对象及其 onchange 事件。 navigator.permissions.query 方法返回一个 Promise，其 resolve 的值是一个 PermissionStatus 对象。 我们可以监听这个对象的 state 属性，该属性反映了权限的状态（例如 "granted", "denied", "prompt"）。
以下代码展示了如何使用 PermissionStatus.onchange 来监听相机权限的变更：
navigator.permissions
.query({ name: "camera" })
.then((permissionStatus) => {
console.log(`camera is set to ${permissionStatus.state}`);
permissionStatus.onchange = () => {
console.log(
`the camera permissions have been changed: ${permissionStatus.state}`
);
// 在这里添加处理权限变更的逻辑
if (permissionStatus.state === 'granted') {
// 用户授予了相机权限
console.log('Camera permission granted!');
} else if (permissionStatus.state === 'denied') {
// 用户拒绝了相机权限
console.log('Camera permission denied!');
} else {
// 权限状态为 prompt，通常表示用户尚未做出选择
console.log('Camera permission is in prompt state.');
}
};
});代码解释：
- navigator.permissions.query({ name: "camera" }): 此方法查询相机权限的状态，并返回一个 Promise。
- .then((permissionStatus) => { ... }): 当 Promise resolve 时，执行此回调函数，permissionStatus 对象包含了权限的状态信息。
- console.log(\camera is set to ${permissionStatus.state}`);`: 打印当前相机权限的状态。
- permissionStatus.onchange = () => { ... }: 将一个函数赋值给 permissionStatus.onchange 属性。 当权限状态发生变化时，这个函数将被调用。
- console.log(\the camera permissions have been changed: ${permissionStatus.state}`);: 在onchange` 回调函数中，打印新的相机权限状态。
- if (permissionStatus.state === 'granted') { ... } else if (permissionStatus.state === 'denied') { ... } else { ... }: 根据不同的权限状态，执行相应的逻辑。
注意事项：
- 兼容性： navigator.permissions API 的兼容性需要考虑。 在使用前，建议检查浏览器是否支持该 API。
- 用户体验： 当用户更改权限时，应向用户提供清晰的反馈。 例如，如果用户拒绝了相机权限，应显示一条消息，告知用户该操作的影响，并提供重新授权的选项。
- HTTPS： 权限 API 通常只能在 HTTPS 环境下使用。
总结：
通过监听 PermissionStatus.onchange 事件，我们可以有效地在移动端检测相机权限的变更，并根据用户操作做出相应处理。 这种方法比简单地依赖 navigator.permissions.query 的 onchange 事件更加可靠。 在开发需要访问设备权限的 Web 应用时，请务必考虑移动端的兼容性，并提供良好的用户体验。
