# 背景
在寫瀏覽器調用攝像頭進行人臉識別的時候,
需要獲取關鍵幀進行掃描解析,
剛好,寫了一個獲取攝像頭圖像的Demo,
放上來一起分享
# 運行原理
過程比較簡單,
我就直接簡單概述一下
流程:
-
- 利用 WebRTC 調用攝像頭
-
- 將 WebRTC 獲取到的 視頻流 傳送到 video 標簽
-
- 利用 requestAnimationFrame 方法,定時將畫面同步到 canvas 標簽
-
- 點擊按鈕的時候,直接從 canvas 元素獲取當前畫面的 base64 數據,利用方法 toDataURL
-
- 將 base64 數據展示到 img 標簽
# 代碼
我直接將代碼文件放到我群里: 492781269
可以加群下載
下面還是貼一下完整的代碼吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>調用攝像頭截圖拍照(WebRtc-video-canvas-img)</title>
</head>
<body>
<div id="videoBox">
<video src="" id="myVideo" autoplay="autoplay"></video>
<canvas id="output" style="display: none"></canvas>
<button id="myButton">截圖(拍照)</button>
<img id="myImg" src="" alt="">
</div>
<script>
const myVideo = document.querySelector("#myVideo");
const myCanvas = document.querySelector("#output");
const ctx = myCanvas.getContext("2d");
const myButton = document.querySelector("#myButton");
const myImg = document.querySelector("#myImg");
// 獲取canvas當前畫面的base64
function getCanvasBase64() {
return myCanvas.toDataURL("image/jpeg", 1);
}
// canvas 實時刷新顯示
function canvasFrame() {
ctx.drawImage(myVideo, 0, 0, myCanvas.width, myCanvas.height);
requestAnimationFrame(canvasFrame);
}
// 調用攝像頭
function setupCamera() {
let exArray = [];
//web rtc 調用攝像頭(兼容性寫法(谷歌、火狐、ie))
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
//遍歷攝像頭
navigator.mediaDevices.enumerateDevices()
.then(function (sourceInfos) {
for (var i = 0; i < sourceInfos.length; ++i) {
if (sourceInfos[i].kind == 'videoinput') {
exArray.push(sourceInfos[i].deviceId);
}
}
})
.then(() => {
// 因為我這里是有三個攝像頭,我需要取最后一個攝像頭
let deviceId = exArray[exArray.length - 1]; // 取最后一個攝像頭,(深度,灰度,RGB)
navigator.mediaDevices.getUserMedia({
audio: false,
video: {
deviceId: deviceId
}
})
.then(stream => { // 參數表示需要同時獲取到音頻和視頻
// 獲取到優化后的媒體流
myVideo.srcObject = stream;
myVideo.onloadedmetadata = () => {
myVideo.width = myVideo.offsetWidth;
myVideo.height = myVideo.offsetHeight;
myCanvas.width = myVideo.width;
myCanvas.height = myVideo.height;
canvasFrame();
};
})
.catch(err => {
// 捕獲錯誤
console.log
});
});
}
// 點擊按鈕截圖(拍照)
myButton.addEventListener('click', () => {
let imageBase64 = getCanvasBase64();
myImg.src = imageBase64;
});
// 載入之后就開始調用一下攝像頭
window.addEventListener('load', () => {
setupCamera();
});
</script>
</body>
</html>
PS:
如有錯誤,還請多多指出來~
-- Nick
-- 2019/07/22