JavaScript调用摄像头

贺公子之数据科学与艺术

于 2025-06-10 13:59:06 发布

阅读量839

点赞数 23

CC 4.0 BY-SA版权

分类专栏：程序人生文章标签： javascript 开发语言 ecmascript

贺公子之数据科学与艺术，欢迎关注与点赞、留言，本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_31532979/article/details/148198074

程序人生专栏收录该内容

100 篇文章

订阅专栏

在浏览器中通过JavaScript调用摄像头主要使用 MediaDevices API，以下是详细步骤和示例代码：

步骤说明

请求用户授权：使用 navigator.mediaDevices.getUserMedia() 方法请求摄像头权限。
获取视频流：成功授权后，获得包含视频轨道的 MediaStream 对象。
绑定视频流到元素：将视频流绑定到 <video> 元素以显示实时画面。
错误处理：处理用户拒绝授权或设备不存在的情况。
释放资源：在不需要时关闭摄像头。

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <video id="video" width="640" height="480" autoplay playsinline></video>
  <button onclick="stopCamera()">停止摄像头</button>

  <script>
    const videoElement = document.getElementById('video');

    // 1. 请求摄像头访问权限
    async function startCamera() {
      try {
        const constraints = {
          video: {
            width: { ideal: 1280 },  // 分辨率偏好
            height: { ideal: 720 },
            facingMode: "user"       // 前置摄像头（"environment" 为后置）
          },
          audio: false                // 关闭麦克风
        };
        
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        videoElement.srcObject = stream;
      } catch (error) {
        console.error('摄像头访问失败:', error);
        alert('无法访问摄像头，请检查权限和设备。');
      }
    }

    // 2. 停止摄像头并释放资源
    function stopCamera() {
      if (videoElement.srcObject) {
        const tracks = videoElement.srcObject.getTracks();
        tracks.forEach(track => track.stop());  // 关闭所有轨道
        videoElement.srcObject = null;
      }
    }

    // 自动启动摄像头（或由按钮触发）
    startCamera();
  </script>
</body>
</html>

关键点解析

HTTPS 要求
现代浏览器要求通过 HTTPS 访问（localhost 和 127.0.0.1 除外），否则API会被阻止。
getUserMedia 参数
- video: true 表示启用视频，可通过对象配置详细参数（如分辨率、前后摄像头）。
- audio: true 启用麦克风（示例中未启用）。
playsinline 属性
在移动端浏览器中防止视频全屏播放（如iOS Safari）。
错误类型
- NotAllowedError: 用户拒绝授权。
- NotFoundError: 无可用摄像头设备。

扩展功能：拍照示例

function takePhoto() {
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(videoElement, 0, 0);
  
  // 获取Base64图片数据
  const photoData = canvas.toDataURL('image/png');
  console.log('照片数据:', photoData);
}