點評：移動設備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動設備上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API，它能讓應用開發者訪問用戶的攝像頭或內置相機

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

HTML代碼

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

復制代碼

<!--
理想情況下我們應該先判斷你的設備上是否
有攝像頭或相機，但簡單起見，我們在這里直接
寫出了HTML標記，而不是用JavaScript先判斷
然后動態生成這些標記
-->
<video autoplay></video>
<button>Snap Photo</button>
<canvas></canvas>

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);

拍照的功能只能說是稍微復雜一點點。我們在按鈕上加入一個監聽器，將視頻畫面畫到畫布上。

復制代碼

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

以前我們需要使用第三方的插件才能從瀏覽器里訪問用戶的攝像頭，這不免有些復雜。現在只需要HTML5的畫布技術和javaScript，我們就能簡單快速的操作用戶的攝像頭。不僅僅還是訪問攝像頭，而且是因為HTML5的畫布技術及其強大，我們可以給圖片上加入各種迷人的濾鏡效果?，F在，在瀏覽器里用自己的攝像頭給自己拍張照片吧！