mediadevices.getusermedia() 失败主因是http协议被禁用、用户拒绝授权或调用时机不当；需https/localhost环境、显式用户授权、dom就绪后触发；video应设srcobject而非src，ios需playsinline，关闭时须track.stop()释放资源。
MediaDevices.getUserMedia() 调用失败的常见原因
直接调用 MediaDevices.getUserMedia({ video: true }) 大概率报错或静默失败，核心原因是浏览器策略限制：HTTP 协议下绝大多数现代浏览器（Chrome、Edge、Firefox）会拒绝授予摄像头权限。只有 HTTPS 或 localhost（含 127.0.0.1）环境才被允许启用媒体设备。
另一个高频问题是用户未显式授权——即使页面在合法协议下，首次调用也会触发浏览器权限弹窗；若用户点“拒绝”或“不询问”，后续调用会立即 reject，错误类型通常是 NotAllowedError 或 PermissionDeniedError。
- 检查当前地址栏是否为
https://或http://localhost:xxx - 避免在 iframe 中调用，除非该 iframe 显式声明
allow="camera" - 不要在页面加载完成前就执行 getUserMedia，确保 DOM 和用户交互上下文已就绪（比如绑定在按钮点击事件里）
video 标签显示实时摄像头画面的关键配置
拿到 MediaStream 后，需赋给 <video></video> 元素的 srcObject 属性（不是 src），否则画面不会渲染。老式写法 URL.createObjectURL(stream) 已废弃，且存在内存泄漏风险。
还需注意 autoplay 和 playsinline 属性：iOS Safari 强制要求 playsinline 才能在页面内播放视频流，否则会全屏跳转；autoplay 则是避免手动调用 play() 时因策略被阻断。
<video id="camera" autoplay playsinline></video>
JS 部分示例：
const video = document.getElementById('camera');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream; // ✅ 正确
// video.src = URL.createObjectURL(stream); ❌ 不推荐
})
.catch(err => console.error('获取摄像头失败:', err));
移动端 iOS / Android 的兼容性差异点
iOS Safari 对摄像头支持较严格：默认只允许后置摄像头，且不支持通过 getUserMedia 的 deviceId 精确选择（如 { deviceId: { exact: 'xxx' } } 在 iOS 上常被忽略）。Android Chrome 则相对宽松，但部分国产浏览器（如微信内置浏览器）完全禁用 getUserMedia，返回 NotSupportedError。
更隐蔽的问题是分辨率适配——移动端摄像头默认输出分辨率可能远高于屏幕，导致 video 元素拉伸变形或卡顿。建议显式约束：{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }，但要注意 iOS 可能忽略 ideal，只接受 exact 或不设。
- 测试前先确认目标环境是否真支持：用
navigator.mediaDevices?.enumerateDevices()查看是否有kind: 'videoinput' - 微信中想用摄像头？基本无解，只能引导用户跳转到系统浏览器打开
- 避免设置过高帧率（如
frameRate: { max: 60 }），部分低端安卓机无法满足，直接失败
关闭摄像头后释放资源的必要操作
很多开发者只记得开启，却忽略关闭——用户离开页面或切换功能时，若未主动停止轨道，摄像头指示灯可能持续亮着，造成隐私和功耗问题。正确做法是遍历 stream.getTracks() 并调用 track.stop()。
特别注意：不能只设 video.srcObject = null，这只会断开绑定，不会停止媒体轨道。
function stopCamera(stream) {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
}
// 使用示例
let currentStream;
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
currentStream = stream;
video.srcObject = stream;
});
// 关闭时调用
stopCamera(currentStream);
实际项目中，建议把 stopCamera 绑定到组件卸载、路由离开或用户点击“关闭摄像头”按钮的回调里。漏掉这步，轻则耗电发热，重则被用户投诉隐私泄露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
