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 对象,可绑定到
基本调用示例
以下代码演示如何请求摄像头权限并显示画面:
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 提供。
权限状态与检测
可通过 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)来“绕过”权限机制——无法跳过用户授权步骤
- 权限一旦被拒绝,再次调用需用户手动在浏览器地址栏点击锁形图标重新允许
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











