必须在安全环境（HTTPS/localhost）、用户主动触发、正确处理异步响应的前提下调用 navigator.mediaDevices.getUserMedia()；需通过约束对象配置媒体类型与参数，将返回流赋给 video.srcObject，并分类捕获 NotAllowedError、NotFoundError 等错误。
直接调用 navigator.mediaDevices.getUserMedia() 即可访问摄像头与麦克风，但必须满足安全环境、用户主动授权、正确处理异步响应这三个前提。
确保运行在安全上下文中
浏览器只允许在 HTTPS 或 localhost 环境下启用媒体设备访问。HTTP 站点会静默拒绝请求，且不会弹出权限提示。开发阶段可用本地服务器（如 VS Code Live Server、Python 的 python -m http.server）模拟 HTTPS 效果，但上线务必部署 HTTPS。
在用户交互中触发权限请求
现代浏览器禁止页面自动启动媒体访问，必须由明确的用户操作（如点击按钮）触发。不能在页面加载时直接执行 getUserMedia()。
- 给“开始视频”按钮绑定
click事件 - 事件回调内调用
await navigator.mediaDevices.getUserMedia(...) - 避免在
DOMContentLoaded或window.onload中发起请求
构造约束对象并处理返回流
通过 constraints 对象声明所需设备类型和可选参数，成功后拿到 MediaStream，再赋给 <video> 的 srcObject 属性即可预览。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
{ video: true, audio: true } - 指定前后置摄像头（移动端）：
{ video: { facingMode: 'environment' } }（后置），'user'为前置 - 限制分辨率：
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } } - 将流绑定到 video 元素：
videoElement.srcObject = stream（注意不用URL.createObjectURL()，已废弃）
捕获常见错误并友好提示
拒绝授权、无设备、设备被占用等都会导致 Promise 拒绝，需根据 error.name 分类处理：
-
NotAllowedError：用户点了“拒绝”，建议提示“请手动点击地址栏锁图标，将摄像头/麦克风设为‘允许’” -
NotFoundError：系统未检测到可用设备，提示检查硬件或系统设置 -
NotReadableError：设备正被其他应用占用（如 Zoom 正在使用摄像头） -
SecurityError：当前非安全上下文（HTTP），需切换至 HTTPS
