HTML5在线摄像头应用

http://www.cnblogs.com/singlex/archive/2012/06/06/2538339.html

HTML5在线摄像头应用

最近在搞一个考试系统，系统要求要有随机拍照的功能，并且摄像头能够收到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获得用户的摄像头视频流。

<video id="video"  width="320px" height="240px"></video><script type="text/javascript">var video = document.getElementByIdx_x("video");navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;if (navigator.getUserMedia) {if (navigator.webkitURL) {navigator.getUserMedia("video", function (stream) {video.src = window.webkitURL.createObjectURL(stream);}, function (error) { alert(error); });}else {navigator.getUserMedia("video", function (stream) {video.src = window.webkitURL.createObjectURL(stream);}, function (error) { alert(error); });}}else {alert("navigator.getUserMedia  Error");}</script>

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

2、拍照

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

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

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

            function scamera() {var videoElement = document.getElementByIdx_x('video');var canvasObj = document.getElementByIdx_x('canvas1');var context1 = canvasObj.getContext('2d');context1.fillStyle = "#ffffff";context1.fillRect(0, 0, 320, 240);context1.drawImage(videoElement, 0, 0, 320, 240);//alert("PaiZhaoSuccess");}

3.上传到服务器

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

function uploadPhoto()//上传拍照的图片
            {showImgCode();request = createRequest();if (request == null) {alert("Unable to create request");}else {//alert("request.OK");var base64Data = document.getElementByIdx_x('textB64').value.replace(/\+/g, "+"); //对参数中的+号编码，防止丢失var url = "AJAX/UploadPic.aspx";request.open("POST", url, true);request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");request.onreadystatechange = responses;request.send("&img=" + base64Data);//alert("send.OK");
                }}function responses() {if (request.readyState == 4)//服务器处理结束
                {if (request.status == 200)//一切正常
                    {if (request.responseText == "OK") {alert("上传成功！");}else {alert("上传失败！");alert(request.responseText);}}}}

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

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

http://v.youku.com/v_show/id_XMzIzMTA0NTQw.html

是时候走下吹坛了：HTML5视频播放器弱点分析

http://hi.baidu.com/fangxin1978/blog/item/fc588917c250652edd54019b.html

第三，Youtube网站还具备将外网视频直接嵌入的功能，而HTML5在这方面的表现则一般不如Flash。

最后，HTML5播放器并不能支持摄像头/麦克风，而眼下Youtube网站的Flash播放器却可以支持使用播放器直接摄像头/麦克风现场录制视频的功能，没有Flash，这一点是很难做到的。

HTML5 MediaStream的运用

作者:puterjam 日期:2012-06-08

字体大小: 小中大

HTML5在技术上发展越来越快，在输入方面浏览器也开始具备了更多能力。舜子一直在关注视频和音频流在html5的支持，虽然不是什么创新点，但是对html来说是一个非常重要的能力。

Chrome 18开始就把MediaStream放到实验室里，不过记得在19前的这些版本里，getUserMedia 接口一直不太稳定，很容易crash。近期发现Chrome 19.0.1055 dev在这个接口的稳定性上有较好的提升。不过在稳定性上，还需要改善。例如，摄像头使用次数过多后，媒体流会莫名中断，对于没有安装摄像头的检测做得不够完善，可能会导致浏览器crash。不过相信chrome以后的版本会fix这些问题，也希望能在chrome 19 的release版本正式用上这个功能。

这个demo里，其实舜子很早就想用html5来完成gif视频合成的尝试了。也借这个机会，搞了一把极限开发，利用Chrome 的MediaStream，把用户的摄像头作为动画合成的来源。

这里的关键技术并不复杂，在chrome下，我们可以使用navigator.webkitGetUserMedia即可，其他浏览器依次类推moz,o,ms之类。

<video id="v" autoplay></video>
 <script>
  navigator.webkitGetUserMedia({video:true},
  function(stream){
     document.getElementById("v").src = webkitURL.createObjectURL(stream);  },function(error){
     console.log("不支持媒体流～ ", error);  });</script>

这段代码正常情况下，你应该可以在浏览器里看到你的摄像头视频了。

另外，舜子还想提到一个非常有用的东西就是URL对象。看到webkitURL了么？createObjectURL 是可以把一些Blob(二进制大对象)转换成一个本地的url，提供给script标签，img，video，audio，甚至file来使用，这样做有什么好处呢？

试想一下，浏览器未来直接在前端处理的资源会很多，你可以合成视频和音频，但是合成后的Blob(二进制大对象)如何给html来播放，那么这时候你就需要构造一个URI来提供，这个和base64URI还不一样。其实createObjectURL会更加强大。

你还可以把一些文本，直接转换成js，构造成一个url，提供给worker使用。减少了worker使用过程中需要多一个请求的开销。

玩demo的，这边请：

http://www.pjhome.net/web/gif_maker/

注意，最好是chrome 19以上的版本，并且确保你真的有摄像头（没摄像头可能会crash浏览器，chrome的bug）。

最后还得感谢，jsgif库。这个库是从as3版本转换过来的。

https://github.com/antimatter15/jsgif

HTML5与视频传输_拔剑-浆糊的传说_新浪博客相关推荐

视频文件格式扩展名/专用名词详解_拔剑-浆糊的传说_新浪博客
视频文件格式扩展名/专用名词详解收藏 http://blog.csdn.net/fancyaphy/archive/2006/08/08/1037131.aspx AAC AAC全称高级音频编码(A ...
FW：图像处理与计算机视觉基础、经典以及最近发展_拔剑-浆糊的传说_新浪博客...
图像处理与计算机视觉基础.经典以及最近发展 http://blog.csdn.net/liuyue2046/article/details/12658441 http://www.iask.sina ...
某人写的openCV学习笔记_拔剑-浆糊的传说_新浪博客
http://blog.csdn.net/thefutureisour 我的OpenCV学习笔记(25):c++版本的高斯混合模型的源代码完全注释之前看到过C版本的,感觉写的很长,没有仔细看,但是C ...
图像处理-机器学习一些科普材料汇集 - 持续更新中_拔剑-浆糊的传说_新浪博客...
图像处理-机器学习-SLAM基础知识汇集(更新中) --by zxg519 at sina.com 1.适用于机器学习的矩阵求导推导技巧 1.矩阵求导术(上)-- 非常好 https://zhuanl ...
一些图像视频资料_拔剑-浆糊的传说_新浪博客
http://www.cvchina.info/codes/ 代码 2011年10月22日发表评论阅读评论这个页面力图搜集各种跟CV,AR相关的代码,如无特别声明,均是c/c++代码.还是一贯的标准 ...
没用的大用_拔剑-浆糊的传说_新浪博客
没用的大用 --拔剑话说古代有个网络大V庄先生,他的粉丝数量虽然比不上整天到各国指手画脚的吃饱了饭没事可干的当世第一大V空得发慌的孔夫子先生,但也足可翻手为云覆手雨,据说此人长期在大名鼎鼎的万愚死所 ...
留存3--关于三维设计_拔剑-浆糊的传说_新浪博客
http://www.oschina.net/project/tag/78/gis?lang=0&os=0&sort=view&p=5 室内设计软件 Freedomotic F ...
关于当代宜兴方言若干问题的讨论（3）_拔剑-浆糊的传说_新浪博客
关于当代宜兴方言若干问题的讨论--是弗还是勿? -- 拔剑,2011-03-09,南京宜兴人在表达有没有或者愿不愿意做什么事情的时候,通常会说"fe"(法), 如 fekai ...
目莲救母，一个流传千年的故事。_拔剑-浆糊的传说_新浪博客
目莲救母,一个流传千年的故事. 中国留传了很多救母的传说,如宝莲灯之成香救母,如目莲救母,概因与儒家之孝道暗合,千年流传不衰. 目莲救母的故事源自佛教故事,当非宜兴独有,唯乌饭之习俗似为江南独有. ...

HTML5与视频传输_拔剑-浆糊的传说_新浪博客

HTML5在线摄像头应用

HTML5在线摄像头应用

HTML5 MediaStream的运用

HTML5 MediaStream的运用

作者:puterjam 日期:2012-06-08

HTML5与视频传输_拔剑-浆糊的传说_新浪博客相关推荐

最新文章

热门文章