点击按钮调用摄像头无反应，需确保HTTPS或localhost环境、用户主动触发、捕获NotAllowedError异常；黑屏或NotFoundError需检查设备列表和简化约束；黑图因drawImage过早，应监听loadeddata事件；移动端须在用户手势同步上下文中调用。
点击按钮后调用摄像头但页面没反应？先检查 getUserMedia 权限
浏览器不会自动开启摄像头，必须由用户主动触发（比如点击按钮），且页面需运行在 https 或 localhost 下。HTTP 协议下 navigator.mediaDevices.getUserMedia 会直接抛错：NotAllowedError: Permission denied。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认服务部署在 HTTPS 或本地
http://localhost（127.0.0.1不行） - 按钮的
onclick或事件监听器里调用getUserMedia，不能放在页面加载时自动执行 - 捕获异常并提示用户，例如：
catch(e => console.error("摄像头不可用：", e.name))
拍照时画面黑屏或报错 “NotFoundError”？检查设备可用性与约束条件
getUserMedia({ video: true }) 默认尝试打开默认摄像头，但某些笔记本或虚拟机可能没有物理设备，或系统禁用了访问权限（如 macOS 的“隐私与安全性”设置中未授权浏览器）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调用前先检查设备列表：
navigator.mediaDevices.enumerateDevices()，过滤出kind === "videoinput"的设备 - 避免硬编码约束，比如不要写
{ video: { width: { ideal: 1920 } } }——低端设备不支持会直接失败 - 简化约束优先验证通路：
{ video: true, audio: false }足够启动预览
拍完照片是黑图或尺寸异常？canvas.toDataURL 取帧时机不对
常见错误是直接在 getUserMedia 成功回调里立刻执行 canvas.getContext("2d").drawImage(video, 0, 0)——此时 video 元素尚未完成首帧渲染，画布得到的是空帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
video元素的loadeddata事件，确保首帧加载完成再绘图 - 使用
video.videoWidth和video.videoHeight动态设置 canvas 尺寸，避免拉伸变形 - 导出图片时指定 MIME 类型：
canvas.toDataURL("image/jpeg", 0.8)，比默认 PNG 更小且兼容性更好
移动端点击无响应或闪退？避免在非用户手势上下文中调用 mediaDevices
Safari iOS 和部分安卓 WebView 对媒体 API 要求更严格：必须在用户显式操作（click、touchend）的同步调用栈内发起 getUserMedia，异步延迟（如 setTimeout、Promise.then）会导致拒绝。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮绑定原生
onclick或addEventListener("click", handler, { once: true }) - 不要把
getUserMedia包进 Promise.resolve().then() 或 async/await 中间层 - Android Chrome 需额外加
playsinline属性到<video>标签，否则可能全屏播放中断流程
真正麻烦的不是代码几行，而是每个平台对“用户意图”的判定逻辑不同——Safari 认为你点一下就得立刻开摄像头，延迟哪怕 10ms 都算“非即时响应”。
