HTML本身无法调用摄像头，必须通过JavaScript调用navigator.mediaDevices.getUserMedia()，且仅在HTTPS或localhost等安全上下文下有效；file://协议因不满足安全要求被浏览器直接拒绝。
为什么 index.html 直接双击打开就无法调用摄像头
因为现代浏览器（Chrome、Edge、Firefox）强制要求 navigator.mediaDevices.getUserMedia() 必须在安全上下文中执行。本地直接用文件协议打开的 file:///path/to/index.html 属于非安全源（file:// 协议不被信任），即使页面里写了正确调用逻辑，也会立刻抛出 NotAllowedError: Permission denied 或静默失败。
最简单有效的解决方法：起一个本地 HTTP 服务
不用装复杂工具，用系统自带命令就能绕过安全域限制：
- macOS / Linux：终端进入项目目录，运行
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - Windows（有 Python）：同上；没有 Python？用 PowerShell 运行
Start-Process "http://localhost:8000" ; python3 -m http.server 8000 - 更轻量（无 Python）：用
npx serve（需 Node.js），或下载单文件二进制如microserve
关键点：只要 URL 是 http://localhost 或 https:// 开头，就算本地开发，浏览器也认作安全上下文。
getUserMedia() 调用时仍报错的常见原因
即使起了本地服务，也可能因以下细节失败：
立即学习“前端免费学习笔记（深入）”；
- 页面未通过用户交互触发（比如自动在
onload里调用）→ 必须由按钮点击、空格键等用户手势触发 - HTTPS 页面里嵌入了
http://的 iframe 或资源 → 混合内容会降级权限，导致媒体 API 不可用 - 移动端 Safari 对
video: true有额外限制：必须同时声明autoplay和muted属性，否则拒绝播放 - 部分 Chrome 版本对
localhost的证书校验变严格 → 可临时加启动参数--unsafely-treat-insecure-origin-as-secure="http://localhost:8000" --user-data-dir=/tmp/chrome-test（仅调试）
检查是否真在安全上下文里的快速验证方式
在浏览器控制台（DevTools → Console）粘贴执行：
console.log("isSecureContext:", window.isSecureContext);
如果输出 false，说明当前页面仍不满足安全上下文要求，无论代码写得多规范，getUserMedia() 都不会工作。这时候别调代码逻辑，先回头确认服务是否跑对、URL 是否是 localhost 或 https。
安全域不是“前端能绕过的限制”，而是浏览器硬性策略。本地开发阶段最容易忽略的，其实是把“起服务”当成可选步骤——它其实是必经门槛。
