如何使用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);

关于图片上传到服务器端我自己也还不是很懂，大家可以参考蒋先生的做法。

温馨提示：答案为网友推荐，仅供参考

当前网址：https://verywind.cn/ee/f23v3fr3xxvyre23ye.html