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

 

            能够在浏览器中获取摄像头与语音流媒体数据将会是件很酷的技术，随着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技术分享

                                                                                               世上有多少事能把握好，

                                                                                                               又何必这样自相烦恼。