如何实现HTML 5在线摄像头应用

如何实现HTML 5在线摄像头应用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。最近在搞一个考试系统，系统要求要有随机拍照的功能，并且摄像头能够收到js的控制。在线摄像头嘛，就那两种实现的方式：cab或者flash。暂且不论本人从没学过的flash（事实上我已经做了一个flash调用摄像头的demo，虽然是调用成功了，但是对于拍照部分我实在是无力了，况且还有js控制flash部分的代码更是令人头痛。）。本来之前本人已经开发了一个摄像头的cab，但是activeX嘛，只能给IE用用，兼容性和稳定性都不是很好。于是现在开始研究基于HTML5的在线摄像头。首先看效果Html5大家也渐渐的不那么陌生了，至少也得知道只有少数浏览器能很好的兼容HTML5吧。所以测试环境是Chrome 18以上版本，并且在测试前应开启浏览器的MediaStream：在地址栏输入about:flags，启用MediaStream。然后就可以开始敲代码了。不过值得注意的是，HTML5的测试不能再本地直接打开html网页，而是需要在http上访问html页面。直接搭建IIS，apache或者直接通过VS来查看html5页面。1、 视频流添加一个Video标签，并调用getUserMedia获得用户的摄像头视频流。这样，运行以后便可以直接在网页中调用摄像头了。运行后会提示2、 拍照用Canvas捕获Video标签的内容并显示，就做到了拍照的效果。同样先添加一个canvas标签和一个button按钮button点击后调用JS，把Video标签中当前的图像显示到canvas中，效果就不做演示了3.上传到服务器上传到服务器还是用的老办法，把图片转为base64，通过ajax，毫无新意的保存到了服务器上。（需要注意的是，HTML5中toDataURL方法是转为的PNG格式，发送到服务端后会很大一张：320*240的照片要190kb，所以需要在服务器端转格式为jpg，变为10kb一张。详情见demo免费云主机、域名）事实上，通过Html5的其他一些方法，甚至可以做出在线PS的功能，不过这些不在我的需求之内，现在也就不深入研究了。看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注云技术行业资讯频道，感谢您对云技术的支持。

相关推荐: ajax如何调用后台方法

这篇文章主要介绍ajax如何调用后台方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 我曾使用过的方法有三种： 1 在页面中加入隐藏的button，并定义了事件，然后执行js的$(“#免费云主机、域名隐藏btnID”).click()…