JavaScript 不能直接调用摄像头，需通过 Web API 的 MediaDevices API 实现；核心方法是 MediaDevices.getUserMedia()，须在 HTTPS 或 localhost 下由用户主动触发，返回 Promise 并绑定到 video 元素播放。
JavaScript 本身不能直接调用硬件设备（如摄像头）的权限，BOM（Browser Object Model）也不提供访问摄像头的接口。真正实现摄像头访问的是 Web API 中的 MediaDevices API，它属于浏览器提供的标准 Web API，而非 BOM 的一部分。
MediaDevices.getUserMedia() 是核心方法
这是网页获取摄像头（和麦克风）权限的标准方式，需用户主动授权：
- 必须在安全上下文（HTTPS 或 localhost）中运行，HTTP 站点会被拒绝
- 需用户显式点击触发（如按钮），不能在页面加载时自动调用
- 返回 Promise，成功后得到 MediaStream 对象，可绑定到 <video> 元素播放
基本调用示例
以下代码演示如何请求摄像头权限并显示画面：
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.querySelector('video');
video.srcObject = stream;
} catch (err) {
console.error('访问摄像头失败：', err.name, err.message);
// 常见错误：NotAllowedError（用户拒绝）、NotFoundError（无可用设备）
}
}
注意：navigator.mediaDevices 是 navigator 对象的属性，而 navigator 属于 BOM，但具体能力由 MediaDevices API 提供。
立即学习“Java免费学习笔记（深入）”；
权限状态与检测
可通过 navigator.permissions 查询当前权限状态（非所有浏览器完全支持）：
-
navigator.permissions.query({ name: 'camera' })返回 PermissionStatus 对象 - state 可能为 'granted'、'denied' 或 'prompt'；可监听 change 事件响应变化
- 注意：即使 state 是 'granted'，仍需调用
getUserMedia()获取实际流，权限 ≠ 设备就绪
注意事项与兼容性
实际使用中需关注这些细节：
- 移动端 Safari 对
getUserMedia支持较好，但早期 iOS 版本要求playsinline属性防止全屏 - 部分 Android 浏览器可能需要添加
autoplay和muted才能自动播放视频流 - 不要依赖 BOM 中其他对象（如 window、location）来“绕过”权限机制——无法跳过用户授权步骤
- 权限一旦被拒绝，再次调用需用户手动在浏览器地址栏点击锁形图标重新允许
