前幾天領導安排任務以webrtc為基礎來實現android端的點對點視訊通話，剛開始一臉蒙，雖然最後以官網DEMO實現，但是果然感覺自己還是一陣蒙圈，以此部落格來記錄一下我的webrtc之行。

首先我的任務目標只是要提供音視訊通話的DEMO，所以去官網遍歷一圈

一、用Google自帶的翻譯檢視它所支援的平臺，谷歌瀏覽器的中文就不深究了，反正有圖示

如果要在電腦上自己搭建伺服器，以下幾個瀏覽器會是最好的選擇。

二、 這是WebRTC的原始碼  反正也看不懂 先放棄了 主要看Sample

三、先看看人家的主要功能點介紹

一、介紹

WebRTC是一個開源專案，可以在Web和本機應用程式中實現音訊，視訊和資料的實時通訊。

有幾個主要的JS api 先了解一下

1、

   getUserMedia()在視訊元素中顯示視訊流。

   傳遞給回撥的在全域性範圍內的MediaStream物件，因此您可以從控制檯進行檢查。streamgetUserMedia()

 這個方法可以開啟WEB端的視訊裝置並獲得視訊流資料

2、

3、

• 也就是P2P對等連線唄
• P1,P2  兩個人 通過 MediaStream物件localStream

MediaStream是什麼？應用通過程式碼得到的視訊流，也就是getUserMedia方法中得到的本端的視訊流

let localStream;
let pc1;
let pc2;
const offerOptions = {
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
};

function getName(pc) {
  return (pc === pc1) ? 'pc1' : 'pc2';
}

function getOtherPc(pc) {
  return (pc === pc1) ? pc2 : pc1;
}

function gotStream(stream) {
  console.log('Received local stream');
  localVideo.srcObject = stream;
  localStream = stream;
  callButton.disabled = false;
}

function start() {
  console.log('Requesting local stream');
  startButton.disabled = true;
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true
    })
    .then(gotStream)
    .catch(e => alert(`getUserMedia() error: ${e.name}`));
}
 

4、

  它主要是new 出了三個類

localConnection  = localConnection =  new  RTCPeerConnection（servers）;
 建立本地對等連線物件localConnection 

 這麼說吧 傳輸視訊就是RPC了

sendChannel =  localConnection。createDataChannel（' sendDataChannel '）;
'建立傳送資料通道'

 傳輸文字資訊啥的 就得是RTCDataChannel 了

 remoteConnection =  new  RTCPeerConnection（servers）;
 建立的遠端對等連線物件remoteConnection 

二、訊號

 WebRTC使用RTCPeerConnection在瀏覽器之間傳遞流資料，但也需要一種協調通訊和傳送控制訊息的機制，這一過程稱為信令。

三、端也端之間有各自的網路環境，想要互傳資料就要打破環境的限制，也就是閘道器和防火牆

所以WebRTC API使用STUN伺服器獲取計算機的IP地址，並使用TURN伺服器作為中繼伺服器來

保證兩端對等可以成功。

四、需要的工具及環境

• Chrome 47或以上
• 示例程式碼
• 文字編輯器 
• HTML，CSS和JavaScript的基礎知識 這些我只知道一丟丟 還能對付一下