這篇文章主要介紹html5如何實現(xiàn)調(diào)用攝像頭并拍照功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站：于2013年創(chuàng)立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設”服務，為成百上千公司企業(yè)提供了專業(yè)的成都網(wǎng)站建設、網(wǎng)站建設、網(wǎng)頁設計和網(wǎng)站推廣服務， 按需網(wǎng)站設計由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領先地位的。

我們知道通常情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件，而window.onload是在頁面載入完成的時候才執(zhí)行，這其中包括圖片等元素。

通常我們只是想在DOM樹構(gòu)建完成后綁定事件到元素，我們并不需要圖片元素，并且有時候加載外域圖片的速度非常緩慢。

實現(xiàn)代碼：

拍照

var context = canvas.getContext("2d");
//當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件
window.addEventListener("DOMContentLoaded", function() {
//獲得Canvas對象
var canvas = document.getElementById("canvas");
//獲得video攝像頭區(qū)域
var video = document.getElementById("video");
var videoObj = {
"video" : true
};
var errBack = function(error) {
console.log("Video capture error: ", error.code);
};
//獲得攝像頭并顯示到video區(qū)域
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);
// 觸發(fā)拍照動作
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

實現(xiàn)效果：

以上是“html5如何實現(xiàn)調(diào)用攝像頭并拍照功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！