HTML如何調用攝像頭？getUserMedia怎么配合HTML？

調用攝像頭在網頁中實現視頻采集功能主要依賴于 getusermedia api 和 html 的

調用攝像頭在網頁中實現視頻采集功能，主要依賴于瀏覽器提供的 getUserMedia API。這個 API 可以通過 JavaScript 獲取用戶的媒體設備（比如攝像頭和麥克風），然后配合 HTML 中的

1. 基本使用：如何調用攝像頭

要調用攝像頭，首先需要使用 navigator.mediaDevices.getUserMedia() 方法。它接收一個約束對象作為參數，用來指定請求哪種類型的媒體流。

navigator.mediaDevices.getUserMedia({ video: true })   .then(function(stream) {     // 成功獲取流后，可以將其綁定到 video 元素上顯示     const video = document.querySelector('video');     video.srcObject = stream;   })   .catch(function(error) {     console.error('無法獲取攝像頭', error);   });

上面這段代碼的意思是：嘗試獲取攝像頭視頻流，并把它顯示在一個

立即學習“前端免費學習筆記（深入）”；

2. 配合 HTML 使用：video 標簽的作用

HTML 中最常用的就是

<video autoplay></video>

注意加上 autoplay 屬性，否則有些瀏覽器不會自動播放流內容。

JavaScript 拿到流之后，通過 srcObject 把流綁定到

3. 添加一些實用控制：比如關閉攝像頭

有時候你想讓用戶能“關閉”攝像頭，這時候可以通過訪問流中的軌道并停止它們來實現。

let stream;  navigator.mediaDevices.getUserMedia({ video: true })   .then(function(s) {     stream = s;     const video = document.querySelector('video');     video.srcObject = stream;   });  function stopCamera() {   if (stream) {     stream.getTracks().forEach(track => track.stop());   } }

這樣你可以加一個按鈕，點擊時執行 stopCamera() 就能關閉攝像頭了。

4. 注意事項與兼容性

• HTTPS 環境：大多數現代瀏覽器要求頁面必須運行在 HTTPS 下才能訪問攝像頭。
• 用戶授權：第一次調用時會彈出權限提示，用戶可以選擇允許或拒絕。
• 移動端支持：主流瀏覽器基本都支持 getUserMedia，但在某些老舊設備或低版本瀏覽器中可能會有問題。
• 安全限制：iframe 中加載的頁面如果沒有特定權限，可能無法調用攝像頭。

基本上就這些。整個流程不算復雜，但要注意處理錯誤和權限問題，否則容易出現黑屏或靜音等現象。