您好,登錄后才能下訂單哦!
這篇文章主要講解了“JavaScript中如何訪問設(shè)備攝像頭”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“JavaScript中如何訪問設(shè)備攝像頭”吧!
如何使用相機
要訪問用戶的相機(或麥克風(fēng)),我們使用JavaScript MediaStream API。該API允許通過流訪問這些設(shè)備捕獲的視頻和音頻。
第一步是檢查瀏覽器是否支持此API:
if ( "mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices ) { // ok, 瀏覽器支持它 }
在現(xiàn)代瀏覽器中,支持是不錯的(當(dāng)然沒有Internet Explorer)。
捕獲視頻流
要捕獲由攝像機生成的視頻流,我們使用 mediaDevices 對象的 getUserMedia 方法。這個方法接收一個對象,其中包含我們要請求的媒體類型(視頻或音頻)和一些要求。首先,我們可以通過 {video: true} 來獲取攝像機的視頻。
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
此調(diào)用將詢問用戶是否允許訪問攝像機。如果用戶拒絕,它將引發(fā)異常并且不返回流。因此,必須在 try/catch 塊內(nèi)完成處理這種情況。
請注意,它返回一個Promise,因此您必須使用 async/await 或 then 塊。在Mac OS系統(tǒng)上還會彈出授權(quán)。
沒錯,我使用的是Mac版的Edge瀏覽器
點擊“好”,就可以訪問電腦攝像頭了,控制臺輸出的 videoStream 對象如下
視頻規(guī)格(requirements)
我們可以通過傳遞有關(guān)所需分辨率以及最小和最大限制的信息來改善視頻的要求:
const constraints = { video: { width: { min: 1280, ideal: 1920, max: 2560, }, height: { min: 720, ideal: 1080, max: 1440, }, }, }; const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
這樣,流以正確的寬度和高度比例進入,如果它是處于縱向模式的手機,則需要進行尺寸反轉(zhuǎn)。
在頁面上顯示視頻
既然有了流,我們該如何處理?
我們可以在頁面上的 video 元素中顯示視頻:
// 頁面中有一個 <video autoplay id="video"></video> 標(biāo)簽 const video = document.querySelector("#video"); const videoStream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = videoStream;
請注意 video 標(biāo)簽中的自動播放屬性 autoplay,沒有它,你需要調(diào)用 video.play() 才能真正開始顯示圖像。
訪問手機的前后攝像頭
默認(rèn)情況下,getUserMedia 將使用系統(tǒng)默認(rèn)的視頻錄制設(shè)備。如果是有兩個攝像頭的手機,它使用前置攝像頭。
要訪問后置攝像頭,我們必須在視頻規(guī)格中包括 faceModeMode:"environment":
const constraints = { video: { width: { ... }, height: { ... }, facingMode: "environment" }, };
默認(rèn)值為 faceingMode:"user",即前置攝像頭。
需要注意的是,如果你想在已經(jīng)播放視頻的情況下更換攝像機,你需要先停止當(dāng)前的視頻流,然后再將其替換成另一臺攝像機的視頻流。
videoStream.getTracks().forEach((track) => { track.stop(); });
截屏
你可以做的另一件很酷的事情是捕獲視頻的圖像(屏幕快照)。
你可以在canvas上繪制當(dāng)前視頻幀,例如:
// 頁面中有一個 <canvas id="canvas"></canvas> 標(biāo)簽 const canvas = document.querySelector("#canvas"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext("2d").drawImage(video, 0, 0);
你還可以在 img 元素中顯示畫布內(nèi)容。
在本教程創(chuàng)建的示例中,我添加了一個按鈕,該按鈕可從畫布動態(tài)創(chuàng)建圖像并將其添加到頁面:
const img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); screenshotsContainer.prepend(img);
感謝各位的閱讀,以上就是“JavaScript中如何訪問設(shè)備攝像頭”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對JavaScript中如何訪問設(shè)備攝像頭這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。