WebRTC API之 mediaStream詳解

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）屏幕捕獲

能夠看看這個例子

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