最近由于業(yè)務(wù)的原因，需要在Web端頁面接入調(diào)試各類的網(wǎng)絡(luò)攝像頭，遇到了很多匪夷所思的問題（說的就是讀得出攝像頭的品牌，讀不出攝像頭的分辨率）。于是整理了這篇文章作為備忘錄，也希望能幫到有類似的小伙伴們。

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById(’#video’) // 兼容性監(jiān)測 if( ’srcObject’ in video ) {video.srcObject = stream } else { // 在支持srcObject的瀏覽器上，不再支持使用這種方式 video.src = URL.createObjectURL(stream) } await video.play()})兼容性

從caniuse的兼容性來看，整體兼容性一般，IE系列瀏覽器完全不支持，iOS不僅需要iOS 11以上的版本，而且在APP的嵌入式頁面也無法通過api進(jìn)行調(diào)用。

瀏覽器控制臺提示mediaDevices.getUserMedia is not a function

由于受瀏覽器的限制，navigator.mediaDevices.getUserMedia在https協(xié)議下是可以正常使用的，而在http協(xié)議下只允許localhost/127.0.0.1這兩個(gè)域名訪問，因此在開發(fā)時(shí)應(yīng)做好容災(zāi)處理，上線時(shí)則需要確認(rèn)生產(chǎn)環(huán)境是否處于https協(xié)議下。

let mediaDevices = navigator.mediaDevices || null if( mediaDevices === null ) { console.warn(`請確定是否處于https協(xié)議環(huán)境下`) return } mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {})

獲取攝像頭的硬件參數(shù)

我在項(xiàng)目開發(fā)中需要用到的硬件參數(shù)主要有兩種：品牌，分辨率。獲取攝像頭的品牌名稱相對來說比較簡單，可直接通過mediaDevices.enumerateDevices()獲取電腦上可使用的外設(shè)列表，通過kind字段過濾出攝像頭。

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log('瀏覽器不支持enumerateDevices屬性') return} navigator.mediaDevices.enumerateDevices().then((devices) => { let devicesList = devices.filter((device) => device.kind === ’videoinput’) // devicesList -> [{ kind: ’videoinput’, name: ’FaceTime HD Camera (Built-in)’, deviceId: xxx }] // 在devicesList獲取到的deviceId可以用于切換攝像頭 // 具體方法：mediaDevices.getUserMedia({ audio: false, video: { deviceId } })})

分辨率則不能直接通過官方的api獲取到，從MDN上查到的理由是為了保護(hù)用戶的個(gè)人隱私，而分辨率就在保護(hù)的范疇內(nèi)。（個(gè)人非常好奇分辨率為啥是隱私？）

MDN原文（鏈接）：

由于隱私保護(hù)的原因，無法訪問用戶的攝像頭和麥克風(fēng)信息

但也并不是完全無法獲取到，由于可以通過video標(biāo)簽在網(wǎng)頁上播放攝像頭中所錄取到的內(nèi)容，而video標(biāo)簽會默認(rèn)將大小設(shè)置為與攝像頭相同的大小，因此通過獲取video的大小來獲取攝像頭的分辨率。

經(jīng)過測試，獲取到的值不受樣式的影響，所以可以通過樣式控制video的大小，但是不會影響到分辨率。

let mediaDevices = navigator.mediaDevices || null if( mediaDevices === null ) { console.warn(`請確定是否處于https協(xié)議環(huán)境下`) return } mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById(’#video’) video.srcObject = stream await video.play() // 1280,720 console.log(video.videoWidth, video.videoHeight)})

無攝像頭/無使用權(quán)限等錯(cuò)誤的處理

getUserMedia本身集成了幾個(gè)比較常見的錯(cuò)誤提示，比如常見的無攝像頭、無使用權(quán)限等，通過catch能處理大部分類似的錯(cuò)誤。

let mediaDevices = navigator.mediaDevices || null if( mediaDevices === null ) { console.warn(`請確定是否處于https協(xié)議環(huán)境下`) return } mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById(’#video’) video.srcObject = stream await video.play() }).catch((error) => { let message = error.message || error, response = { ’permission denied’: ’瀏覽器禁止本頁面使用攝像頭，請開啟相關(guān)的權(quán)限’, ’requested device not found’: ’未檢測到攝像頭’ } alert(response[ message.toLowerCase() ] || ’未知錯(cuò)誤’)})

攝像頭拔出檢查

手機(jī)端由于攝像頭是手機(jī)自帶的，所以一般不需要對攝像頭是否拔出進(jìn)行檢查。但在PC上有拔出攝像頭數(shù)據(jù)線的情況發(fā)生，這種時(shí)候就需要對攝像頭的狀態(tài)進(jìn)行監(jiān)控。最開始想到的是，getUserMedia在攝像頭拔出時(shí)可能會通過catch報(bào)錯(cuò)。然而經(jīng)過多次的實(shí)驗(yàn)，getUserMedia在攝像頭拔出時(shí)，不會響應(yīng)找不到攝像頭的錯(cuò)誤，想通過catch直接監(jiān)控這種方法并不可行。在幾乎沒有思路的時(shí)候，在getUserMedia文檔上看到了這么一句話：

getUserMedia返回一個(gè) Promise ， 這個(gè)Promise成功后的回調(diào)函數(shù)帶一個(gè) MediaStream 對象作為其參數(shù)。

MediaStream是接收多媒體（包括音頻、視頻）內(nèi)容流的一個(gè)對象，在谷歌瀏覽器（其他瀏覽器未測試）的控制臺上打印之后，其屬性值如下：

id是MediaStream對象的唯一標(biāo)識符，active是當(dāng)前內(nèi)容流是否處于活動(dòng)狀態(tài)，下面幾個(gè)字段則是谷歌瀏覽器提供的鉤子。

在攝像頭拔出的一瞬間，active會從true變更為false，同時(shí)觸發(fā)oninactive鉤子，有了狀態(tài)監(jiān)聽之后事情就簡單了許多。代碼經(jīng)過測試后發(fā)現(xiàn)，對用戶變更攝像頭權(quán)限也有效。

// 判斷攝像頭是否在線let cameraIsOnline = false const loadWebCamera = () => { let mediaDevices = navigator.mediaDevices || null if( mediaDevices === null ) { console.warn(`請確定是否處于https協(xié)議環(huán)境下`) return } mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById(’#video’) video.srcObject = stream // 兼容性處理 if( stream.oninactive === null ) { // 監(jiān)聽流中斷，流中斷后將重新進(jìn)行調(diào)用自身進(jìn)行狀態(tài)監(jiān)測 stream.oninactive = () => loadWebCamera() } await video.play() cameraIsOnline = true }).catch((error) => { let message = error.message || error, response = {’permission denied’: ’瀏覽器禁止本頁面使用攝像頭，請開啟相關(guān)的權(quán)限’,’requested device not found’: ’未檢測到攝像頭’,’could not start video source’: ’無法訪問到攝像頭，請重新插拔后重試’ } cameraIsOnline = false alert(response[ message.toLowerCase() ] || ’未知錯(cuò)誤’) })}

不過，兼容性也非常地捉急，也有很多字段都是提案階段，開發(fā)階段建議做好兼容性處理，防止生產(chǎn)環(huán)境出現(xiàn)問題。

到此這篇關(guān)于js實(shí)現(xiàn)調(diào)用網(wǎng)絡(luò)攝像頭及常見錯(cuò)誤處理的文章就介紹到這了,更多相關(guān)js 調(diào)用網(wǎng)絡(luò)攝像頭內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！