5.3　采集音視頻數據

通過enumerateDevices（）接口獲得音視頻設備后，就可以選擇其中的設備進行數據采集了。在瀏覽器下采集音視頻數據也很方便，調用getUserMedia（）這個API就可以采集到。getUserMedia的接口格式如代碼5.4所示。

代碼5.4　getUserMedia（）接口格式

---

navigator.mediaDevices.
      getUserMedia(MediaStreamConstrains);

---

該接口有一個MediaStreamConstrains類型的輸入參數，可以用來控制從哪個設備上采集音視頻數據，以及限制采集到的數據的格式，如限制采集到的視頻分辨率、音頻數據的采樣率、采樣大小等。其結構如代碼5.5所示。

代碼5.5　MediaStreamConstrains結構體

---

dictionary MediaStreamConstrains {
   (boolean) or (MediaTrackConstrains) video = false;
   (boolean) or (MediaTrackConstrains) audio = false;
}

---

從上面MediaStreamConstrains類型的定義可以看出，video和audio屬性既可以是boolean類型，也可以是MediaTrackConstrains類型（只有像JavaScript這種弱類型語言才可以做這一點）。因此，我們既可以直接給video和audio賦值true/false，簡單地指明是否采集視頻或音頻數據，也可以給它賦值一個MediaTrackConstrains類型的值，對音視頻設備做更精準的設置。

如果直接給video/audio屬性賦值true，則瀏覽器會使用默認設備和默認參數采集音視頻數據，否則如果給video/audio賦值MediaTrackConstrains類型值，則瀏覽器會按MediaTrackConstrains中的限制，從指定的設備中采集音視頻數據。MediaTrackConstrains結構如代碼5.6所示。

代碼5.6　MediaTrackConstraintSet結構體

---

dictionary MediaTrackConstraintSet {
   //視頻相關
   ConstrainULong width;
   ConstrainULong height;
   ConstrainDouble aspectRatio;//寬高比
   ConstrainDouble frameRate;
   ConstrainDOMString facingMode; //前置/后置攝像頭
   ConstrainDOMString resizeMode; //縮放或裁剪
   //音頻相關
   ConstrainULong sampleRate;
   ConstrainULong sampleSize;
   ConstrainBoolean echoCancellation;
   ConstrainBoolean autoGainControl;
   ConstrainBoolean noiseSuppression;
   ConstrainDouble latency;//目標延遲
   ConstrainULong channelCount;
   //設備相關
   ConstrainDOMString deviceId;
   ConstrainDOMString groupId;
};

---

從上面的代碼片段中可以看到，MediaTrackConstrains結構由三部分組成，即視頻相關屬性、音頻相關屬性以及設備相關屬性。視頻屬性中包括分辨率、視頻寬高比、幀率、前置/后置攝像頭、視頻縮放；音頻屬性包括采樣率、采樣大小、是否開啟回音消除、是否開啟自動增益、是否開啟降噪、目標延遲、聲道數；設備相關屬性包括設備ID、設備組ID。

我們來看一個具體的例子，看看如何通過getUserMedia（）接口來采集音視頻數據。具體代碼參見代碼5.7。

代碼5.7　獲取音視頻流

---

1 // 采集到某路流
2 function gotMediaStream(stream){
3    …
4 }
5 …
6 // 從設備選項欄里選擇某個設備
7 var deviceId = xxx;
8
9 // 設置采集限制
10 var constraints = {
11   video : {
12      width: 640,
13      height: 480,
14      frameRate 　: 　15 ,
15      facingMode 　: 'enviroment ',
16      deviceId 　: 　deviceId ?{ exact:deviceId }: undefined
17   },
18   audio : false
19 }
20
21 // 開始采集數據
22 navigator.mediaDevices.getUserMedia(constraints) 　
23     .then(gotMediaStream)
24     .catch(handleError);
25 …

---

在上面的代碼片段中，首先執行第22行代碼，即調用getUserMedia（）接口，然后根據constraints中的限制獲取音視頻數據。在這個例子中，getUserMedia（）從指定設備（deviceId）上按指定參數采集視頻數據，具體參數如下：分辨率為640×480、幀率為15幀/秒、使用后置攝像頭（environment）。因為audio屬性為false，所以此例中僅采集視頻數據而不采集音頻數據。

此外，從上面的代碼中還可以看到，調用getUserMedia（）接口的方式與調用enumerate Devices（）接口的方式是一樣的，也是使用Promise方式。當調用getUserMedia（）成功時，會回調gotMediaStream（）函數，該函數的輸入參數MediaStream里存放的就是音視頻數據流。當獲得音視頻數據后，既可以把它作為本地預覽，也可以將它傳送給遠端，從而實現一對一通信。如果調用getUserMedia（）接口失敗，則調用錯誤處理函數handleError。

[1] https://w3c.github.io/mediacapture-main/#def-constraint-facingMode