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

我建议你读一下这篇文章 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>

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

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

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