如何使用HTML5实现拍照上传应——补充说明

最新推荐文章于 2024-04-30 12:49:07 发布

JJF

最新推荐文章于 2024-04-30 12:49:07 发布

阅读量9.7k

点赞数 2

分类专栏： javascript web 视频流 HTML5 video JS & HTML5——艺术与技术文章标签： html5 video stream chrome function opera

本文链接：https://blog.csdn.net/jin123wang/article/details/7413254

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JS & HTML5——艺术与技术

9 篇文章 7 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

能够在浏览器中获取摄像头与语音流媒体数据将会是件很酷的技术，随着HTML5的进一步规范与拓展，已经可以实现这个技术，这将为web开发带来新的用户体验与应用程序。蒋宇捷在《如何使用HTML5实现拍照上传应用》中已经对此技术进行了介绍，我也是从中得到启发的。但是蒋先生博文中有些东西说的不够具体细化，还有些东西需要补充说明。因此，我就较为详细的介绍一下该技术，

一：运行条件

1：需要chrome 18.0及以上版本，并且需要打开about:flags启用相关功能，也可以使用支持html5的opera浏览器。

2：网页必须运行于服务器端，基于http://的。如果直接在本地磁盘中打开也是没用的，可以启用IIS服务，使用localhost:8080运行该应用。这个需要千万注意！！！

二：视频流

HTML5推出了The Media Capture API，可以实现对摄像头的访问，关于对音频等接口的使用也可以，具体参考w3c规范。获取的视频流是通过video标签的。我们可以看看蒋先生的示例代码，但是有不完善的地方，我也会加以补充的。

<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,可以修改上面蒋先生的代码如下：

 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>画布中可以这样

var con = document.getElementById("canvas");
    var cxt = con.getContext("2d");
con.width=video.videoWeight;
con.height=video.videoHeight;
 cxt.drawImage(video, 0, 0);

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

我对HTML5的开发比较感兴趣，因此在CSDN论坛三月份技术分享活动比赛中也参加了，介绍了一下自己学习开发HTML5的经验技术，希望大家投我一票：投票地址，我的主题：关于HTML5的技术分享，id:jin123wang. 我的参赛作品:HTML5技术分享

世上有多少事能把握好，

又何必这样自相烦恼。