随着web功能越來越強大，我們很多時候需要在web頁面來擷取攝像頭進行操作，原生html5提供了對攝像頭的支援，需要使用者的同意授權，下面是一個基于 HTML5 的調用攝像頭拍照并上傳背景的示例代碼：
html複制代碼<!DOCTYPE html>
<html>
<head>
<title>拍照上傳</title>
</head>
<body>
<video id="video" style="width:300px;height:200px;"></video>
<br>
<button id="btn-start">啟動攝像頭</button>
<button id="btn-stop">停止攝像頭</button>
<button id="btn-capture">拍照上傳</button>
<br>
<canvas id="canvas"></canvas>
<form id="form-upload" method="post" enctype="multipart/form-data">
<input type="file" id="input-file" name="file"/>
</form>
<script type="text/javascript">
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 啟動攝像頭
document.getElementById('btn-start').addEventListener('click', function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err) {
console.log("啟動攝像頭失敗：" + err);
});
});
// 停止攝像頭
document.getElementById('btn-stop').addEventListener('click', function() {
video.pause();
video.srcObject.getTracks()[0].stop();
video.srcObject = null;
});
// 拍照，并上傳到背景
document.getElementById('btn-capture').addEventListener('click', function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
canvas.toBlob(function(blob) {
var formData = new FormData();
formData.append('file', blob, 'photo.jpg');
postRequest('/upload', formData, function(res) {
alert(res.message);
});
}, 'image/jpeg');
});
// 發送 POST 請求
function postRequest(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
callback(res);
}
};
xhr.send(data);
}
</script>
</body>
</html>
上述代碼主要分為以下幾個部分：
- html5 的 <video> 元素用于顯示攝像頭資料流，我們可以通過 JavaScript API 控制調用攝像頭、暫停和關閉。同時使用了 <canvas> 元素來緩存視訊幀的圖像資料。
- 頁面中 btn-start 按鈕通過 getUserMedia() 方法請求浏覽器授權，并将攝像頭資料流傳給 <video> 元素進行播放。
- 點選 btn-capture 按鈕時，通過 toBlob() 将緩存的圖像資料轉化為 Blob 對象，并封裝到 FormData 中，以便發送給背景服務。
- postRequest() 函數用于發送包含檔案資料的 POST 請求，其中 FormData 對象中的 key 是上傳背景伺服器處理時需要讀取的參數名稱，通常對應具體的背景業務邏輯。
最後，需要注意的是，在本地調試和開發時，特别是在 Windows 作業系統下使用 Chrome 浏覽器通路時，可能會遇到攝像頭不能正常運作的情況。這時可以打開位址欄，在目标請求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 參數（其中端口号需替換成實際的本地服務端口），即可獲得權限，進行攝像頭使用。
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)