如何使用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技術分享

                                                                                               世上有多少事能把握好，

                                                                                                               又何必這樣自相煩惱。