HTML5 調用攝像頭並把畫像輸出
本文將介紹介紹把攝像頭錄取的畫像輸出到前端的兩種方法。
另講解如何在畫像上加圖案和把圖像上傳到後端。
HTML部分
顯示畫像部分，有兩種方法分別是使用video和canvas控件
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<style>
body{background-color: black;}
</style>
<body>
<div align=center>
<video style="" id="video" width="480" height="480" controls></video>
<canvas style="background-color: black" id="canvas" width="480" height="480"></canvas>
</div>
</body>
</html>
JS部分
包括調用用戶攝像頭和window.onload兩部分
採用window.onload目的是頁面加載的時候就開始打開攝像頭
由於canvas是靜態的所以我採用window.setInterval函數，令圖片每10ms變化一次，以達到動態的效果。
<script type="text/javascript">
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(constraints,success, error)
} else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, success, error);
}
}
function success(stream) {
let CompatibleURL = window.URL || window.webkitURL;
console.log(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
console.log(`error${error.name}, ${error.message}`);
alert("error")
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
getUserMedia({video : {width: 480, height: 480}}, success, error);
} else {
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let img;
window.onload = function(){
var i = window.setInterval(function () {
//對video進行截圖
context.drawImage(video, 0, 0, 480, 480);
//使用canvas畫圈
context.beginPath();
context.globalAlpha=0.2;
context.fillStyle="white";
context.arc(240, 200,150,Math.PI*2,0,true);
context.closePath();
context.fill();
}, 10)//10ms
}
</script>
輸出結果如下（先忽略圈圈）：
左邊是用video輸出的畫像，右邊是用canvas
使用Canvas的好處
1.canvas很強大，對圖像加工較爲容易。如上圖，我在canvas上畫了個半透明的圓
使用Canvas的壞處
需要設置間斷時間，時間太長圖像會卡頓
Tips：因爲canvas的圖像是對video的截圖，所以如果只使用canvas時候，只需把video隱藏即可；把video的controls去掉就可以去掉進度條；
<video style="display:none;" id="video" width="480" height="480" controls>
上傳圖像到後端
獲取canvas的圖像並轉爲base64的格式。此處要把前22位沒用的去掉。
base64的前22位是 “ data:image/png;base64, ”
然後把參數senddata上傳即可
var canvasElement = document.getElementById('canvas');
var MIME_TYPE = "image/png";
var imgURL = canvasElement.toDataURL(MIME_TYPE).substring(22);
imgData = {uploadImg:imgURL};
var senddata = JSON.stringify(imgData);