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标签和一个button按钮
<canvas id="canvas1" width="320" height="240"></canvas>
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.上传到服务器
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);
}
}
}
}
好了,就这么多,更详细的内容见DEMO中代码:Download
http://v.youku.com/v_show/id_XMzIzMTA0NTQw.html
是时候走下吹坛了:HTML5视频播放器弱点分析
http://hi.baidu.com/fangxin1978/blog/item/fc588917c250652edd54019b
第三,Youtube网站还具备将外网视频直接嵌入的功能,而HTML5在这方面的表现则一般不如Flash。
最后,HTML5播放器并不能支持摄像头/麦克风,而眼下Youtube网站的Flash播放器却可以支持使用播放器直接摄像头/麦克风现场录制视频的功能,没有Flash,这一点是很难做到的。
HTML5 MediaStream的运用
HTML5 MediaStream的运用
作者:puterjam 日期:2012-06-08
HTML5在技术上发展越来越快,在输入方面浏览器也开始具备了更多能力。舜子一直在关注视频和音频流在html5的支持,虽然不是什么创新点,但是对html来说是一个非常重要的能力。
Chrome 18开始就把MediaStream放到实验室里,不过记得在19前的这些版本里,getUserMedia
这个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(二进制大对象)如何给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