JavaScript调用摄像头实现方法详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript调用摄像头方法详解》，聊聊，希望可以帮助到正在努力赚钱的你。

getUserMedia 调用失败主因是环境与权限问题：HTTPS 为硬性前提（仅 localhost/127.0.0.1 允许 HTTP），移动端需用户手势触发；NotFoundError 表示设备缺失或系统级禁用；正确绑定视频流应使用 video.srcObject = stream，停止时须调用 track.stop() 释放资源。

getUserMedia 调用失败的常见报错和原因

直接调用 navigator.mediaDevices.getUserMedia({ video: true }) 报 NotAllowedError 或 NotFoundError，基本可以确定是环境或权限问题。HTTPS 是硬性前提——本地开发时 http://localhost 和 http://127.0.0.1 被浏览器视为安全上下文，但其他 http:// 地址一律拒绝。非 HTTPS 页面调用会静默失败或抛出 SecurityError。

• 检查地址栏是否显示锁形图标，或在控制台执行 location.protocol 确认是 https: 或允许的本地协议
• 移动端必须通过用户手势（如 click、touchstart）触发，不能在页面加载后自动调用
• NotFoundError 通常表示设备不存在（比如笔记本没摄像头）或被系统级禁用（macOS 的“隐私与安全性”里需手动授权）

正确请求视频流并绑定到

拿到 MediaStream 后不能直接赋值给 video.src，必须用 URL.createObjectURL() 生成临时 URL。现代写法推荐使用 video.srcObject，它支持直接赋值 MediaStream，且无需手动回收 URL。

const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream; // ✅ 推荐：无需 createObjectURL，也无需手动 revoke
  })
  .catch(err => {
    console.error('获取摄像头失败:', err.name, err.message);
  });

• 旧写法 video.src = URL.createObjectURL(stream) 需在流停止后调用 URL.revokeObjectURL(video.src)，否则内存泄漏
• srcObject 是标准属性，Chrome 53+、Firefox 51+、Safari 11+ 均支持，无需兼容旧版
• 务必在 then 中设置 video.play()（部分浏览器需显式调用）

约束条件（constraints）怎么写才有效

约束不是“建议”，而是强制要求。如果指定的分辨率或帧率硬件不支持，getUserMedia 会直接拒绝，除非你把参数设为 ideal 或 exact 并配合降级逻辑。

• 基础写法：{ video: { width: 1280, height: 720 } } 表示“必须满足”，不满足就报错
• 柔性写法：{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } } 表示“尽量接近”，浏览器会选最匹配的可用配置
• 常见陷阱：frameRate 在部分安卓设备上不可靠，iOS Safari 完全忽略该约束
• 开启镜像（自拍视角）：{ video: { facingMode: 'user' } }；后置摄像头用 'environment'

如何安全地停止摄像头并释放资源

用户离开页面或切换 Tab 时，摄像头不会自动关闭，必须手动调用 track.stop()。只停 video.srcObject = null 不够，底层媒体轨道仍活跃。

let stream = null;
async function startCamera() {
  stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;
}

function stopCamera() {
  if (stream) {
    stream.getTracks().forEach(track => track.stop()); // ✅ 关键：遍历所有 track 并 stop
    stream = null;
  }
}

• getTracks() 返回的是 MediaStreamTrack 数组，每个 track 对应一个音/视频源
• 停止后再次调用 getUserMedia 是安全的，但频繁启停可能触发系统弹窗（尤其 macOS）
• 监听 visibilitychange 事件，在页面隐藏时自动 stop，显示时再启动（注意需用户手势）

真正麻烦的从来不是调通那一行代码，而是设备兼容性、权限弹窗时机、约束不生效却无提示、以及忘记 stop 导致的后台摄像头常驻——这些细节不处理，上线后第一波投诉就来了。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。