WebRTC學習總結（1）：本地視頻的獲取和錄製

簡單介紹

WebRTC （ Real-Time Communications）是一個可以在 Web 應用程序中實現音頻、視頻和數據的實時通信的開源項目，它封裝了很多音視頻的採集、處理功能，比如音視頻流的編解碼、降噪和回聲消除等。通過WebRTC，我們可以方便地獲取優化後的媒體流，將其輸入到本地或轉發給其他對等端。

WebRTC設計的初衷是爲了在無插件的條件下實現兩個瀏覽器之間**點對點（peer to peer，P2P）**連接，從而進行音視頻的實時通信。這種通信模式大多數情況下不需要依賴於服務器的中轉，WebRtc只適合小範圍（8人以內）音視頻會議，

在這端時間的學習中，我主要實現了以下功能：
1. 本地視頻的播放
2. 視頻錄製
3. 一對一視頻對話
4. 一對多視頻對話
5. 多對多視頻對話

下面就把我這段時間學習和實踐的內容整理一下。

1. 本地視頻的播放

本地視頻流的獲取是webRTC最基本也是最簡單的功能，用到的API是getUserMedia，調用方法如下：

navigator.mediaDevices.getUserMedia({
    audio: ture,
    video: true
}) //約束條件
    .then(gotLocalMediaStream)
    .catch(function (e) {
        alert('getUserMedia() error: ' + e.name);
    });


function gotLocalMediaStream(mediastream) {
    console.log('>>>>正在打開本地攝像頭');
    localStream = mediastream;
    localVideo.srcObject = mediastream;
}

上面代碼中的約束條件（constraints)可以用來指定和媒體流有關的屬性，比如：

// 只要視頻流
{ audio: false, video: true }

//指定視頻流的寬高，注意寬高比和採集到的不一樣的時候會自動裁剪
{ audio: false, video: { width: 1280, height: 720 } }

//指定視頻流的寬高的理想值、最大值和最小值
{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

另外，對於移動設備，可以通過設置 constraints 指定獲取前置攝像頭和後置攝像頭，對於火狐瀏覽器，還可以設置視頻源爲屏幕，但是這些功能我沒有自己嘗試過，就不放代碼了。

有了getUserMedia這個強大的API，我們就可以很方便地在網頁中調用攝像頭了。我們可以在HTML文件里加入一個video標籤，然後將獲得的視頻流設置爲video對象的srcObject，這點在上面的代碼中也體現出來了。

2. 視頻錄製

錄製視頻，需要用到另一個API——MediaRecorder。這個接口需要通過調用MediaRecorder()構造方法進行實例化，創建一個新的MediaRecorder對象，並對指定的MediaStream對象進行錄製。

下面就給出核心的代碼，使用的時候把這些方法與對應的事件綁定就好了：

//打開本地攝像頭
function openCamera() {
    navigator.mediaDevices.getUserMedia({video: true})
        .then(stream => {
            window.stream = stream;
            videoplay.srcObject = stream;
        }).catch(error => {
        console.log(error);
    });
    console.log("攝像頭已打開！")
}

var buffer;//二進制數組，用於儲存視頻
var mediaRecorder;

//開始錄製
function startRecord() {
    buffer = []; //初始化數組
    var options = {
        //錄製視頻，格式爲webm
        mimeType: 'video/webm;codecs=vp8'
    };
    //檢驗是否支持mimeType
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.log(`${options.mimeType} is not supported`);
        return;
    }
    try {
        meidaRecoder = new MediaRecorder(window.stream, options);
    } catch (e) {
        console.log('Filed tp create MideaRecoder', e);
        return;
    }
    console.log("開始錄製視頻");
    //存儲數據時觸發事件,數據有效時執行handleDataAvailable
    meidaRecoder.ondataavailable = handleDataAvailable;
    //設置時間片,每過一個時間片就會存儲數據
    meidaRecoder.start(10);
}

//停止錄製
function stopRecord() {
    meidaRecoder.stop();
    console.log("結束錄製視頻");
}

//播放錄製的視頻
function playRecord() {
    var blob = new Blob(buffer, {type: 'video/webm'});
    recvideo.src = window.URL.createObjectURL(blob);
    recvideo.srcObject = null;
    recvideo.control = true;
    recvideo.play();
}

//下載錄製的視頻
function saveRecord(){
    var blob = new Blob(buffer, {type: 'video/webm'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.style.display = 'none';
    a.download = 'download.mp4';
    a.click();
    console.log("已下載至本地")
}

上面的代碼是用來錄製本地攝像頭的畫面的，如果要錄製遠程畫面也非常容易，只需要將下面這行代碼裏的 window.stream 替換爲遠程視頻流即可。

meidaRecoder = new MediaRecorder(window.stream, options)