如何通过HTML的getUserMedia API获取摄像头流实现视频通话？

本文共计1140个文字，预计阅读时间需要5分钟。

浏览器拒绝访问摄像头，基本原因是权限限制或页面上下文问题。最常见的错误是 `NotAllowedError` 或 `NotFoundError`。前一种错误表示用户未授权或页面上下文不安全（即不是 `https://` 或 `localhost`），后一种错误说明设备不存在或被占用。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 确保页面运行在 https:// 或 http://localhost（开发阶段允许）；http://127.0.0.1 也行，但 http://xxx.local 不行
• 调用前检查 navigator.mediaDevices 是否存在，再检查 navigator.mediaDevices.getUserMedia 是否为函数
• 不要在页面加载完成前就调用 —— 至少等 DOMContentLoaded 触发后，或更稳妥地绑定到用户手势（如按钮点击）上
• 捕获异常并区分处理：NotAllowedError 提示用户手动开启权限；NotFoundError 可提示“未检测到摄像头”，并尝试 navigator.mediaDevices.enumerateDevices() 查看设备列表

获取视频流并渲染到 video 元素的最小可行代码

拿到媒体流后不能直接赋给 src，必须用 URL.createObjectURL() 创建对象 URL，再设给 video.srcObject（现代写法）或 video.src（旧版兼容）。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 优先使用 video.srcObject = stream，它不触发重新加载，支持流式更新，且无需手动回收 URL
• 避免写成 video.src = URL.createObjectURL(stream)，否则需在流结束时手动调用 URL.revokeObjectURL()，否则内存泄漏
• 设置 video.autoplay = true 和 video.muted = true（尤其对音频流，即使只用视频，某些浏览器也要求 muted 才允许自动播放）
• 记得加 video.playsInline = true（iOS Safari 必需，否则全屏播放）

const constraints = { video: true, audio: true }; navigator.mediaDevices.getUserMedia(constraints) .then(stream => { const video = document.getElementById('localVideo'); video.srcObject = stream; // ✅ 正确 video.play().catch(e => console.warn('play failed:', e)); }) .catch(err => console.error('getUserMedia error:', err));

视频通话场景下的关键约束配置

默认 getUserMedia 返回最高可用分辨率，但实际通话中需要权衡带宽、CPU 和延迟。硬编码分辨率或帧率可能在低端设备上卡顿或失败。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用 constraints.video 对象传入具体能力要求，例如：{ width: { ideal: 640 }, height: { ideal: 480 }, frameRate: { max: 15 } }
• 避免用 exact，它会导致匹配失败（比如指定 width: { exact: 1280 }，但摄像头只支持 1280×720 和 1920×1080，就可能报错）
• 移动端优先加 aspectRatio: { ideal: 1.777 }（16:9）或 { ideal: 1.333 }（4:3），防止拉伸
• 若需前后置摄像头切换（如 iOS），用 deviceId + enumerateDevices() 获取设备 ID，再传入 video: { deviceId: { exact: 'xxx' } }

停止媒体流与资源释放的正确时机

视频通话结束时，仅隐藏 video 元素或移除 srcObject 并不会停止摄像头采集 —— 流仍在运行，灯还亮着，CPU 占用持续。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 遍历 stream.getTracks()，对每个 track 调用 track.stop()
• 不要依赖 video.srcObject = null 自动停止（部分浏览器不保证）
• 如果流用于 WebRTC（如 RTCPeerConnection），需先 removeTrack() 再 stop()，否则远端可能收不到轨道关闭通知
• 多个地方可能引用同一 stream（如本地预览 + 上传轨道），停止前确认无其他活跃使用

容易被忽略的是：用户切到后台标签页时，有些浏览器会自动暂停流，但恢复后不一定自动续播 —— 如果业务逻辑依赖持续采集（如人脸检测），得监听 visibilitychange 并手动处理。