在上一篇中我们介绍了SDP的规范和作用，那么接下来我们要看看WebRTC中是如何通过SDP进行媒体协商的。 开始之前再介绍一下媒体协商的作用，我们可以先思考一个问题，视频的编码和音频的编码有那么多种，那么如何知道对方支持什么。这个时候就要用到SDP进行协商。
RTCPeerConnection
讲到媒体协商，那自然就不能少了RTCPeerConnection这个类，这个是创建WebRTC点对点连接的一个类，可以添加音视频轨道，可以NAT，可以收发音视频数据等。
首先我们来看看如何创建一个RTCPeerConnection类
const config: RTCConfiguration = {}
const peer = new RTCPeerConnection(config)
上面直接new window下的RTCPeerConnection就可以创建RTCPeerConnection类。
通过RTCPeerConnection进行媒体协商的过程
接下来我们看看如何进行协商，假设有小明和小红进行通话，并且小明和小红已经加入了一个自定义的信令服务器房间。小明现在创建了一个RTCPeerConnection类，首先需要生成自己的SDP信息，接下来小明通过RTCPeerConnection类(以下简称pc类)创建一个offer，里面包含了小明的SDP信息，接下来调用setLocalDescription设置本地的SDP，然后通过信令服务器传递给小红。代码如下
async function call() {
const config: RTCConfiguration = {}
const mingPeer = new RTCPeerConnection(config)
const offer = await mingPeer.createOffer()
await mingPeer.setLocalDescription(offer);
}
当小红收到了小明发来的offer后，需要调用setRemoteDescription方法设置小明的SDP信息作为远端描述，同时也需要创建一个RTCPeerConnection来响应小明，告知对方小红的SDP信息，代码如下
async function answer(offer: RTCSessionDescription) {
const config: RTCConfiguration = {}
const hongPeer = new RTCPeerConnection(config);
// 小红设置小明的远端SDP描述
await hongPeer.setRemoteDescription(offer);
// 作为接受方需要创建一个answer的SDP描述发送给小明
const answer = await hongPeer.createAnswer()
await hongPeer.setLocalDescription(answer);
}
当小明收到了小红的SDP信息后需要设置一个小红的远端描述。
mingPeer.setRemoteDescription(answer)
这里放一张图可以更清晰的了解连接的过程。总结以下步骤就是
- 双方建立一个信令连接，由业务方实现。
- 发送端创建RTCPeerConnection
- 发送端通过createOffer创建本地SDP描述
- 发送端设置本地SDP描述
- 发送端通过信令服务器将Offer发送给房间内的接收端
- 接收端收到后首先创建一个RTCPeerConnection
- 接收端通过setRemoteDescription设置远端的SDP描述
- 接收端通过createAnswer创建一个接收端的SDP描述
- 接收端通过setLocalDescription设置接收端的本地描述
- 接收端通过信令发回给对应的发送端
- 发送端收到接收端的answer后通过setRemoteDescription设置接收端的SDP描述
其实还是很简单的，但是一定要理清楚这些步骤，不然就无法进行协商。
到这里为止就算是完成了媒体协商，接下来WebRTC就会开始收集Candidate，并进行连通性检测。
下一篇将会讲到WebRTC是如何建立连接的。
