如何在Html中从网络摄像头获取图像

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 成功获取到摄像头视频流
  })
  .catch(function(error) {
    // 处理错误
  });

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const videoElement = document.getElementById('video');
    videoElement.srcObject = stream;
  })
  .catch(function(error) {
    // 处理错误
  });

<video id="video" autoplay></video>

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const videoElement = document.getElementById('video');
    const canvasElement = document.getElementById('canvas');
    const context = canvasElement.getContext('2d');

    videoElement.srcObject = stream;

    document.getElementById('capture').addEventListener('click', function() {
      context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
      const imageDataURL = canvasElement.toDataURL('image/png');
      // 可以将imageDataURL发送到服务器或进行其他处理
    });
  })
  .catch(function(error) {
    // 处理错误
  });

<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<button id="capture">拍照</button>