一、如何使用HTML5实现利用摄像头拍照上传功能
获取视频:
<video id=”video” autoplay=”></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>实现拍照:
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域,可进行不等大不等位的绘制。
document.body.append(canvas);
二、getusermedia 如何监听停止共享
搜一下:getusermedia 如何监听停止共享
三、如何使用HTML5实现拍照上传应
能够在浏览器中获取摄像头与语音流媒体数据将会是件很酷的技术,随着HTML5的进一步规范与拓展,已经可以实现这个技术,这将为web开发带来新的用户体验与应用程序。 蒋宇捷在《如何使用HTML5实现拍照上传应用》 中已经对此技术进行了介绍,我也是从中得到启发的。 但是蒋先生博文中有些东西说的不够具体细化,还有些东西需要补充说明。因此,我就较为详细的介绍一下该技术,<br><br>一:运行条件<br><br> 1:需要chrome 18.0及以上版本,并且需要打开about:flags启用相关功能,也可以使用支持html5的opera浏览器。<br><br>2:网页必须运行于服务器端,基于http://的。如果直接在本地磁盘中打开也是没用的,可以启用IIS服务,使用localhost:8080运行该应用。这个需要千万注意!!!<br><br> 二: 视频流<br><br> HTML5推出了The Media Capture API,可以实现对摄像头的访问,关于对音频等接口的使用也可以,具体参考w3c规范。获取的视频流是通过video标签的。我们可以看看蒋先生的示例代码,但是有不完善的地方,我也会加以补充的。<br><br>[javascript] view plain copy print?<br><video id=video autoplay=></video> <br><script> <br>var video_element = document.getElementById('video'); <br>if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia <br> navigator.getUserMedia('video',success, error); <br>} <br>function success(stream) { <br> video_element.src =stream; <br>} <br></script> <br> 但是这段代码对于chrome是不行的,应为navigator.getUserMedia的值不是true,其真正的 是navigator.webkitGetUserMedia, 是chrome的一个拓展。<br> 因此,为了能够同时支持opera和chrome,可以修改上面蒋先生的代码如下:<br><br>[javascript] view plain copy print?<br>var video = document.getElementById(video); <br> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; <br> if (navigator.getUserMedia) // <br> { <br> if (navigator.webkitURL)// <br> { <br> navigator.getUserMedia(video, function (stream) { <br> video.src = window.webkitURL.createObjectURL(stream); <br> }, function (error) { alert(error); }); <br> } <br> else // <br> { <br> navigator.getUserMedia(video, function (stream) { <br> video.src = window.webkitURL.createObjectURL(stream); <br> }, function (error) { alert(error); }); <br> } <br> } <br><br> 三拍照<br><br>这需要用到<canvas>标签与方法了。<br><br> 学过<canvas>对象的朋友们知道,drawImage()函数是绘制图形的,但是该函数有数十种重载方法,不仅可以绘制从网页的<img> 或者本地加载的图片 , 还可以从video视频流中获取相应的图像数据,甚至具体到任何一帧。这方面的详细介绍可以参考w3c标准。<br><br> 例如,从video中获取图片并且绘制到<canvas>画布中可以这样<br><br>[javascript] view plain copy print?<br>var con = document.getElementById(canvas); <br> var cxt = con.getContext(2d); <br>con.width=video.videoWeight; <br>con.height=video.videoHeight; <br> cxt.drawImage(video, 0, 0); <br><br> 关于图片上传到服务器端我自己也还不是很懂,大家可以参考蒋先生的做法。
- 相关评论
- 我要评论
-