html5调用摄像头实例代码

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 09:54:38

　　html5调用摄像头实例代码

HTML5 调用摄像头实例代码

理解 HTML5 getUserMedia

HTML5 的 getUserMedia() 接口提供了一种直接从用户设备（如摄像头、麦克风）获取媒体流的方法。通过它，我们可以实现很多有趣的功能，比如视频聊天、人脸识别、AR 等。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 调用摄像头</title>
</head>
<body>
  <video id="video" width="320" height="240" autoplay></video>
  <button id="start">启动摄像头</button>
  <button id="stop">停止摄像头</button>

  <script>
    const video = document.getElementById('video');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('s   1. github.com 

github.comtop');

    startButton.addEventListener('cli   1. github.com 

github.comck', async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = strea   1. github.com 

github.comm;
      } catch (err) {
        console.error("Err   1. github.com 

 MIT 
github.comor accessing media devices.", err);
      }
    });

    stopButton.addEventListener('click', () => {
      const tracks = video.srcObject.getTracks();
      tracks.forEach(track => track.stop());
      video.srcObject = null;
    });
  </script>
</body>
</html>

代码解析

HTML 结构:
- 一个 <video> 标签用来显示摄像头捕获的视频流。
- 两个按钮，分别用于启动和停止摄像头。
JavaScript 代码:
- 获取 DOM 元素：获取视频元素和两个按钮。
- startButton 点击事件：
  - 调用 navigator.mediaDevices.getUserMedia() 请求访问用户的摄像头。
  - 如果用户允许，将获取到的媒体流设置为视频元素的 srcObject。
  - 如果出现错误，则捕获并输出错误信息。
- stopButton 点击事件：
  - 获取视频流中的所有轨道（通常只有一个视频轨道）。
  - 停止所有轨道。
  - 将视频元素的 srcObject 设置为 null。