当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript调用摄像头教程详解

JavaScript调用摄像头教程详解

2026-01-19 16:23:36 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript调用摄像头，MediaDevices使用教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

JavaScript操作摄像头主要靠MediaDevices.getUserMedia()，需HTTPS/localhost安全上下文；通过constraints指定视频、音频、分辨率、facingMode或deviceId；用enumerateDevices()枚举设备并切换；需妥善处理NotAllowedError、NotFoundError等错误。

javascript如何操作摄像头_MediaDevices API如何使用

JavaScript 操作摄像头主要靠 MediaDevices.getUserMedia()，它是 MediaDevices API 的核心方法，用于请求用户授权并获取音视频流（MediaStream）。只要浏览器支持（Chrome、Firefox、Edge、Safari 11+），就能用，无需插件。

获取摄像头权限并拿到视频流

调用 navigator.mediaDevices.getUserMedia()，传入约束对象（constraints）指定需要视频、音频或两者。最简示例：

const constraints = { video: true };
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream; // 直接赋值给 <video> 元素
  })
  .catch(err => console.error('访问摄像头失败：', err));

注意：必须在安全上下文（HTTPS 或 localhost）中运行，否则会直接拒绝请求。

控制摄像头参数（如分辨率、帧率、设备选择）

通过更精细的 constraints 可以指定偏好设置。例如固定 720p 分辨率、启用高帧率、或指定某台物理摄像头：

基础分辨率控制：{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }
强制最小尺寸：{ width: { min: 640 }, height: { min: 480 } }
选择前置/后置摄像头（移动端常用）：{ facingMode: 'user' }（前置）或 'environment'（后置）
指定设备 ID（需先用 enumerateDevices() 获取）：{ deviceId: { exact: 'xxx...' } }

不是所有参数都能强制生效，浏览器会尽力满足，但最终以实际可用能力为准。

枚举和切换摄像头设备

想列出所有可用摄像头（比如让用户手动选），要用 enumerateDevices()：

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const videoInputs = devices.filter(d => d.kind === 'videoinput');
    console.log('可用摄像头：', videoInputs);
  });

拿到设备列表后，可将 deviceId 填入 getUserMedia 的约束中实现切换。常见做法是：停止当前流（stream.getTracks().forEach(t => t.stop())），再用新 deviceId 重新申请。