WebRTC (getUserMedia)如何指定前鏡頭或後置鏡頭?

10 / 23, 2017 HTML5 , JS

最近在寫 WebRTC 的 Web App,遇到一個問題,就是不論我怎麼寫,手機上永遠都是啟動前鏡頭,可是我希望能夠用後置鏡頭,花了很久,翻了很多資料,大多寫使用 facingMode,結果發現解法跟網路上寫的根本不一樣(翻桌),所以記錄一下,分享給所有被文件雷的夥伴們(?)

一般來說,如果沒指定,都是預設前鏡頭,所以通常什麼都不用指定就可以了

至於後置鏡頭怎麼指定,廢話少說,先貼 Code

簡單介紹一下, enumerateDevices 這個函數是列出所有可用的裝置,包含鏡頭和麥克風等,但我們只要鏡頭(videoinput)而已,所以第二行用 filter 把 videoinput 以外的東西都刪掉,接著把殘餘的裝置窮舉一遍,因為通常後置鏡頭會有 “back” 之類的字串,所以只要遇到有 back 字串的,就指定是該鏡頭(用 getUserMediaconstraints 中的 deviceID 指定),如果沒有就使用第一個。至於 facingMode: ‘environment’ 則是指定要後鏡頭,因為有些手機(如 iPhone )是不分 deviceId 的,必須用 facingMode: ‘environment’ 去指定要後置鏡頭(前鏡頭的話是 ‘user’)。

然後,你就會看到好棒棒的後置鏡頭了(灑花)

至於前鏡頭為了避免哪個瀏覽器很雷亂給鏡頭,所以可能還是指定一下會比較好,可以把搜尋 back 字串改成 front,然後 facingMode 改成 user 就可以了