一、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地址測試能正常使用攝像頭了。