webRTC脫坑筆記（二）— webRTC API之MediaStream(getUserMedia)

webRTC API

WebRTC API包括媒體捕獲、音頻視頻的編碼和解碼、傳輸層和會話管理。

• getUserMedia()：捕獲音頻和視頻。
• MediaRecorder：錄制音頻和視頻。
• RTCPeerConnection：在用戶之間傳輸音頻和視頻。
• RTCDataChannel：用戶之間的流數據。
  
  

1.媒體捕獲MediaStream（又名getUserMedia）

MediaStream接口是一個媒體內容的流.，一個流包含幾個軌道，比如視頻和音頻軌道。作用是從用戶本地攝像機和麥克風訪問媒體流。getUserMedia()方法是訪問本機輸入設備的主要方式。

第一步是訪問用戶設備的攝像頭和麥克風。我們檢測可用設備的類型,獲得用戶訪問這些設備的權限,並管理數據流。

注意：

• 實時音視頻以流對象的形式表示
• 通過詢問用戶是否授權，有安全控制，只允許授予一次權限，此后不再要求訪問
• 輸入設備選擇由mediaStream處理
• 每個mediaStream對象包括幾個mediaStreamTRack對象，代表來自不同設備的音視頻
• 每個mediaStreamTrack對象可能包括幾個信道（左聲道和右聲道）
• 兩種方法輸出mediaStream對象。首先將音視頻輸出顯示，設置srcObject屬性將MediaStream附加到視頻元素，然后將輸出發送到RTCPeerConnection對象，然后傳送到遠程對象。

（1）獲取本地媒體流，並檢測瀏覽器是否支持

navigator.mediaDevices.getUserMedia  =                         navigator.mediaDevices.getUserMedia ||
 navigator.mediaDevices.webkitGetUserMedia ||
 navigator.mediaDevices.mozGetUserMedia ||
 navigator.mediaDevices.msGetUserMedia;

if (navigator.getUserMedia) {
    // 支持
} else {
    // 不支持
}
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then( ).catch( );

（2）接受的參數

getUserMedia方法接受三個參數，第一個參數是一個對象，即約束條件，另外兩個是成功回調函數和失敗回調函數。

約束條件

約束條件里包括捕獲對象，表示要獲取哪些多媒體設備，你獲取本地媒體流時是要求獲取攝像頭還是麥克風，也可以設置視頻分辨率的值、寬高比、面向模式（前置還是后置攝像頭）、幀速率、高度、寬度等。可以單獨把約束條件提出來單獨寫。

navigator.mediaDevices.getUserMedia({
    // 以下就是約束條件
    video: true, 
    audio: true 
})
    .then(createConn )
    .catch(
    console.log(`getUserMedia() error: ${e.name}`);
    );

// 或者
let constraints = {
    video: true,
    audio: true,
    ...
}
navigator.mediaDevices.getUserMedia(constraints,onSuccess, onError)

除了指定捕獲對象之外，還可以指定一些限制條件，比如視頻的寬高等等。

let constraints = {
    video: {
        minWidth: 1280,
          minHeight: 720
    }
    ...
}

如果網頁使用了getUserMedia方法，瀏覽器就會詢問用戶，是否同意瀏覽器調用麥克風或攝像頭。如果用戶同意，就調用回調函數onSuccess；如果用戶拒絕，就調用回調函數onError

成功回調函數

獲取多媒體設備成功時調用。onSuccess回調函數的參數是一個數據流對象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分別返回一個數組，其成員是數據流包含的音軌和視軌（track）。

使用的聲音源和攝影頭的數量，決定音軌和視軌的數量。比如，如果只使用一個攝像頭獲取視頻，且不獲取音頻，那么視軌的數量為1，音軌的數量為0。每個音軌和視軌，有一個kind屬性，表示種類（video或者audio），和一個label屬性（比如FaceTime HD Camera (Built-in)）。

失敗回調函數

獲取多媒體失敗時調用。Error對象的code屬性有說明錯誤的類型：

• PERMISSION_DENIED：用戶拒絕提供信息。
• NOT_SUPPORTED_ERROR：瀏覽器不支持硬件設備。
• MANDATORY_UNSATISFIED_ERROR：無法發現指定的硬件設備。

下面看一個完整例子：

let constraints = {video: true};

function onSuccess(stream) {
  let video = document.querySelector("video");
    // video.src = window.URL.createObjectURL(stream);這種寫法已被移除
  video.srcObject = stream;
}

function onError(error) {
  console.log("getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, onSuccess, onError);

注意，如果存在回聲，應該在video或者audio節點處添加muted，進行簡單的回聲消噪。

（3）屏幕捕獲

可以看看這個例子

（4）方法

詳情可見[mediaStream-MDN](

參考資料：
mediaStream-MDN
WebRTC Native APIs
webRTC-javaScript