如何通过Js调用硬件摄像头

<html>
<body>
<!-- 用于展示摄像头视频流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
    <button id="capture" οnclick="handleClickCapture()">拍照</button>
</div>

<!-- 展示拍摄的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>

<script>
  var video = document.getElementById('video');
  var capture = document.getElementById('capture');
  var ctx = document.getElementById('canvas').getContext('2d');

  /**
   * 调用用户媒体设备
   * @param constraints 配置信息
   * @param success 成功回调函数
   * @param error 失败回调函数
   */
  function getUserMediaToPhoto(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
      navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
      navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
      navigator.getUserMedia(constraints, success, error);
    }
  }

  /**
   * 成功回调函数
   * @param stream 视频流
   */
  function success(stream) {
    var CompatibleURL = window.URL || window.webkitURL;
    try {
      video.src = CompatibleURL.createObjectURL(stream);
    } catch (e) {
      video.srcObject = stream;
    }
    video.play();
  }

  /**
   * 失败回调
   * @param error 错误对象
   */
  function error(error) {
    console.log('无法访问媒体设备', error);
  }

  if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
    getUserMediaToPhoto({ video: { width: 480, height: 320 } }, success, error);
  } else {
    alert('不支持访问用户媒体设备');
  }

  /**
   * 拍照按钮点击事件
   */
  function handleClickCapture() {
    ctx.drawImage(video, 0, 0, 480, 320);
  }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容