HTML5 Canvas JS控制電腦或手機上的相機實例_html5教學技巧

行動裝置和桌上型電腦上的客戶端API一開始並不是同步的。最初總是在行動裝置上先擁有某些功能和對應的API，但慢慢的，這些API會出現在桌上型電腦上。其中一個應用介面技術就是getUserMedia API，它能讓應用程式開發者存取使用者的相機或內建相機。下面就讓我展示如何透過瀏覽器來存取你的鏡頭，並擷取截圖圖形。

HTML程式碼

下面的程式碼裡我寫了一部分註釋，請閱讀：

複製程式碼

程式碼如下:

Snap Photo

在寫出上面這些標記前應該判斷用戶的客戶端是否有攝影機支持，但這裡為了不那麼麻煩，這裡直接寫出了這些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的畫布技術及其強大，我們可以為圖片上添加各種迷人的濾鏡效果。現在，在瀏覽器裡用自己的攝影機給自己拍張照片吧！