移動(dòng)設(shè)備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動(dòng)設(shè)備上先擁有某些功能和相應(yīng)的API，但慢慢的，這些API會(huì)出現(xiàn)在桌面電腦上。其中一個(gè)應(yīng)用接口技術(shù)就是getUserMedia API，它能讓應(yīng)用開(kāi)發(fā)者訪問(wèn)用戶的攝像頭或內(nèi)置相機(jī)。下面就讓我展示一下如何通過(guò)瀏覽器來(lái)訪問(wèn)你的攝像頭，并提取截屏圖形。
HTML代碼
下面的代碼里我寫了一部分注釋，請(qǐng)閱讀：
<!--
理想情況下我們應(yīng)該先判斷你的設(shè)備上是否
有攝像頭或相機(jī)，但簡(jiǎn)單起見(jiàn)，我們?cè)谶@里直接
寫出了HTML標(biāo)記，而不是用JavaScript先判斷
然后動(dòng)態(tài)生成這些標(biāo)記
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
在寫出上面這些標(biāo)記前應(yīng)該判斷用戶的客戶端是否有攝像頭支持，但這里為了不那么麻煩，這里直接寫出了這些HTML標(biāo)記，需要注意的是我們這里使用的長(zhǎng)寬是640×480。
JavaScript代碼
因?yàn)槲覀兪鞘止懗龅腍TML，所以下面的js代碼會(huì)比你想象的要簡(jiǎn)單了很多。
// 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 ，下面就非常簡(jiǎn)單了，只需要將那個(gè)video元素的src設(shè)置為用戶的攝像頭視頻直播連接。這就是用瀏覽器訪問(wèn)攝像頭需要做的所有的事情！
拍照的功能只能說(shuō)是稍微復(fù)雜一點(diǎn)點(diǎn)。我們?cè)诎粹o上加入一個(gè)監(jiān)聽(tīng)器，將視頻畫面畫到畫布上。
// 觸發(fā)拍照動(dòng)作
document.getElementById("snap")
.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
當(dāng)然，你還可以在圖片上加一些濾鏡效果….
以前我們需要使用第三方的插件才能從瀏覽器里訪問(wèn)用戶的攝像頭，這不免有些復(fù)雜?，F(xiàn)在只需要HTML5的畫布技術(shù)和javaScript，我們就能簡(jiǎn)單快速的操作用戶的攝像頭。不僅僅還是訪問(wèn)攝像頭，而且是因?yàn)镠TML5的畫布技術(shù)及其強(qiáng)大，我們可以給圖片上加入各種迷人的濾鏡效果。現(xiàn)在，在瀏覽器里用自己的攝像頭給自己拍張照片吧！
