当前位置：首页 > 行业动态 > 正文

html显示网络摄像头

使用JavaScript的getUserMedia获取摄像头数据，结合标签在HTML页面实时

获取摄像头权限与视频流

通过浏览器提供的 getUserMedia API 可以访问摄像头并获取视频流，该 API 支持主流浏览器（需 HTTPS 环境或本地 localhost）。

// 请求摄像头权限并获取视频流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // 将视频流绑定到 HTML 视频元素
    const video = document.getElementById('camera');
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.error('摄像头访问失败:', error);
  });

创建 HTML 结构

在页面中添加 <video> 元素用于显示摄像头画面，并设置基本样式：

html显示网络摄像头 第1张

<video id="camera" autoplay playsinline style="width:640px; height:480px; background:#000;"></video>

浏览器兼容性处理

不同浏览器对 getUserMedia 的前缀支持不同，需通过条件判断加载适配版本：

浏览器 适配代码
Chrome/Opera navigator.webkitGetUserMedia
Firefox navigator.mozGetUserMedia
Edge/Safari navigator.mediaDevices.getUserMedia
IE11 不支持（需 Polyfill 或降级方案） 
// 兼容旧版浏览器的前缀处理（现代浏览器可直接使用标准 API）
if (!navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
}

完整示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">摄像头显示</title>
  <style>
    video {
      width: 100%;
      max-width: 640px;
      background: #000;
    }
  </style>
</head>
<body>
  <video id="camera" autoplay playsinline></video>
  <script>
    // 检查浏览器是否支持 getUserMedia
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求视频流
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
          const video = document.getElementById('camera');
          video.srcObject = stream; // 绑定视频流
          video.play();             // 自动播放
        })
        .catch(err => {
          console.error('无法访问摄像头:', err);
          alert('请检查摄像头权限或浏览器支持情况');
        });
    } else {
      alert('当前浏览器不支持摄像头功能');
    }
  </script>
</body>
</html>

常见问题与解答

问题1：如何停止摄像头并释放资源？

解答：
调用视频流的 getTracks() 方法获取轨道列表，并对每个轨道执行 stop() 方法：

const stream = video.srcObject;
if (stream) {
  stream.getTracks().forEach(track => track.stop()); // 停止所有轨道
}
video.srcObject = null; // 解除绑定

问题2：移动设备（如手机）是否支持此功能？

解答：
大部分现代移动浏览器（如 iOS Safari、Android Chrome）支持 getUserMedia，但需满足以下条件：

  1. 网页需通过 HTTPS 协议访问（iOS 强制要求）；
  2. 用户需手动授予摄像头权限；
  3. 部分低版本浏览器可能需要前缀（如 moz 或
HTML网络摄像头
0

相关文章