HTML5在线摄像头拍照_HTML5在线摄像头应用

近期在开发一个测试平台，平台需要集成随机抓拍功能，同时要求摄像设备能被指令操控。对于网络摄像头，其实现途径主要有两种：一种是使用cab技术，另一种是借助flash技术。

先不说我完全没接触过闪存，其实我已弄出一个闪存调用摄像头的实例，虽然调用功能实现了，但拍照环节我实在没法搞定，再加上控制闪存那部分的js代码，简直让人头疼。

先前本人已着手构建一个摄像头驱动程序，不过该程序仅适用于IE浏览器，在适配性和运行可靠性方面存在明显不足。因此，目前决定转向开发基于HTML5的在线摄像头解决方案。

首先看效果

现在的人对Html5也慢慢熟悉了，至少明白只有部分浏览器能够顺畅支持HTML5。因此测试时环境要设为18版以上，并且测试前需要打开浏览器的一个功能：在浏览器地址输入about:flags，然后开启它。

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

不过需要留意的是，检验HTML5时，不能在本地直接打开HTML网页，而必须在HTTP上访问HTML页面，可以搭建IIS，或者借助VS来查看HTML5页面。

1、  视频流

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

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

2、  拍照

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

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

点击后执行JS代码，将Video元素内当前的画面展示在中间位置，具体呈现方式不再进行演示

定义scamera函数,首先获取视频元素,其次取得画布对象,然后获取画布的绘图环境,接着设置绘图填充色为白色,随后在画布上绘制一个矩形,紧接着将视频元素绘制到画布上,最后不显示提示信息

3.上传到服务器

图片上传服务器依然沿用旧流程，先将图片转换，借助ajax传输，操作毫无创新，只是存入服务器而已。需要留意的是，HTML5规定转换成PNG格式，传到服务端后文件体积会很大，比如320*240尺寸的照片需要190kb，因此服务器那边必须再转成jpg格式，这样每张照片能压缩到10kb，具体细节参考demo演示。

执行拍照图片的上传操作               首先，会调用显示图片验证码的函数               接着，开始创建请求对象               如果请求对象创建失败               则弹窗提示无法创建请求               否则，继续后续操作               将参数中的加号进行编码处理，转换成百分号加号格式               请求的URL地址是AJAX/UploadPic.aspx               以POST方式打开请求，并设置异步模式               设置请求头内容类型为表单数据格式               为请求指定响应处理函数               发送请求，附带图片的base64编码数据               当收到服务器响应时               检查请求的完成状态               如果状态为完成               并且响应码为200               表示请求处理正常               再检查响应内容是否为"OK"               如果是，则弹窗提示上传成功");                          }                          若非如此，则弹出警示框显示上传未成功！");                            显示请求的响应文本;                          }                        }                      }                  }

实际上，借助Html5的某些其他途径，同样能够实现线上图像编辑的功能，但这类功能并非我所需要，因此目前暂不对此进行深入探究。

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

转自：