WebRtc筆記

全稱是： Web browser Real Time Communication
特點如下：

• 是基於瀏覽器的實時音視頻（數據）通信技術
• 免插件
• 開源
• 已被W3C納入HTML5標準
• 跨平臺，跨瀏覽器，跨移動應用 Mac OSX、Windows、iOS、Android、Linux

已經支持瀏覽器：Chrome，FireFox，Opera，微軟edge，Safari
不支持的瀏覽器：IE

WebRTC相關API介紹
功能劃分

1. 獲取音頻和視頻數據
2. 傳輸音頻和視頻數據
3. 傳輸任意二進制數據

API劃分:三個JS接口

• MediaStream (又叫getUserMedia)
• RTCPeerConnection (C++)
• RTCDataChannel

MediaStream (getUserMedia)

• 抽象表示一個音頻或者視頻流
• 可包含多個音視頻記錄
• 通過 navigator.getUserMedia() 獲取

var constraints = {video: true};
function successCallback(stream) {
   var video = document.querySelector("video")
   video.src = window.URL.createObjectURL(stream);
}

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

navigator.getUserMedia(constraints, successCallback, errorCallback);

其中的 constraints 介紹下：

控制MediaStream的內容：媒體類型、分辨率、幀率；
video: {
   mandatory: {
   	minWidth: 640,
   	minHeight: 360
   },
   optional [{
   	minWidth: 1280,
   	minHeight: 720
   }]
}

RTCPeerConnection

1. 信令處理
2. 編解碼協商
3. 點對點傳輸
4. 通訊安全保護
5. 帶寬管理（手機可以調得質量差點、PC可以質量高）

pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStram;
pc.addStream(localStream);
pc.createOffer(gotOffer);

function gotOffer(desc) {
   pc.setLocalDescription(desc);
   sendOffer(desc);
}

function gotAnswer(desc) {
   pc.setRemoteDescription(desc);
}

function gotRemoteStream(e) {
   attachMediaStream(remoteVideo, e.stream);
}

WebRTC 架構

TURN 做中轉的
比如：如果兩個人私有路由器都是192.168開頭 ，會被認爲是同一個網絡下。。就需要這個