在移动端 Web 开发中，监听用户对相机等设备权限的变更至关重要。navigator.permissions.query 方法可以用来查询权限状态，但直接使用其 onchange 事件在移动设备上可能会失效。本文将介绍一种更可靠的方法，利用 PermissionStatus 对象及其 state 属性来监听权限变更。
使用 PermissionStatus 监听权限变更
首先，我们需要使用 navigator.permissions.query 方法查询相机权限状态。这个方法返回一个 Promise，resolve 的结果是一个 PermissionStatus 对象。
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}`
);
};
});代码解释：
- navigator.permissions.query({ name: "camera" }): 查询相机权限状态。
- .then((permissionStatus) => { ... }): 当权限查询成功后，执行回调函数，permissionStatus 是一个 PermissionStatus 对象。
- console.log(\camera is set to ${permissionStatus.state}`);: 打印当前相机权限状态。permissionStatus.state属性表示权限状态，可能的值包括"granted"(已授权),"denied"(已拒绝), 和"prompt"` (需要用户授权)。
- permissionStatus.onchange = () => { ... };: 为 PermissionStatus 对象绑定 onchange 事件。当权限状态发生变化时，该事件会被触发。
- console.log(\the camera permissions have been changed: ${permissionStatus.state}`);: 在onchange` 事件处理函数中，打印新的权限状态。
示例
以下是一个更完整的示例，展示了如何根据权限状态采取不同的操作：
navigator.permissions
.query({ name: "camera" })
.then((permissionStatus) => {
console.log(`camera is set to ${permissionStatus.state}`);
// 根据初始权限状态执行操作
if (permissionStatus.state === "granted") {
console.log("相机权限已授权，可以访问相机");
// 访问相机的代码
} else if (permissionStatus.state === "denied") {
console.log("相机权限已被拒绝，无法访问相机");
// 显示提示信息，引导用户开启权限
} else {
console.log("相机权限需要用户授权");
// 显示授权提示
}
permissionStatus.onchange = () => {
console.log(
`the camera permissions have been changed: ${permissionStatus.state}`
);
// 根据新的权限状态执行操作
if (permissionStatus.state === "granted") {
console.log("相机权限已授权，可以访问相机");
// 访问相机的代码
} else if (permissionStatus.state === "denied") {
console.log("相机权限已被拒绝，无法访问相机");
// 显示提示信息，引导用户开启权限
} else {
console.log("相机权限需要用户授权");
// 显示授权提示
}
};
});注意事项
- 兼容性： 确保目标浏览器支持 navigator.permissions API。 可以使用特性检测来检查浏览器是否支持该 API： if ("permissions" in navigator) { ... }
- 用户体验： 当相机权限被拒绝时，应该向用户提供清晰的提示信息，说明为什么需要相机权限，并引导用户手动开启权限。
- 安全性： 始终遵循最佳安全实践，仅在必要时请求相机权限，并在使用完相机后及时释放资源。
总结
通过使用 PermissionStatus 对象及其 state 属性，并结合 onchange 事件监听，我们可以有效地监听移动端相机权限的变更，并根据权限状态做出及时响应。这种方法比直接使用 navigator.permissions.query 的 onchange 事件更加可靠，可以提升用户体验，并确保应用程序能够正确处理权限变更的情况。
