JavaScript中如何訪問設備攝像頭

這篇文章主要講解了“JavaScript中如何訪問設備攝像頭”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中如何訪問設備攝像頭”吧！

如何使用相機

要訪問用戶的相機(或麥克風)，我們使用JavaScript MediaStream API。該API允許通過流訪問這些設備捕獲的視頻和音頻。

第一步是檢查瀏覽器是否支持此API：

if (   "mediaDevices" in navigator &&   "getUserMedia" in navigator.mediaDevices ) {   // ok, 瀏覽器支持它 }

在現代瀏覽器中，支持是不錯的(當然沒有Internet Explorer)。

捕獲視頻流

要捕獲由攝像機生成的視頻流，我們使用 mediaDevices 對象的 getUserMedia  方法。這個方法接收一個對象，其中包含我們要請求的媒體類型(視頻或音頻)和一些要求。首先，我們可以通過 {video: true} 來獲取攝像機的視頻。

const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });

此調用將詢問用戶是否允許訪問攝像機。如果用戶拒絕，它將引發異常并且不返回流。因此，必須在 try/catch 塊內完成處理這種情況。

請注意，它返回一個Promise，因此您必須使用 async/await 或 then 塊。在Mac OS系統上還會彈出授權。

沒錯，我使用的是Mac版的Edge瀏覽器

點擊“好”，就可以訪問電腦攝像頭了，控制臺輸出的 videoStream 對象如下

視頻規格(requirements)

我們可以通過傳遞有關所需分辨率以及最小和最大限制的信息來改善視頻的要求：

const constraints = {   video: {     width: {       min: 1280,       ideal: 1920,       max: 2560,     },     height: {       min: 720,       ideal: 1080,       max: 1440,     },   }, };  const videoStream = await navigator.mediaDevices.getUserMedia(constraints);

這樣，流以正確的寬度和高度比例進入，如果它是處于縱向模式的手機，則需要進行尺寸反轉。

在頁面上顯示視頻

既然有了流，我們該如何處理?

我們可以在頁面上的 video 元素中顯示視頻：

// 頁面中有一個 <video autoplay id="video"></video> 標簽 const video = document.querySelector("#video"); const videoStream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = videoStream;

請注意 video 標簽中的自動播放屬性 autoplay，沒有它，你需要調用 video.play() 才能真正開始顯示圖像。

訪問手機的前后攝像頭

默認情況下，getUserMedia 將使用系統默認的視頻錄制設備。如果是有兩個攝像頭的手機，它使用前置攝像頭。

要訪問后置攝像頭，我們必須在視頻規格中包括 faceModeMode:"environment"：

const constraints = {   video: {     width: { ... },     height: { ... },     facingMode: "environment"   }, };

默認值為 faceingMode:"user"，即前置攝像頭。

需要注意的是，如果你想在已經播放視頻的情況下更換攝像機，你需要先停止當前的視頻流，然后再將其替換成另一臺攝像機的視頻流。

videoStream.getTracks().forEach((track) => {   track.stop(); });

截屏

你可以做的另一件很酷的事情是捕獲視頻的圖像(屏幕快照)。

你可以在canvas上繪制當前視頻幀，例如：

// 頁面中有一個 <canvas id="canvas"></canvas> 標簽 const canvas = document.querySelector("#canvas"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext("2d").drawImage(video, 0, 0);

你還可以在 img 元素中顯示畫布內容。

在本教程創建的示例中，我添加了一個按鈕，該按鈕可從畫布動態創建圖像并將其添加到頁面：

const img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); screenshotsContainer.prepend(img);

感謝各位的閱讀，以上就是“JavaScript中如何訪問設備攝像頭”的內容了，經過本文的學習后，相信大家對JavaScript中如何訪問設備攝像頭這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！