html5 摄像头,html5调用摄像头拍照上传

　　边肖的理念提供给每个人。学习编程最重要的是实践。虽然我这里有完善的代码，但是希望大家都能自己写代码。

　　html媒体捕获API提供了对摄像机的可编程访问，用户可以直接使用getUserMedia来获取摄像机提供的视频流。但实际上用html5调用手机摄像头存在很多问题：

　　1)谷歌发布的Chrome在版本21之后只增加了一个用于高质量视频和音频通信的getUserMedia API。这个API允许Web应用程序访问摄像头和麦克风。其他手机浏览器中只有opera支持html5调用本地相机功能。

　　2)两款浏览器都不支持访问多个摄像头：chrome不支持访问后置摄像头，而pera支持访问后置摄像头。

　　安卓手机，浏览器chrome32版本实现浏览器调用设备的摄像头拍照。主要有三步：1）获取视频流。

　　添加一个HTML5视频标签，并使用从摄像机获得的视频作为该标签的输入源。按如下方式复制代码：

　　var video=document . getelementbyidx _ x _ x( video )；

　　navigator . get user media({ video:true }，function (stream) {

　　video . src=window . webkiturl . createobjecturl(stream)；

　　}，函数(错误){ alert(错误)；});2）拍照

　　关于camera函数，使用HTML5的Canvas来实时捕捉Video标签的内容，Video元素可以作为Canvas图像的输入来复制代码如下：

　　函数scamera() {

　　var video element=document . getelementbyidx _ x _ x( video )；

　　var canvasObj=document . getelementbyidx _ x _ x( canvas 1 )；

　　var context 1=canvasobj . get context( 2d )；

　　context 1 . fill style= # ffffff ；

　　context1.fillRect(0，0，320，240)；

　　context 1 . draw image(video element，0，0，320，240)；

　　}3）图片获取

　　从canvas中获取图片数据的核心思想是利用Canvas的toDataURL将Canvas的数据转换成base64位编码的PNG图像拷贝代码。代码如下：

　　var img data=canvas . toda taurl(" image/png ")；

　　imgData的格式如下：“数据：image/png；base64，

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。