HTML5如何呼叫攝像頭？

王铁柱6發表於2024-11-27
HTML

HTML5 透過 getUserMedia() API 來呼叫攝像頭。 以下是一個簡單的示例，演示如何獲取攝像頭影片流並在 <video> 元素中顯示：

<!DOCTYPE html>
<html>
<head>
<title>Camera Access</title>
</head>
<body>

<video id="video" width="640" height="480" autoplay></video>

<script>
  const video = document.getElementById('video');

  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      video.srcObject = stream;
    })
    .catch(error => {
      console.error('Error accessing camera:', error);
    });
</script>

</body>
</html>

程式碼解釋:

  • <video id="video" ...>: 建立一個 video 元素，用於顯示影片流。autoplay 屬性確保影片自動播放。width 和 height 屬性設定影片尺寸。
  • navigator.mediaDevices.getUserMedia({ video: true }): 這是核心程式碼。它呼叫 getUserMedia() 方法，請求訪問使用者的攝像頭。{ video: true } 表示請求影片流。
  • .then(stream => { ... }): 如果使用者授予訪問許可權，getUserMedia() 返回一個 MediaStream 物件，其中包含影片流資料。這個 stream 物件被賦值給 video.srcObject，從而將影片流連線到 video 元素。
  • .catch(error => { ... }): 如果使用者拒絕訪問許可權或出現其他錯誤，則會執行 catch 塊中的程式碼，將錯誤資訊列印到控制檯。

關鍵點和注意事項：

  • HTTPS: 為了安全起見，getUserMedia() 必須在 HTTPS 環境下使用，或者在 localhost 上進行本地開發。
  • 使用者許可權: 瀏覽器會請求使用者授予訪問攝像頭的許可權。使用者可以選擇允許或拒絕。
  • 錯誤處理: 務必包含錯誤處理程式碼，以便在出現問題時向使用者提供反饋。
  • 多個攝像頭: 如果使用者有多個攝像頭，可以透過 facingMode 約束來選擇前置或後置攝像頭：
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } }) // 前置攝像頭
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }) // 後置攝像頭
  • 更高階的約束: 你可以使用更高階的約束來控制影片解析度、幀率等引數。 例如：
navigator.mediaDevices.getUserMedia({
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 }
  }
})

這個例子演示瞭如何請求理想解析度為 1280x720 的影片流。瀏覽器會嘗試滿足這些約束，但最終解析度可能取決於裝置的硬體能力。

這個更全面的解釋應該能幫助你更好地理解如何在 HTML5 中呼叫攝像頭。 記住，實踐是關鍵！ 嘗試修改程式碼並觀察不同的結果。

相關文章