正文

html5打开摄像头并用canvas模拟拍照

IP云
IP云V管理员/5 阅读
08/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

网上很多关于用HTML5打开本地摄像头的文章，但各有瑕疵。根据我自己的亲身体验，我分享一下我用HTML5打开摄像头的经验。

废话不多说，直接看代码。

HTML代码：

  1. <video id="video" width="640" height="480" autoplay></video>
  2. <button id="snap">Snap Photo</button>
  3. <canvas id="canvas" width="640" height="480"></canvas>

复制代码

接下来是js代码：

打开摄像头

  1. var aVideo=document.getElementById('video');
  2. var aCanvas=document.getElementById('canvas');
  3. var ctx=aCanvas.getContext('2d');
  4. navigator.getUserMedia  = navigator.getUserMedia ||
  5. navigator.webkitGetUserMedia ||
  6. navigator.mozGetUserMedia ||
  7. navigator.msGetUserMedia;//获取媒体对象（这里指摄像头）
  8. navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
  9. function gotStream(stream) {
  10. video.src = URL.createObjectURL(stream);
  11. video.onerror = function () {
  12. stream.stop();
  13. };
  14. stream.onended = noStream;
  15. video.onloadedmetadata = function () {
  16. alert('摄像头成功打开！');
  17. };
  18. }
  19. function noStream(err) {
  20. alert(err);
  21. }

复制代码

按钮模拟拍照

  1. document.getElementById("snap").addEventListener("click", function() {
  2. ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
  3. });

复制代码

这样就成功啦！
但是！！！还有一点要注意，这在很多人那里都没有提到的，就是，打开摄像头一定要上server上打开，否则没办法使用！因为打开的是属于网络的webcam，需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头，我这个是在chrome上测试成功的。

还有一点，如果没成功，很可能是你不小心关闭了chrome打开摄像头的权限，你重新启用权限就可以啦！