在web应用程序html5中嵌入相机框架

Question

我想要用户将从设备相机上传图像的web应用程序。 我知道我可以使用<input type="file" accept="image/*" capture="camera">。

我的问题是，如果有一种方法可以将相机屏幕“嵌入”页面本身。换句话说，我希望屏幕看起来像这样：

Answer 1

我建议您阅读文章Capturing Audio & Video in HTML5。

以下是访问相机的代码：

<video autoplay></video>

<script>
  var errorCallback = function(e) {
    console.log('Reeeejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, errorCallback);
</script>

截屏：

<video autoplay></video>
<img src="">
<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>

Answer 2

视频标签有HTML5来处理这个问题。并且您需要使用getUserMedia api来处理流式传输。大多数现代浏览器都支持它。要验证它是否受支持，请使用javascript进行检查。你可以试试这个：

if(navigator.getUserMedia()) ....

Answer 3

这是一个关于如何使用网络摄像头捕捉图像的好教程。同一个人还有一个关于将视频捕获到GIF的教程。 http://davidwalsh.name/browser-camera HTML 5 Image capture tutorial & demo