AR.js攝像頭前置的問題（已解決）（H5呼叫攝像頭）

阿新 • • 發佈：2019-02-01

AR.js攝像頭前置的問題（已解決）

終於放假了，開始搬磚。很多開發者對AR.js攝像頭前置的這個問題比較苦惱，網上也有很多解決辦法，但是有些過時。接下來，我們來一起解決這個問題。先看一下效果。(PS:下面的QQ攝像頭圖，標註反了)

不久前，我看一片關於WebAR的文章，很棒，很基礎，可以先看一看，對我後面的陳述，你也需更加明白。

接下來，上重點。現在手機大部分都是前後雙攝，做AR的話，肯定是要後置攝像頭的啦，但是AR.js在谷歌瀏覽器中，會開啟後置，而現在QQ或者微信中則會開啟前置攝像頭。現在讓我們開看看我們如何控制使用控制使用手機的前後攝像頭。

navigator.mediaDevices.enumerateDevices().then(function (devices) {
    var camreass=[];
    devices.forEach(function(e){
        console.log(e)
        if(e.kind=="videoinput")
        {
            camreass.push(e.deviceId)
        }
    })
    console.log(camreass)
    var userMediaConstraints = {
        audio: false,
        video: {
            facingMode: 'environment',
            deviceId:camreass[1],
            width: {
                ideal: _this.parameters.sourceWidth,
                // min: 1024,
                // max: 1920
            },
            height: {
                ideal: _this.parameters.sourceHeight,
                // min: 776,
                // max: 1080
            }
        }
    }

這段程式碼位於AR.js的原始碼的55954行之後，是我修改之後的。

那麼是怎麼解決的這個問題的呢，其實很簡答，就是指定了deviceId（裝置編號）。

程式碼第一行其實會獲取到手機上的多媒體裝置，包括音訊輸入輸出和視訊輸入輸出等，具體情況要根據手機裝置而定。

我們的主要目的是獲取手機後攝像頭，那麼我們需要把手機的視訊輸入裝置的ID存起來，然後在進行指定即可。

我的手機是雙攝，所以會有了兩個視訊輸入裝置，也就是對應兩個裝置編號，而第2個裝置編號就是我手機的後置攝像頭的裝置編號。到現在為止，已經可以解決攝像頭的問題。下面我想說說，我是如何解決這個問題的。

1.首先我是看了上面的那篇文章，獲得到了一些提示，就是要指定手機的視訊輸入裝置編號，也就是指定攝像頭的前後。

2.照著那篇文章試了一試，搞不出來，一堆的Bug。

3.然後我想查閱API吧，看到上面文章裡面的用的很多API（大多在獲取攝像頭這裡）已經過時，然後看到它的新API。API裡面並沒有說明如何指定裝置編號，於是我列印了devices，看到裝置裡面有這樣的一個屬性deviceId，問題就在裡，然後我又查閱官方文件看到一些資訊，隨後我指定userMediaConstraints 中video的devicedId，然後測試幾番就ok拉。

最後我把修改後的AR.js傳上來，下載地址：

AR.js攝像頭前置的問題（已解決）（H5呼叫攝像頭）