提升用户授权体验的关键是清晰、必要、可预期的权限请求：①前置说明用途，如“开启摄像头，用于实时美颜试妆”；②延迟至用户主动操作后触发；③提供无权限时的降级方案；④复用权限并同步设备状态。
提升用户授权体验的关键，不是堆砌更多提示框，而是让每一次权限请求都清晰、必要、可预期。用户拒绝往往源于困惑或被打扰，而非抵触功能本身。
明确告知用途，避免模糊请求
用户看到“是否允许访问摄像头”时，如果不知道为什么需要它，大概率会点“拒绝”。应在触发权限请求前，用简短文案说明具体用途。
- 不要写：“需要访问您的摄像头”
- 要写：“开启摄像头，用于实时美颜试妆” 或 “扫描二维码快速登录”
- 把用途嵌入按钮文案或前置弹层中，例如：“打开相机扫码” 比 “获取权限” 更易获得同意
延迟请求，绑定真实交互场景
页面一加载就弹出地理位置或麦克风请求，不仅违反浏览器策略（多数会静默拦截），也破坏用户信任。权限必须与用户主动操作强关联。
- 仅在用户点击“开始视频通话”“上传证件照”“定位附近门店”等明确动作后，再调用
navigator.mediaDevices.getUserMedia()或geolocation.getCurrentPosition() - 避免在页面初始化或滚动到某区域时自动触发——这类行为在 iOS 和新版 Chrome 中极易被拒
- 若需预判设备可用性，先用
navigator.permissions.query({ name: 'camera' })检查状态，仅当为'prompt'时才准备引导用户操作
提供降级方案，不因拒绝中断流程
用户拒绝权限不等于功能失效。应设计无权限时的替代路径，让用户感觉“仍能继续”，而不是被卡住。
立即学习“前端免费学习笔记（深入）”；
- 拒绝麦克风？提供文字输入或上传音频文件选项
- 拒绝地理位置？默认显示全国热门城市列表，或允许手动搜索
- 拒绝摄像头？显示示例图+“点击上传照片”入口，而非空白画面
- 所有拒绝场景下，避免隐藏核心按钮或显示错误提示，而是自然过渡到备选操作
设备切换与状态同步，减少二次授权
用户一旦授予权限，后续操作应尽量复用，避免反复打扰。尤其在多设备环境下，需确保状态准确、切换可靠。
- 调用
enumerateDevices()前，确认已获对应权限；返回空列表时，不渲染设备按钮，也不报错，只提示“暂未检测到可用设备” - 切换摄像头时，使用
{ deviceId: { exact: 'xxx' } }约束，而非宽松匹配；每次切换前重新校验deviceId是否仍在设备列表中 - 旧媒体流必须显式停止：
stream.getTracks().forEach(track => track.stop())，否则新流可能失败或产生冲突 - 监听
navigator.permissions.onchange，当用户后台修改权限时，及时更新界面状态（如禁用按钮、提示重新授权）
