文章目錄
一、getUserMedia API簡介
getUserMedia API爲用戶提供訪問硬件設備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基於該接口，開發者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設備。
getUserMedia API最初是navigator.getUserMedia，目前已被最新Web標準廢除，變更爲navigator.mediaDevices.getUserMedia()，但瀏覽器支持情況不如舊版API普及。
MediaDevices.getUserMedia（）方法提示用戶允許使用一個視頻和/或一個音頻輸入設備，例如相機或屏幕共享和/或麥克風。如果用戶給予許可，就返回一個Promise對象，MediaStream對象作爲此Promise對象的Resolved［成功］狀態的回調函數參數，相應的，如果用戶拒絕了許可，或者沒有媒體可用的情況下PermissionDeniedError或者NotFoundError作爲此Promise的Rejected［失敗］狀態的回調函數參數。注意，由於用戶不會被要求必須作出允許或者拒絕的選擇，所以返回的Promise對象可能既不會觸發resolve也不會觸發reject。
參考官方API：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
手機版本支持情況：
二、頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay="autoplay"></video>
<!--拍照按鈕-->
<div>
<button id="capture">拍照</button>
</div>
<!--描繪video截圖-->
<canvas id="canvas" width="640" height="480"></canvas>
<script>
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設置 getUserMedia
// 因爲這樣可能會覆蓋已有的屬性。這裏我們只會在沒有getUserMedia屬性的時候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些瀏覽器根本沒實現它 - 那麼就返回一個error到promise的reject來保持一個統一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否則，爲老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
//默認使用前攝像頭，強制使用後置攝像頭如下設置
// let constraints = {video: { facingMode: { exact: "environment" } }};
let constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// 防止在新的瀏覽器裏使用它，應爲它已經不再支持了
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
//註冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click", function () {
//繪製畫面
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>
上面代碼完成後可以直接在瀏覽器裏使用http://localhost:8080查看。或者使用127.0.0.1進行本地查看。但是若是想要設置其他的ip地址，例如：192.168.0.11 等IP地址則無法訪問。
原因：getUserMedia除本地地址外，只支持安全的協議訪問。也就是說需要用https才能訪問，下面講解如何配置https。
三、https配置
1、使用jdk提供的keytoo工具生成祕鑰
打開命令行，輸入下列代碼：
keytool -genkey -alias tomcat -keyalg RSA -keystore ./server.keystore
進入命令後按下列輸入內容：
運行完畢後會在當前路徑下得到一個名爲server.keystore的祕鑰文件。
2、將祕鑰加入springboot工程
將祕鑰拷貝到項目根路徑。注意：跟路徑指的是工程的第一層路徑，請注意位置。
3、配置springboot的配置文件application.properties
加入下列代碼：
server.port=8443
server.ssl.key-store=server.keystore
server.ssl.key-alias=tomcat
server.ssl.enabled=true
server.ssl.key-store-password=123456
server.ssl.key-store-type=JKS
4、啓動項目，訪問路徑 https://localhost:8443/。
注意協議和端口號
會看到如下錯誤提示，這是因爲我們自己配置的祕鑰（證書）沒有官方註冊，無法被瀏覽器識別。可以點高級 -> 繼續前往 。
這時能正常訪問則說明我們的https配置完畢。可以替換成其他IP地址測試能正常使用攝像頭了。