HTML5 - 访问摄像头 [英] HTML5 - Access Camera

问题描述

我想使用HTML和JavaScript访问相机。
我见过

要访问userMedia，您必须 https 。我尝试运行它 here（jsfiddle）并为我工作。

I'd like to access camera with HTML and JavaScript. I've seen this example, but it doesn't work in Chrome. I have tried this, too:

<img src="">
<video></video>
<canvas style="display:none;"></canvas>

<script>
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;

  function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);
      // "image/webp" works in Chrome.
      // Other browsers will fall back to image/png.
      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }

  video.addEventListener('click', snapshot, false);

  // Not showing vendor prefixes or code that works cross-browser.
  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, errorCallback);
</script>

Who can help? Thanks!

解决方案

You are missing errorCallback function.

function errorCallback(e) {
    console.log(e);
}

I added this and got an error:

To access userMedia you have to have https. I tried running it here (jsfiddle) and works for me.

这篇关于HTML5 - 访问摄像头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！