设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 691|回复: 0

[实例分享] 用HTML5打开摄像头

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-3-9 08:41:58 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
网上很多关于用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.                
  5.                 navigator.getUserMedia  = navigator.getUserMedia ||
  6.                           navigator.webkitGetUserMedia ||
  7.                           navigator.mozGetUserMedia ||
  8.                           navigator.msGetUserMedia;
  9.               navigator.getUserMedia({video:true}, gotStream, noStream);
  10.                
  11.                 function gotStream(stream) {
  12.                         video.src = URL.createObjectURL(stream);
  13.                         video.onerror = function () {
  14.                           stream.stop();
  15.                         };
  16.                         stream.onended = noStream;
  17.                         video.onloadedmetadata = function () {
  18.                           alert('摄像头成功打开!');
  19.                         };
  20.                 }
  21.                 function noStream(err) {
  22.                         alert(err);
  23.       }
复制代码

按钮模拟拍照:
  1. document.getElementById("snap").addEventListener("click", function() {
  2.                
  3.                 ctx.drawImage(aVideo, 0, 0, 640, 480);
  4.         });
复制代码

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

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

还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表