溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html>
<head>
<title>攝像頭測試</title>
</head>
<body>
<!--video用于顯示媒體設備的視頻流，自動播放-->
<video id="video" autoplay ></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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
