HTML5 MediaDevices API需HTTPS/localhost环境、用户显式授权及设备可用三条件缺一不可；通过getUserMedia()获取媒体流，constraints支持设备选择、分辨率等控制；enumerateDevices()枚举设备，ondevicechange监听插拔；需按NotAllowedError等类型差异化错误处理。
HTML5 MediaDevices API 是浏览器原生支持的媒体设备访问接口，核心在于安全、异步、声明式地获取用户音视频输入权限。它不依赖插件，但对运行环境、用户授权和设备状态高度敏感。
必须满足的基础条件
调用摄像头或麦克风前，以下三点缺一不可：
-
HTTPS 或 localhost 环境：非安全上下文（如 http://）下，
navigator.mediaDevices可能为undefined，getUserMedia()直接抛出SecurityError；本地开发可用http://localhost绕过限制。 - 显式用户授权：首次调用会触发浏览器权限弹窗；拒绝后再次调用不会重试，需引导用户手动在地址栏点击锁形图标重新授予权限。
-
设备物理可用且未被占用：若摄像头正被微信、Zoom 或其他网页占用，
getUserMedia()会报OverconstrainedError或NotReadableError，而非静默失败。
关键 API 与参数控制
navigator.mediaDevices.getUserMedia(constraints) 是入口方法，返回 Promise。约束对象（constraints）决定行为精度：
-
基础开关：
{ video: true, audio: true }同时请求；设为false或省略即不启用对应设备。 -
前后置摄像头选择：用
facingMode: "user"（前置）或"environment"（后置），部分安卓机型支持，iOS Safari 自动按物理方向匹配，不强制生效。 -
分辨率与帧率控制：可指定
width、height、frameRate，例如{ width: { ideal: 1280 }, height: { ideal: 720 } }；但实际输出取决于硬件能力和浏览器协商结果，非强制保证。 -
高级约束示例：启用闪光灯（若支持）需写
{ advanced: [{ torch: true }] }，且仅在部分 Android 设备上有效；iOS 不开放 torch 控制。
设备枚举与动态监听
仅靠 getUserMedia() 无法得知当前有哪些摄像头/麦克风可用。需结合：
立即学习“前端免费学习笔记（深入）”；
-
navigator.mediaDevices.enumerateDevices()：返回设备列表，含deviceId、label（需用户已授权）、kind（"videoinput"/"audioinput"）；可用于构建设备切换菜单。 -
navigator.mediaDevices.ondevicechange：监听设备插拔事件（如外接 USB 摄像头插入、蓝牙耳机连接），但触发后必须主动调用enumerateDevices()刷新列表；注意该事件在 iOS 上支持有限。
错误处理与降级策略
常见错误类型需分别应对：
-
NotAllowedError：用户点“拒绝”或系统级禁用（如 macOS 设置中关闭网站摄像头权限）；应提示用户前往设置页开启。 -
NotFoundError：无可用设备（如无摄像头的台式机、禁用麦克风的笔记本）；可隐藏相关功能按钮或显示占位提示。 -
NotReadableError：设备被占用或硬件故障；建议提示“请关闭其他使用摄像头的应用”，并提供重试按钮。 -
OverconstrainedError：约束条件过于严苛（如要求 4K 但设备仅支持 720p）；应降低分辨率或移除特定约束后重试。
不复杂但容易忽略
