HTML5技術調用電腦或手機上的攝像頭

移動裝置和桌面電腦上的用戶端API起初并不是同步的。最初總是移動裝置上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API，它能讓應用開發者通路使用者的攝像頭或内置相機。下面就讓我展示一下如何通過浏覽器來通路你的攝像頭，并提取截屏圖形。

HTML代碼

下面的代碼裡我寫了一部分注釋，請閱讀：

<video id="video" width="640" height="480" autoplay></video>  
    <button id="snap">Snap Photo</button>  
    <canvas id="canvas" width="640" height="480"></canvas>  
           

在寫出上面這些标記前應該判斷使用者的用戶端是否有攝像頭支援，但這裡為了不那麼麻煩，這裡直接寫出了這些HTML标記，需要注意的是我們這裡使用的長寬是640×480。

JavaScript代碼

因為我們是手工寫出的HTML，是以下面的js代碼會比你想象的要簡單了很多。

// Put event listeners into place  
window.addEventListener("DOMContentLoaded", function() {  
    // Grab elements, create settings, etc.  
    var canvas = document.getElementById("canvas"),  
        context = canvas.getContext("2d"),  
        video = document.getElementById("video"),  
        videoObj = { "video": true },  
        errBack = function(error) {  
            console.log("Video capture error: ", error.code);   
        };  
    // Put video listeners into place  
    if(navigator.getUserMedia) { // Standard   
        navigator.getUserMedia(videoObj, function(stream) {  
            video.src = stream;  
            video.play();  
        }, errBack);  
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
        navigator.webkitGetUserMedia(videoObj, function(stream){  
            video.src = window.webkitURL.createObjectURL(stream);  
            video.play();  
        }, errBack);  
    }  
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
        navigator.mozGetUserMedia(videoObj, function(stream){  
            video.src = window.URL.createObjectURL(stream);  
            video.play();  
        }, errBack);  
    }  
}, false);  
           

一旦判斷出使用者浏覽器支援getUserMedia ，下面就非常簡單了，隻需要将那個video元素的src設定為使用者的攝像頭視訊直播連接配接。這就是用浏覽器通路攝像頭需要做的所有的事情！

拍照的功能隻能說是稍微複雜一點點。我們在按鈕上加入一個監聽器，将視訊畫面畫到畫布上。

// 觸發拍照動作  
document.getElementById("snap")  
       .addEventListener("click", function() {  
    context.drawImage(video, 0, 0, 640, 480);  
}); 
           

當然，你還可以在圖檔上加一些濾鏡效果….我還是把這些技術放到以後的文章裡再說吧。但至少你可以将這個畫布圖像轉換成一張圖檔。

以前我們需要使用第三方的插件才能從浏覽器裡通路使用者的攝像頭，這不免有些複雜。現在隻需要HTML5的畫布技術和javaScript，我們就能簡單快速的操作使用者的攝像頭。不僅僅還是通路攝像頭，而且是因為HTML5的畫布技術及其強大，我們可以給圖檔上加入各種迷人的濾鏡效果。