html5 mediadevices 权限获取是核心难点，需满足安全上下文（https/localhost）、用户手势触发、状态预检与降级方案，并同步流管理与设备变更。
HTML5 的 MediaDevices 接口（尤其是 getUserMedia()）调用摄像头或麦克风，核心难点不在代码本身，而在权限能否顺利拿到——用户拒绝、浏览器拦截、环境不合规，三者占失败原因的九成以上。关键不是反复重试请求，而是让每一次触发都合理、可预期、有退路。
必须跑在安全上下文中
这是硬性前提，绕不过去：Chrome、Edge、Firefox 和 Safari 都要求页面运行在 HTTPS 或 localhost 下，file:// 协议直接被屏蔽，连权限弹窗都不会出现，控制台报 SecurityError 或静默失败。
- 开发阶段别双击打开 HTML 文件，用命令快速起服务：
python3 -m http.server 8000，然后访问http://localhost:8000/xxx.html - VS Code 用户推荐装 Live Server 插件，右键“Open with Live Server”即可
- 即使 localhost 也需注意：若页面含混合内容（如 HTTP 资源）、CSP 限制过严、或用了
document.write，也可能间接导致 API 失效
权限请求要绑定真实操作
不能一进页面就自动调用 getUserMedia()，浏览器会静默拒绝，iOS 和新版 Chrome 尤其严格。权限必须由用户明确手势触发，比如点击按钮、切换开关、滑动到某模块后主动点“开启”。
- 把请求逻辑写在
button.addEventListener('click', async () => { ... })里，而不是window.onload或DOMContentLoaded - 调用前可用
navigator.permissions.query({ name: 'camera' })检查当前状态：若为'granted'直接用；若为'denied'就别再调，改提示手动设置；仅当是'prompt'才准备引导用户点按钮 - 按钮文案建议嵌入用途，例如“打开相机扫码”比“开始”更易获得授权
拒绝后要有可用的替代路径
用户点“拒绝”，不代表功能必须瘫痪。设计降级方案，能显著提升流程完成率。
- 拒绝摄像头？显示示例图 + “上传照片”按钮，而非留白 video 标签
- 拒绝麦克风？提供文字输入框、语音文件上传入口，或预设常见应答选项
- 拒绝定位？默认展示全国热门城市列表，并支持手动搜索，不要卡在“正在获取位置…”
- 所有场景下避免隐藏主操作按钮或弹出红色错误框，用温和提示+自然过渡代替中断
流管理与设备状态要同步
权限一旦获得，后续操作应复用，而不是每次都要重新申请；同时设备状态变化（如用户插拔摄像头、后台修改权限）需及时响应。
- 旧媒体流必须显式停止：
stream.getTracks().forEach(track => track.stop())，否则新流可能失败或产生冲突 - 切换摄像头时，用
{ deviceId: { exact: 'xxx' } }精确匹配，不要用宽松约束；每次切换前先调用enumerateDevices()确认该设备仍在列表中 - 监听
navigator.permissions.onchange，当用户在浏览器设置里手动改了权限，界面按钮状态、提示文案要及时更新（如禁用“拍照”按钮并提示“请重新授权”）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
