如何使用HTML5实现利用摄像头拍照上传功能

一、如何使用HTML5实现利用摄像头拍照上传功能

获取视频：

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实现拍照上传应用》中已经对此技术进行了介绍，我也是从中得到启发的。但是蒋先生博文中有些东西说的不够具体细化，还有些东西需要补充说明。因此，我就较为详细的介绍一下该技术， 一：运行条件 1：需要chrome 18.0及以上版本，并且需要打开about:flags启用相关功能，也可以使用支持html5的opera浏览器。 2：网页必须运行于服务器端，基于http://的。如果直接在本地磁盘中打开也是没用的，可以启用IIS服务，使用localhost:8080运行该应用。这个需要千万注意！！！ 二：视频流 HTML5推出了The Media Capture API，可以实现对摄像头的访问，关于对音频等接口的使用也可以，具体参考w3c规范。获取的视频流是通过video标签的。我们可以看看蒋先生的示例代码，但是有不完善的地方，我也会加以补充的。 [javascript] view plain copy print? <video id=video autoplay=></video> <script> var video_element = document.getElementById('video'); if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia navigator.getUserMedia('video',success, error); } function success(stream) { video_element.src =stream; } </script> 但是这段代码对于chrome是不行的，应为navigator.getUserMedia的值不是true,其真正的是navigator.webkitGetUserMedia, 是chrome的一个拓展。 因此，为了能够同时支持opera和chrome,可以修改上面蒋先生的代码如下： [javascript] view plain copy print? var video = document.getElementById(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); }); } } 三拍照 这需要用到<canvas>标签与方法了。 学过<canvas>对象的朋友们知道，drawImage()函数是绘制图形的，但是该函数有数十种重载方法，不仅可以绘制从网页的<img> 或者本地加载的图片，还可以从video视频流中获取相应的图像数据，甚至具体到任何一帧。这方面的详细介绍可以参考w3c标准。 例如，从video中获取图片并且绘制到<canvas>画布中可以这样 [javascript] view plain copy print? var con = document.getElementById(canvas); var cxt = con.getContext(2d); con.width=video.videoWeight; con.height=video.videoHeight; cxt.drawImage(video, 0, 0); 关于图片上传到服务器端我自己也还不是很懂，大家可以参考蒋先生的做法。

顶一下

(0)

踩一下

(0)

相关评论

我要评论: 用户名: 验证码:

上一篇：返回栏目

下一篇：加州葡萄酒的介绍