tags: `筆記` `Javascript` `WebRTC`

#### WebRTC 實作下列 API:
* MediaStream 會存取資料串流，例如使用者的相機和麥克風。
* RTCPeerConnection 可讓您使用各種設施進行音訊或視訊通話，藉此加密及管理頻寬。
* RTCDataChannel 支援一般資料的點對點通訊。

下面是 mozilla 的開發者描述 PeerA 與 PeerB 溝通的過程

流程如下：
* PeerA 透過 STUN, TURN Server 建立 Channel
* 要與 PeerB 溝通，建立 Offer SDP 給 PeerB
* PeerB 回覆 Answer SDP 給 PeerA
* PeerA, PeerB 建立連線

這裡面可以看到幾個關鍵
* STUN
* TURN
* Channel

WebRTC 利用 ICE (Interactive Connectivity Establishment)穿透的方式，透過 STUN、TURN 協定取得對方的 IP 達到點對點連線

#### Peerjs
傳統的 WebRTC 要處理點對點連線需要熟悉很多基礎知識，所以網路有很多將底層換手的一些複雜過程封裝的 Client 端套件，下面介紹兩個有稍微研究的套件

* [Peerjs](https://peerjs.com/)
* [Simple-Peer](https://github.com/feross/simple-peer)

以上兩個的套件用法算是蠻類似的，這邊就介紹最後採用的 Peerjs

兩個端點的連線大概如下

var peer = new Peer();

// Connect 
var conn = peer.connect('another-peers-id');
// on open will be launch when you successfully connect to PeerServer
conn.on('open', function(){
  // here you have conn.id
  conn.send('hi!');
});

// Reactive
peer.on('connection', function(conn) {
  conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
  });
});

PeerJS 同時也內建 Signal Server 的設定(有雲端及自建)

簡易的點對點連線可以參考下面的參考文章

參考文章：
[利用peerjs轻松玩转webrtc](https://www.cnblogs.com/yjmyzz/p/peerjs-tutorial.html)
[WebRTC 入門教學](https://blog.gtwang.org/web-development/webrtc-peer-connection/)