WebRTC又稱 web實時通訊，主要是為了擴充套件瀏覽器的功能，使瀏覽器能夠進行實時音視訊通訊，不同的瀏覽器對Webrtc的實現程式碼也許不同，但Google的瀏覽器將Webrtc的實現程式碼開源了，以至於很多人一聽到Webrtc就聯想到Google的開源實現，以至於誤以為使用Webrtc就非常難，因為Webrtc的實現都是C/C++程式碼，讓很多人望而生畏。其實我們只需要懂得瀏覽器端的Javascript，就能使用Webrtc，很多的時候不必關心Webrtc的核心實現。本文根據自己使用webrtc的經驗撰寫，錯誤之處難免，希望朋友不吝指正。

      在WebRTC中，有三個主要的概念，理解了這三個概念 ，也就理解了WebRTC的使用技術了。這三個概念是：

• MediaStream：用於從採集裝置，Canvas等獲取音訊和視訊資料，進行音視訊壓縮。
• RTCPeerConnection：端到端的通訊聯結器，主要用於音訊和視訊資料通訊。
• RTCDataChannel：連線建立後的資料通道，可以用於任意應用資料的通訊。

MediaStream

主要是用於獲取音訊和視訊流。其JavaScript呼叫也比較簡單，樣本程式碼如下：

'use strict';

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

var constraints = { // 音訊、視訊約束
  audio: true, // 指定請求音訊Track
  video: {  // 指定請求視訊Track
      mandatory: { // 對視訊Track的強制約束條件
          width: {min: 320},
          height: {min: 180}
      },
      optional: [ // 對視訊Track的可選約束條件
          {frameRate: 30}
      ]
  }
};

var video = document.querySelector('video');

function successCallback(stream) {
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);
 

通過呼叫瀏覽器的getUserMedia函式來操作音訊和視訊，該函式接收三個引數，分別是音視訊的約束，成功的回撥以及失敗的回撥。在底層，瀏覽器通過音訊和視訊引擎對捕獲的原始音訊和視訊流加以處理，除了對畫質和音質增強之外，還得保證音訊和視訊的同步。

RTCPeerConnection

在獲取到音訊和視訊流後，下一步要做的就是將其傳送出去。但這個跟client-server模式不同，這是client-client之間的傳輸，因此，在協議層面就必須解決NAT穿透問題，否則傳輸就無從談起。另外，由於WebRTC主要是用來解決實時通訊的問題，可靠性並不是很重要，因此，WebRTC使用UDP作為傳輸層協議：低延遲和及時性才是關鍵。

呼叫RTCPeerConnection的示例程式碼如下：

var signalingChannel = new SignalingChannel();
var pc = null;
var ice = {
    "iceServers": [
        { "url": "stun:stun.l.google.com:19302" }, //使用google公共測試伺服器
        { "url": "turn:[email protected]", "credential": "pass" } // 如有turn伺服器，可在此配置
    ]
};
signalingChannel.onmessage = function (msg) {
    if (msg.offer) { // 監聽並處理通過發信通道交付的遠端提議
        pc = new RTCPeerConnection(ice);
        pc.setRemoteDescription(msg.offer);
        navigator.getUserMedia({ "audio": true, "video": true }, gotStream, logError);
    } else if (msg.candidate) { // 註冊遠端ICE候選項以開始連線檢查
        pc.addIceCandidate(msg.candidate);
    }
}
function gotStream(evt) {
    pc.addstream(evt.stream);
    var local_video = document.getElementById('local_video');
    local_video.src = window.URL.createObjectURL(evt.stream);
    pc.createAnswer(function (answer) { // 生成描述端連線的SDP應答併發送到對端
        pc.setLocalDescription(answer);
        signalingChannel.send(answer.sdp);
    });
}
pc.onicecandidate = function (evt) {
    if (evt.candidate) {
        signalingChannel.send(evt.candidate);
    }
}
pc.onaddstream = function (evt) {
    var remote_video = document.getElementById('remote_video');
    remote_video.src = window.URL.createObjectURL(evt.stream);
}
function logError() { ... }

DataChannel

DataChannel支援端到端的任意應用資料交換，就像WebSocket一樣，但是是端到端的。

建立RTCPeerConnection連線之後，兩端可以開啟一或多個通道交換文字或二進位制資料。

var ice = {
    'iceServers': [
        {'url': 'stun:stun.l.google.com:19302'},   // google公共測試伺服器
        // {"url": "turn:[email protected]", "credential": "pass"}
    ]
};

// var signalingChannel =  new SignalingChannel();

var pc = new RTCPeerConnection(ice);

navigator.getUserMedia({'audio': true}, gotStream, logError);

function gotStream(stram) {
    pc.addStream(stram);

    pc.createOffer().then(function(offer){
        pc.setLocalDescription(offer);
    });
}

pc.onicecandidate = function(evt) {
    // console.log(evt);
    if(evt.target.iceGatheringState == 'complete') {
        pc.createOffer().then(function(offer){
            // console.log(offer.sdp);
            // signalingChannel.send(sdp);
        })
    }
}

function handleChannel(chan) {
    console.log(chan);
    chan.onerror = function(err) {}
    chan.onclose = function() {}
    chan.onopen = function(evt) {
        console.log('established');
        chan.send('DataChannel connection established.');
    }

    chan.onmessage = function(msg){
        // do something
    }
}


// 以合適的交付語義初始化新的DataChannel
var dc = pc.createDataChannel('namedChannel', {reliable: false});

handleChannel(dc);
pc.onDataChannel = handleChannel;


function logError(){
    console.log('error');
}

通過以上程式碼，即可在瀏覽器端使用Webrtc，但Webrtc遠沒有這麼簡單，Webrtc需要伺服器端來支援，否則就單個瀏覽器孤掌難鳴。

Webrtc需要有一個伺服器來實現瀏覽器端點互通與音視訊資料轉發，能夠支援Webrtc的伺服器端專案很多，這裡選擇Licode搭建開發環境，相比其他專案，Licode比較輕量級，便於初學者學習。Licode扮演的角色如下：

Licode扮演著Router的角色，通過Licode，可以實現多對多通訊。

Licode的安裝

git clone https://github.com/lynckia/licode.git 
cd licode
./scripts/installUbuntuDeps.sh
./scripts/installNuve.sh
./scripts/installErizo.sh
./scripts/initLicode.sh             // 啟動 licode 
./scripts/initBasicExamples.sh      // 啟動 example

Licode 依賴很多各種各樣的庫，並且和伺服器平臺強相關，所以這其中會出各種各樣的莫名錯誤，需要手動安裝好依賴，並且 libavutil 等庫的編譯要使用 ./configure --enable-shared --disable-asm，每次編譯前最好 make clean。

配置 Licode （licode_config.js）:

config.erizoController.iceServers = [{'url': 'stun:123.218.123.109:5600'}];
config.erizoController.turnServer.url = 'turn:123.218.123.109:3478'; 
config.erizoController.publicIP = '123.218.123.109';
config.erizoController.hostname = '123.218.123.109';
config.erizo.stunserver = '123.218.123.109';
config.erizoController.turnServer.username = 'username';
config.erizoController.turnServer.password = 'password';

erizoController.js:

GLOBAL.config.erizoController.iceServers || [{'url': 'stun:123.218.123.109:3478'}];
GLOBAL.config.erizoController.publicIP = '123.218.123.109';
GLOBAL.config.erizoController.hostname = '123.218.123.109';
GLOBAL.config.erizoController.turnServer.url = "turn:123.218.123.109?transport=udp";
GLOBAL.config.erizoController.turnServer.username = "username";
GLOBAL.config.erizoController.turnServer.password = "password";