Webrtc初涉（一） 要入坑嘍
前幾天領導安排任務以webrtc為基礎來實現android端的點對點視訊通話，剛開始一臉蒙，雖然最後以官網DEMO實現，但是果然感覺自己還是一陣蒙圈，以此部落格來記錄一下我的webrtc之行。
這是webrtc的官網:https://webrtc.org/
首先我的任務目標只是要提供音視訊通話的DEMO，所以去官網遍歷一圈
一、用Google自帶的翻譯檢視它所支援的平臺，谷歌瀏覽器的中文就不深究了，反正有圖示
如果要在電腦上自己搭建伺服器，以下幾個瀏覽器會是最好的選擇。
二、 這是WebRTC的原始碼 反正也看不懂 先放棄了 主要看Sample
https://github.com/webrtc/samples/
三、先看看人家的主要功能點介紹
一、介紹
WebRTC是一個開源專案，可以在Web和本機應用程式中實現音訊，視訊和資料的實時通訊。
有幾個主要的JS api 先了解一下
1、
getUserMedia()：捕獲音訊和視訊。
getUserMedia()在視訊元素中顯示視訊流。
傳遞給回撥的在全域性範圍內的MediaStream物件，因此您可以從控制檯進行檢查。streamgetUserMedia()
這個方法可以開啟WEB端的視訊裝置並獲得視訊流資料
2、
MediaRecorder：錄製音訊和視訊。
3、
RTCPeerConnection：在使用者之間傳輸音訊和視訊。- 也就是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、
RTCDataChannel：使用者之間的流資料。
它主要是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或以上
- 適用於Chrome的Web Server，或使用您自己選擇的Web伺服器。
- 示例程式碼
- 文字編輯器
- HTML，CSS和JavaScript的基礎知識 這些我只知道一丟丟 還能對付一下