前言：
最近做了一個新功能，pc端調用攝像頭上傳圖片。調用電腦攝像頭，利用canvas畫布將視頻當前幀轉換成圖片，和大家分享一下。
注意：該方法只適用於本地和 https 請求，http 會提示沒有權限，否則會報錯。
直接上代碼，可以直接拷貝使用。
<!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>攝像頭拍照</title>
</head>
<body>
<video id="video" width="300" height="400" controls>
</video>
<canvas id="canvas" width="300" height="400"></canvas>
<div>
<button id="capture">拍照</button>
<button id="close">關閉攝像頭</button>
</div>
<script>
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
var mediaStreamTrack;
//訪問用戶媒體設備的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的標准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心瀏覽器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox瀏覽器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//舊版API
navigator.getUserMedia(constraints, success, error);
}
}
function success(stream) {
//兼容webkit核心瀏覽器
let CompatibleURL = window.URL || window.webkitURL;
//將視頻流設置為video元素的源
//video.src = CompatibleURL.createObjectURL(stream);
// 播放
video.srcObject = stream;
video.play();
mediaStreamTrack = stream
}
function error(error) {
alert('調用攝像頭失敗')
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
getUserMedia({ video: { width: 300, height: 400 } }, success, error);
} else {
alert('不支持訪問用戶媒體');
}
// 拍照
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 300, 400);
// photoSrc 就是拍照得到的base64的圖片數據，將數據傳遞給后端就可以了
var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
// 以下就是調用接口將數據傳遞給后端，省略...
})
// 關閉攝像頭
document.getElementById('close').addEventListener('click', function() {
if (mediaStreamTrack) {
mediaStreamTrack.getTracks()[0].stop();
}
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>拍照</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="開啟攝像頭" value="開啟攝像頭" onclick="getMedia()" />
<video id="video" width="300px" height="400px" autoplay="autoplay"></video>
<canvas id="canvas" width="300px" height="400px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
//獲得video攝像頭區域
let video = document.getElementById("video");
function getMedia() {
let constraints = {
video: { width: 500, height: 500 },
audio: true
};
/*
這里介紹新的方法:H5新媒體接口 navigator.mediaDevices.getUserMedia()
這個方法會提示用戶是否允許媒體輸入,(媒體輸入主要包括相機,視頻采集設備,屏幕共享服務,麥克風,A/D轉換器等)
返回的是一個Promise對象。
如果用戶同意使用權限,則會將 MediaStream對象作為resolve()的參數傳給then()
如果用戶拒絕使用權限,或者請求的媒體資源不可用,則會將 PermissionDeniedError作為reject()的參數傳給catch()
*/
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
}).catch(function (PermissionDeniedError) {
console.log(PermissionDeniedError);
})
}
function takePhoto() {
//獲得Canvas對象
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
console.log(photoSrc, 12121)
}
</script>
</body>
</html>
本地測試是沒有問題的，由於我的項目是vue寫的，其實寫法都差不多，將寫法裝換一下。但是http下是沒有用的，測試了很多方法，最終我妥協了，項目也改用了https的了。
記錄一下學習的新知識.......