为何navigator.onchange/onended在手机上不触发？如何监听相机权限变更？

原代码依赖navigator.permissions的onchange事件和视频轨道的onended事件，在PC端正常，但移动端因浏览器API支持差异、系统权限通知机制限制，这些事件无法可靠触发。以下是几种可行的解决方案：

1. 定期轮询权限状态 #

这是移动端最可靠的监听方式，通过定时查询权限状态并对比变化来捕获权限变更：

let prevCamPermStatus;

// 初始化权限检查并启动轮询
async function initCamPermMonitor() {
  const camPerm = await navigator.permissions.query({ name: "camera" });
  prevCamPermStatus = camPerm.state;
  // 每2秒检查一次，可根据需求调整间隔
  setInterval(checkCamPermChange, 2000);
}

// 检查权限变化并处理
async function checkCamPermChange() {
  const camPerm = await navigator.permissions.query({ name: "camera" });
  if (camPerm.state !== prevCamPermStatus) {
    prevCamPermStatus = camPerm.state;
    console.log('相机权限变更:', camPerm.state);
    
    if (camPerm.state === 'denied') {
      // 权限被移除，执行停止视频流等操作
      stopActiveVideoTrack();
    }
  }
}

// 停止视频轨道
function stopActiveVideoTrack() {
  if (vTrack) {
    vTrack.stop();
    console.log('视频轨道已停止');
  }
}

// 页面加载时初始化监听
initCamPermMonitor();

2. 监听视频轨道错误事件 #

当用户移除权限后，视频流大概率会抛出错误，通过onerror事件可快速感知异常：

vTrack.onerror = (event) => {
  console.log('视频轨道异常:', event);
  // 异常触发时主动检查权限状态
  checkCamPermChange();
};

3. 结合页面可见性事件 #

用户修改权限通常需要切换到系统设置再返回页面，监听页面可见性变化，在页面回到前台时主动检查权限：

document.addEventListener('visibilitychange', async () => {
  if (!document.hidden) {
    // 页面回到前台，立即检查权限
    await checkCamPermChange();
  }
});

补充：兼容iOS Safari等特殊场景 #

部分移动端浏览器（如iOS Safari）对navigator.permissions.query("camera")支持有限，可通过尝试重新获取媒体流的方式判断权限：

async function checkCamPermissionViaStream() {
  try {
    const tempStream = await navigator.mediaDevices.getUserMedia({ video: true });
    tempStream.getTracks().forEach(track => track.stop());
    return 'granted';
  } catch (err) {
    return err.name === 'NotAllowedError' ? 'denied' : 'prompt';
  }
}

可将此方法替换轮询中的navigator.permissions.query，提升兼容性。

内容的提问来源于stack exchange，提问作者Hypothesis