html 本身不能调用摄像头，必须通过 javascript 调用 navigator.mediadevices.getusermedia()，且仅在 https 或 localhost 环境下有效；file:// 协议因不满足安全上下文要求会被浏览器拒绝。
直接说结论：HTML 本身不能调用摄像头，必须通过 JavaScript 调用 navigator.mediaDevices.getUserMedia()，且必须在 HTTPS 或 localhost 环境下运行，否则会静默失败或抛出 NotAllowedError。
为什么 getUserMedia() 在本地文件（file://）打不开
现代浏览器（Chrome、Edge、Firefox）将摄像头视为高权限设备，强制要求安全上下文（secure context）。file:// 协议不被视为安全上下文，即使页面里写了正确代码，也会直接拒绝请求，控制台通常只显示 NotAllowedError 或根本无提示。
- ✅ 正确环境：
https://example.com、http://localhost:3000、http://127.0.0.1:8080 - ❌ 错误环境：
file:///Users/xxx/index.html、http://192.168.1.100（非 localhost 的 HTTP 域名） - 调试建议：用
npx serve、python3 -m http.server 8000或 VS Code Live Server 插件起一个本地 HTTP 服务
getUserMedia() 最简可用代码和关键参数
不要一上来就写一堆约束，先让画面跑起来。核心是传入一个 constraints 对象，其中 video: true 是必需的，audio: false 可显式关闭（避免弹两次授权）。
const video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
console.error('获取摄像头失败:', err.name); // 常见：NotAllowedError、NotFoundError、SecurityError
});
-
video: true表示启用默认视频轨道；设为{ facingMode: 'user' }可优先前置摄像头，{ facingMode: { exact: 'environment' } }强制后置（部分安卓有效） - 不加
audio: false会导致部分浏览器（如 Safari）即使只想要视频也弹音频权限框 -
video.srcObject = stream是标准写法，不要用已废弃的createObjectURL()
常见报错及对应处理逻辑
用户没给权限、设备被占用、系统禁用摄像头……这些都会进 catch，但错误类型不同，需区分响应：
-
NotAllowedError：用户点了“拒绝”或浏览器自动拦截（比如弹窗被广告拦截器屏蔽），应引导用户手动开启权限 -
NotFoundError：找不到可用摄像头（没插 USB 摄像头、MacBook 盖着盖子、虚拟机没启用 USB 设备），可提示“请检查摄像头是否连接或启用” -
NotReadableError：摄像头被其他程序占用（Zoom、Teams、另一个浏览器标签页），需提示“请关闭其他使用摄像头的应用” -
SecurityError：当前页面非安全上下文（即不是 HTTPS 或 localhost），必须换环境，代码无法绕过
权限不是一次授权永久有效——用户可在浏览器地址栏点击锁形图标随时撤销。所以每次进入页面都应做好 getUserMedia() 可能失败的准备，别假设“上次成功这次一定行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
