Day16 RTCPeerConnection: Offer / Answer

在前面的文章中，已经对 WebRTC 相关的重点进行了介绍，包含网络协商、媒体协商、如何进行网路穿透等，以及使用 WebRTC API 获取设备及音视讯，今天我们要来看 WebRTC API 中最重要的类别 RTCPeerConnectio ，先看一次通话的流程。

Offer / Answer 过程

Bob 要对 Alice发起通话：

1. Bob 呼叫 RTCPeerConnection.createOffer 建立一个 offer ，并呼叫 setLocalDescription 设定本地的 SDP。
2. 通过 Signaling server 将包含 Bob SDP 的offer 发送给 Alice。
3. Alice 收到 offer 後呼叫 setRemoteDescription 设定 Bob 的 SDP。
4. Alice 呼叫 RTCPeerConnection.createAnswer 建立一个 answer ，并呼叫 setLocalDescription 设定本地的 SDP。
5. 通过 Signaling server 将包含 Alice SDP 的 answer 发送给 Bob 。
6. Bob 收到 answer 後呼叫 setRemoteDescription 设定 Alice 的SDP

回顾前几篇 Bob 与 Alice 的通话过程，今天我们来看看如何透过 WebRTC API 来实现这个流程，可以把以下程序码贴到 Chrome 的 console 中测试看看:

var BobPC, AlicePC, offer, answer

BobPC = new RTCPeerConnection()
AlicePC = new RTCPeerConnection()

BobPC.onicecandidate = function (e) {
  AlicePC.addIceCandidate(e.candidate)
}

AlicePC.onicecandidate = function (e) {
  BobPC.addIceCandidate(e.candidate)
}

function onError(err) {
  window.alert(err.message)
}

// 1. Bob 呼叫 RTCPeerConnection.createOffer 建立一个 offer
BobPC
  .createOffer({
    offerToReceiveAudio: false,
    offerToReceiveVideo: true,
  }).then(gotLocalDescription)

function gotLocalDescription(description) {
  offer = description
  BobPC.setLocalDescription(description)
  // 2. 通过 Signaling server 将包含 Bob SDP 的offer 发送给 Alice
  // 3. Alice 收到 offer 後呼叫 setRemoteDescription 设定 Bob 的 SDP
  AlicePC.setRemoteDescription(offer)
  // 4. Alice 呼叫 RTCPeerConnection.createAnswer 建立一个 answer
  AlicePC.createAnswer().then(gotAnswerDescription)
}

function gotAnswerDescription(description) {
  AlicePC.setLocalDescription(description)
  answer = description
  // 5. 通过 Signaling server 将包含 Alice SDP 的 answer 发送给 Bob
  // 6. Bob 收到 answer  後呼叫 setRemoteDescription 设定 Alice 的SDP
  BobPC.setRemoteDescription(answer)
  console.log('完成 Offer/Answer 的交换')
  console.log(offer)
  console.log(answer);
}