navigator.mediaDevices.getUserMedia()是获取摄像头流的核心API，需HTTPS或localhost环境、检查兼容性、绑定MediaStream到带playsinline/autoplay的video元素，并处理权限拒绝等错误场景。
用 navigator.mediaDevices.getUserMedia() 获取摄像头流
HTML5 本身不提供“嵌入摄像头”的标签，必须靠 JavaScript 调用浏览器媒体 API。核心是 navigator.mediaDevices.getUserMedia()，它返回一个 Promise，成功后拿到 MediaStream 对象。
常见错误：直接在旧版 Chrome 或 iOS Safari 上调用却没处理 HTTPS 环境——该 API 在非 https:// 或 localhost 下会被拒绝，控制台报错 NotAllowedError: Permission denied。
- 必须确保页面运行在 HTTPS 或
localhost（开发时可用python3 -m http.server 8000启服务） - 调用前建议先检查兼容性：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) - 权限请求是异步的，不能假设调用后立即有画面；需在
.then()中绑定流到元素
把流绑定到
是唯一能直接渲染摄像头流的 HTML 元素，但默认不会自动播放或显示——必须手动设置 srcObject 属性，并触发 play()。
容易忽略的坑：iOS Safari 要求 带 playsinline 和 autoplay 属性，否则视频会全屏跳转或静音不播。
立即学习“前端免费学习笔记（深入）”；
- HTML 中写：
- JS 中绑定流：
document.getElementById('cam').srcObject = stream; - 部分 Android 浏览器需显式调用
video.play().catch(e => console.error(e))防止静音阻塞
处理常见拒绝和降级场景
用户点“拒绝”、设备被占用、或没有摄像头时，getUserMedia() 会 reject，错误类型可能是 NotAllowedError、NotFoundError、NotReadableError。
别只写 .catch(console.error) 就完事——实际项目中得给出明确反馈，比如显示“请允许摄像头访问”按钮并支持重试。
- 捕获具体错误：
catch(err => { if (err.name === 'NotAllowedError') { /* 引导用户手动开启权限 */ } }) - 想降级到上传图片？可在失败回调里显示隐藏的
- 检测是否真有摄像头：
navigator.mediaDevices.enumerateDevices()可列出设备，但需用户已授予权限才返回真实设备列表
采集帧用 canvas.getContext('2d').drawImage()
要截图、识别人脸、做滤镜，就得从 抓帧。核心是用 canvas 的 2D 上下文把视频当前画面画进去。
注意：不能在视频还没加载第一帧时就调用 drawImage，否则 canvas 是空的。可靠做法是监听 video 的 loadeddata 事件，或用 requestAnimationFrame 循环抓取。
- 示例代码片段：
const video = document.getElementById('cam'); const canvas = document.getElementById('snapshot'); const ctx = canvas.getContext('2d'); video.addEventListener('loadeddata', () => { canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0); }); - 频繁抓帧会影响性能，如只需每秒 1–2 帧，用
setTimeout控制频率比requestAnimationFrame更稳 - 移动端要注意 canvas 尺寸缩放问题：
video.videoWidth是原始分辨率，但video.clientWidth可能被 CSS 缩放过，需按比例调整drawImage参数
实际项目里最常卡住的不是代码写法，而是权限弹窗时机、HTTPS 强制要求、iOS 的 playsinline 缺失，以及没处理 loadeddata 就急着画 canvas——这些点漏掉一个，画面就出不来。
