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

Question

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

我的问题是，是否有办法 "embed" 页面本身的相机屏幕。换句话说，我希望屏幕看起来像这样：

Answer 1

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

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

Answer 2

我建议你可以阅读文章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 3

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

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

Embed camera frame in web app html5

html

camera