移動(dòng)設(shè)備和桌面電腦上的客戶端api起初并不是同步的湿蛔。最初總是移動(dòng)設(shè)備上先擁有某些功能和相應(yīng)的api，但慢慢的，這些api會(huì)出現(xiàn)在桌面電腦上。其中一個(gè)應(yīng)用接口技術(shù)就是getusermedia api灵奖，它能讓?xiě)?yīng)用開(kāi)發(fā)者訪問(wèn)用戶的攝像頭或內(nèi)置相機(jī)。###
如何通過(guò)瀏覽器來(lái)訪問(wèn)你的攝像頭估盘，并提取截屏圖形：
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">snap photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
// 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);
拍照的功能瓷患，在按鈕上加入一個(gè)監(jiān)聽(tīng)器，將視頻畫(huà)面畫(huà)到畫(huà)布上遣妥。
// 觸發(fā)拍照動(dòng)作
document.getelementbyid("snap")
.addeventlistener("click", function() {
context.drawimage(video, 0, 0, 640, 480);
});
