溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用javascript實現電腦攝像頭的打開和截圖的功能，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>攝像頭調用實例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var video, mediaStreamTrack, canvas;//聲明全局變量
//打開攝像頭
function dk() {
video = document.getElementById("v1");
var videoObj = {
"video" : true
};
var errBack = function(error) {
console.log("Video capture error: ", error.code);
};
//根據瀏覽器的不同選取不同的支持
if (navigator.getUserMedia) { // Standarda
navigator.getUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = stream;//獲取攝像頭抓取的到字節流
video.play();//實時播放攝像頭
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}
//截圖
function jq() {
canvas = document.getElementById("c1");
var context = canvas.getContext("2d");
//將視頻當前的頁面轉換為圖片，顯示到畫板中
context.drawImage(video, 0, 0, 200, 202);
//把canvas圖像轉為img圖片
/* var src = canvas.toDataURL("image/jpeg");
createImg(src); */
}
//關閉攝像頭
function gb() {
mediaStreamTrack.stop();
}
//生成圖片
/* function createImg(src) {
var dv = document.getElementById("dv1");
var img = document.createElement("img");
img.setAttribute("src", src);
img.setAttribute("width", 205);
img.setAttribute("height", 205);
dv.appendChild(img);
} */
//上傳
/* function sc() {
$.post('TestServlet', {
"img" : canvas.toDataURL().substr(22)
}, function(data, status) {
alert(status != "success" ? "圖片處理出錯！" : data == "yes" ? "圖片上傳完成！"
: data);
});
} */
</script>
<style type="text/css">
input[type="button"]{
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<input type="button" value="打開" onclick="dk()">
<input type="button" value="截取圖像" onclick="jq()">
<input type="button" value="關閉" onclick="gb()">
</div>
<div>
<!--視頻 -->
<video width="200px" height="200px" id="v1"></video>
<br />
<!--畫板 -->
<canvas id="c1"></canvas>
<br />
</div>
<!--記錄每次截圖的結果 -->
<!-- <div id="dv1"></div> -->
</body>
</html>
但是谷歌瀏覽器可以打開攝像頭，無法獲取實時數據。火狐比較好用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
