隨著手機攝像功能和質量不斷的提高中我們可以拍攝更好的照片，但是大家知道怎么通過html5調用攝像頭嗎？那么今天小編就和大家分享有關于：“如何在html5調用攝像頭？”這個問題吧！
HTML代碼部分：
<!--video用于顯示媒體設備的視頻流，自動播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按鈕-->
<div>
<button id="capture">拍照</button>
</div>
<!--描繪video截圖-->
<canvas id="canvas" width="480" height="320"></canvas>接下來是js代碼部分：
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var capture = document.getElementById('capture');
var context = canvas.getContext('2d');
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
//最新標準API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
//webkit核心瀏覽器
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
//firefox瀏覽器
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
//舊版API
navigator.getUserMedia(constraints,success,error);
}
}
//成功回調函數(shù)
function success(stream){
//兼容webkit核心瀏覽器
var CompatibleURL = window.URL || window.webkitURL;
//將視頻流轉化為video的源
video.src = CompatibleURL.createObjectURL(stream);
video.play();//播放視頻
}
function error(error) {
console.log('訪問用戶媒體失?。?#39;,error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('你的瀏覽器不支持訪問用戶媒體設備');
}
capture.addEventListener('click',function() {
// 將video畫面描繪在canvas畫布上
context.drawImage(video,0,0,480,320);
})
</script>
值得注意的是：
使用的時候打開攝像頭一定要上server上打開，否則沒辦法使用！因為打開的是屬于網(wǎng)絡的webcam，需要在server上打開。
目前好像chrome和opera還有大多數(shù)移動設備支持HTLM5打開攝像頭，我這個是在chrome上測試成功的。
還有一點，如果沒成功，很可能是你不小心關閉了chrome打開攝像頭的權限，你重新啟用權限就可以啦！
以上就是有關于：“如何在html5調用攝像頭？ 這方面的相關內容，更多有關于html5這方面的相關內容我們都可以在W3Cschool中進行學習和了解
