第一步，呼叫攝像頭，並且將攝像頭捕獲的畫面，顯示到網頁上
阿新 • • 發佈：2022-03-30
主要用到的方法：
1.MediaDevices.getUserMedia()，參考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
2.window.URL ，參考地址：https://www.cnblogs.com/mengff/p/12820019.html
3.video.srcObject ，參考地址：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
貼上原始碼：集合到一個.html檔案內，我是在筆記本上跑的，如果出現問題請開啟控制檯檢視問題原因
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body><!--video用於顯示媒體裝置的視訊流，自動播放--> <video id="video" autoplay style="width: 480px;height: 320px"></video> <!--拍照按鈕--> <div> <button id="capture">拍照</button> </div> <!--描繪video截圖--> <canvas id="canvas" width="480px" height="320px"></canvas> </body> </html> <script> //dom let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let capture = document.getElementById('capture'); let context = canvas.getContext('2d'); // getUserMediaToPhoto函式是自己定義的，傳入3個引數 // 第一個引數constraints是一個物件，指定了請求的媒體型別和相對應的引數，針對本專案講，就是設定視訊的寬高 // 參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia // 第二個引數：success，是成功回撥函式 // 第三個引數：error，是丟擲錯誤函式，具體又分為：沒有獲取到使用者視訊許可權 和 瀏覽器不支援，分別在控制檯輸出提示 function getUserMediaToPhoto(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新標準API 參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia // 在絕大多數情況下，會呼叫這個方法，.then .catch是Promise的方法 // 傳入第一個引數，constraints,然後執行.then 然後執行success方法 參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia#%E7%A4%BA%E4%BE%8B navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit核心瀏覽器，針對不同瀏覽器，呼叫瀏覽器的獲取使用者媒體的方法 navigator.webkitGetUserMedia(constraints, success, error); } else if (navigator.mozGetUserMedia) { //firefox瀏覽器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //舊版API navigator.getUserMedia(constraints, success, error); } } //成功回撥函式 function success(stream) { //相容webkit核心瀏覽器 window.URL主要作用是讀取檔案的字串，在img或video等帶有src屬性的標籤上展示。 var CompatibleURL = window.URL || window.webkitURL; //將視訊流轉化為video的源 // video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play();//播放視訊 console.log(video.srcObject); } function error(error) { console.log('訪問使用者媒體失敗：', error.name, error.message); document.write("訪問使用者媒體失敗!") } if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) { getUserMediaToPhoto({ video: { width: 480, height: 320 } }, success, error); } else { alert('你的瀏覽器不支援訪問使用者媒體裝置'); } capture.addEventListener('click', function () { // 將video畫面描繪在canvas畫布上 context.drawImage(video, 0, 0, 480, 320); }) </script>