HTML5在线摄像头应用

最近在搞一个考试系统，系统要求要有随机拍照的功能，并且摄像头能够收到js的控制。在线摄像头嘛，就那两种实现的方式：cab或者flash。

10年的汝阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整汝阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“汝阳网站设计”,“汝阳网站推广”以来，每个客户项目都认真落实执行。

暂且不论本人从没学过的flash（事实上我已经做了一个flash调用摄像头的demo，虽然是调用成功了，但是对于拍照部分我实在是无力了，况且还有js控制flash部分的代码更是令人头痛。）。

本来之前本人已经开发了一个摄像头的cab，但是activeX嘛，只能给IE用用，兼容性和稳定性都不是很好。于是现在开始研究基于HTML5的在线摄像头。

首先看效果

Html5大家也渐渐的不那么陌生了，至少也得知道只有少数浏览器能很好的兼容HTML5吧。所以测试环境是Chrome 18以上版本，并且在测试前应开启浏览器的MediaStream：在地址栏输入about:flags，启用MediaStream。

然后就可以开始敲代码了。

#p#

不过值得注意的是，HTML5的测试不能再本地直接打开html网页，而是需要在http上访问html页面。直接搭建IIS，apache或者直接通过VS来查看html5页面。

1、  视频流添加一个Video标签，并调用getUserMedia获得用户的摄像头视频流。

 
 
 
 
    
  
  
  
  
  1.         
    2. 
  
  
  
  
  2.         
    3. 
  
  
  
  
  3.             var video = document.getElementById("video"); 
    4. 
  
  
  
  
  4.             navigatornavigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 
    5. 
  
  
  
  
  5.             if (navigator.getUserMedia) { 
    6. 
  
  
  
  
  6.                 if (navigator.webkitURL) { 
    7. 
  
  
  
  
  7.                     navigator.getUserMedia("video", function (stream) { 
    8. 
  
  
  
  
  8.                         video.src = window.webkitURL.createObjectURL(stream); 
    9. 
  
  
  
  
  9.                     }, function (error) { alert(error); }); 
    10. 
  
  
  
  
  10.                 } 
    11. 
  
  
  
  
  11.                 else { 
    12. 
  
  
  
  
  12.                     navigator.getUserMedia("video", function (stream) { 
    13. 
  
  
  
  
  13.                         video.src = window.webkitURL.createObjectURL(stream); 
    14. 
  
  
  
  
  14.                     }, function (error) { alert(error); }); 
    15. 
  
  
  
  
  15.                 } 
    16. 
  
  
  
  
  16.             } 
    17. 
  
  
  
  
  17.             else { 
    18. 
  
  
  
  
  18.                 alert("navigator.getUserMedia  Error"); 
    19. 
  
  
  
  
  19.             } 
    20. 
  
  
  
  
  20.         
    21.

这样，运行以后便可以直接在网页中调用摄像头了。运行后会提示

2、  拍照

用Canvas捕获Video标签的内容并显示，就做到了拍照的效果。

同样先添加一个canvas标签和一个button按钮

 
 
 
 
    
  
  
  
  
  1.  
    2.

button点击后调用JS，把Video标签中当前的图像显示到canvas中，效果就不做演示了

 
 
 
 
    
  
  
  
  
  1. function scamera() { 
    2. 
  
  
  
  
  2.                 var videoElement = document.getElementById('video'); 
    3. 
  
  
  
  
  3.                 var canvasObj = document.getElementById('canvas1'); 
    4. 
  
  
  
  
  4.                 var context1 = canvasObj.getContext('2d'); 
    5. 
  
  
  
  
  5.                 context1.fillStyle = "#ffffff"; 
    6. 
  
  
  
  
  6.                 context1.fillRect(0, 0, 320, 240); 
    7. 
  
  
  
  
  7.                 context1.drawImage(videoElement, 0, 0, 320, 240); 
    8. 
  
  
  
  
  8.                 //alert("PaiZhaoSuccess"); 
    9. 
  
  
  
  
  9.             }
    10.

3.上传到服务器

上传到服务器还是用的老办法，把图片转为base64，通过ajax，毫无新意的保存到了服务器上。（需要注意的是，HTML5中toDataURL方法是转为的PNG格式，发送到服务端后会很大一张：320*240的照片要190kb，所以需要在服务器端转格式为jpg，变为10kb一张。详情见demo）

 
 
 
 
    
  
  
  
  
  1. function uploadPhoto()//上传拍照的图片 
    2. 
  
  
  
  
  2.             { 
    3. 
  
  
  
  
  3.                 showImgCode(); 
    4. 
  
  
  
  
  4.                 request = createRequest(); 
    5. 
  
  
  
  
  5.                 if (request == null) { 
    6. 
  
  
  
  
  6.                     alert("Unable to create request"); 
    7. 
  
  
  
  
  7.                 } 
    8. 
  
  
  
  
  8.                 else { 
    9. 
  
  
  
  
  9.                     //alert("request.OK"); 
    10. 
  
  
  
  
  10.                     var base64Data = document.getElementById('textB64').value.replace(/\+/g, "%2B"); //对参数中的+号编码，防止丢失 
    11. 
  
  
  
  
  11.                     var url = "AJAX/UploadPic.aspx"; 
    12. 
  
  
  
  
  12.                     request.open("POST", url, true); 
    13. 
  
  
  
  
  13.                     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    14. 
  
  
  
  
  14.                     request.onreadystatechange = responses; 
    15. 
  
  
  
  
  15.                     request.send("&img=" + base64Data); 
    16. 
  
  
  
  
  16.                     //alert("send.OK"); 
    17. 
  
  
  
  
  17.                 } 
    18. 
  
  
  
  
  18.             } 
    19. 
  
  
  
  
  19.             function responses() { 
    20. 
  
  
  
  
  20.                 if (request.readyState == 4)//服务器处理结束 
    21. 
  
  
  
  
  21.                 { 
    22. 
  
  
  
  
  22.                     if (request.status == 200)//一切正常 
    23. 
  
  
  
  
  23.                     { 
    24. 
  
  
  
  
  24.                         if (request.responseText == "OK") { 
    25. 
  
  
  
  
  25.                             alert("上传成功！"); 
    26. 
  
  
  
  
  26.                         } 
    27. 
  
  
  
  
  27.                         else { 
    28. 
  
  
  
  
  28.                             alert("上传失败！"); 
    29. 
  
  
  
  
  29.                             alert(request.responseText); 
    30. 
  
  
  
  
  30.                         } 
    31. 
  
  
  
  
  31.                     } 
    32. 
  
  
  
  
  32.                 } 
    33. 
  
  
  
  
  33.             }
    34.

事实上，通过Html5的其他一些方法，甚至可以做出在线PS的功能，不过这些不在我的需求之内，现在也就不深入研究了。

好了，就这么多，更详细的内容见DEMO中代码：Download

名称栏目：HTML5在线摄像头应用
本文网址：http://www.mswzjz.com/qtweb/news28/183178.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

各行业网站

成都网站营销推广　　 　全网营销　　 　网站建设　　 　成都免费网站建设　　 　响应式网站建设　　 　眉山联通机房　　 　内江托管服务器　　 　中国西部信息中心　　 　成都酒店服定制　　 　复盛机电设备　　 　重庆水土机房托管　　 　移动网站建设　　 　LED网站设计方案　　 　做网站公司　　 　做网站设计　　 　成都ssl证书认证　　 　微信公众号开发　　 　温江网站设计　　 　犀浦防纹窗　　 　平昌保洁