h5調用攝像頭
阿新 • • 發佈：2018-09-08
htm tor height lse etc 截圖 UNC event 成功
<!DOCTYPE html>
<html>
<head>
<title>攝像頭測試</title>
</head>
<body>
<!--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>
<script type="text/javascript">
//訪問用戶媒體設備的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新標準API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit內核瀏覽器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox瀏覽器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//舊版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//成功的回調函數
function success(stream){
//兼容webkit內核瀏覽器
var CompatibleURL = window.URL || window.webkitURL;
//將視頻流設置為video元素的源
video.src = CompatibleURL.createObjectURL(stream);
//播放視頻
video.play();
}
//異常的回調函數
function error(error){
console.log("訪問用戶媒體設備失敗：",error.name,error.message);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//調用用戶媒體設備，訪問攝像頭
getUserMedia({
video:{width:480,height:320}
},success,error);
} else {
alert("你的瀏覽器不支持訪問用戶媒體設備");
}
//註冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click",function(){
//繪制畫面
context.drawImage(video,0,0,480,320);
});
</script>
</body>
</html>h5調用攝像頭