JavaScript中怎么訪(fǎng)問(wèn)設(shè)備攝像頭，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、韶山網(wǎng)絡(luò)推廣、小程序定制開(kāi)發(fā)、韶山網(wǎng)絡(luò)營(yíng)銷(xiāo)、韶山企業(yè)策劃、韶山品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪(fǎng)、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供韶山建站搭建服務(wù)，24小時(shí)服務(wù)熱線(xiàn)：18982081108，官方網(wǎng)址：chinadenli.net

如何使用相機(jī)

要訪(fǎng)問(wèn)用戶(hù)的相機(jī)(或麥克風(fēng))，我們使用JavaScript MediaStream API。該API允許通過(guò)流訪(fǎng)問(wèn)這些設(shè)備捕獲的視頻和音頻。

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

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

在現(xiàn)代瀏覽器中，支持是不錯(cuò)的(當(dāng)然沒(méi)有Internet Explorer)。

捕獲視頻流

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

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

此調(diào)用將詢(xún)問(wèn)用戶(hù)是否允許訪(fǎng)問(wèn)攝像機(jī)。如果用戶(hù)拒絕，它將引發(fā)異常并且不返回流。因此，必須在 try/catch 塊內(nèi)完成處理這種情況。

請(qǐng)注意，它返回一個(gè)Promise，因此您必須使用 async/await 或 then 塊。在Mac OS系統(tǒng)上還會(huì)彈出授權(quán)。

沒(méi)錯(cuò)，我使用的是Mac版的Edge瀏覽器

點(diǎn)擊“好”，就可以訪(fǎng)問(wèn)電腦攝像頭了，控制臺(tái)輸出的 videoStream 對(duì)象如下

視頻規(guī)格(requirements)

我們可以通過(guò)傳遞有關(guān)所需分辨率以及最小和最大限制的信息來(lái)改善視頻的要求：

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

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

在頁(yè)面上顯示視頻

既然有了流，我們?cè)撊绾翁幚?

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

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

請(qǐng)注意 video 標(biāo)簽中的自動(dòng)播放屬性 autoplay，沒(méi)有它，你需要調(diào)用 video.play() 才能真正開(kāi)始顯示圖像。

訪(fǎng)問(wèn)手機(jī)的前后攝像頭

默認(rèn)情況下，getUserMedia 將使用系統(tǒng)默認(rèn)的視頻錄制設(shè)備。如果是有兩個(gè)攝像頭的手機(jī)，它使用前置攝像頭。

要訪(fǎng)問(wèn)后置攝像頭，我們必須在視頻規(guī)格中包括 faceModeMode:"environment"：

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

默認(rèn)值為 faceingMode:"user"，即前置攝像頭。

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

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

截屏

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

你可以在canvas上繪制當(dāng)前視頻幀，例如：

// 頁(yè)面中有一個(gè) <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 元素中顯示畫(huà)布內(nèi)容。

在本教程創(chuàng)建的示例中，我添加了一個(gè)按鈕，該按鈕可從畫(huà)布動(dòng)態(tài)創(chuàng)建圖像并將其添加到頁(yè)面：

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

完整代碼

在線(xiàn)效果及源代碼，源代碼并不多，很簡(jiǎn)單，相信只要有點(diǎn)Javascript基礎(chǔ)都能看懂。需要的請(qǐng)復(fù)制下面的鏈接，或私信關(guān)鍵字：攝像頭。

https://coding.zhangbing.site/view.html?url=./list/camera-api/index.html

手機(jī)QQ中瀏覽效果

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么訪(fǎng)問(wèn)設(shè)備攝像頭的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱(chēng)：JavaScript中怎么訪(fǎng)問(wèn)設(shè)備攝像頭
分享地址：http://chinadenli.net/article30/poojso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、定制網(wǎng)站、電子商務(wù)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)