WebRTC 的核心：RTCPeerConnection
WebRTC 的核心：RTCPeerConnection创建 RTCPeerConnection 对象RTCPeerConnection 与本地音视频数据绑定媒体协商ICE什么是 Candidate？收集 Candidate交换 Candidate尝试连接 SDP 与 Candidate 消息的互换远端音视频渲染参考
WebRTC 的核心：RTCPeerConnection
RTCPeerConnection 是 WebRTC API 中的一个对象，它提供了两个浏览器之间的实时通信。它使用音频、视频和数据流来进行点对点通讯，没有中介服务器的参与。这是一个极其有用的特性，使得实时通信变得更加高效和私密。
RTCPeerConnection的作用是在两个浏览器之间建立WebRTC通信通道。它使用ICE（Interactive Connectivity Establishment）协议决定浏览器之间的最佳路径来传输音频、视频和数据流。它让浏览器之间的网络连接变得简单、快捷和高效。
RTCPeerConnection API可以用于：
创建 RTCPeerConnection 对象
语法：
new RTCPeerConnection()new RTCPeerConnection(configuration)参数 configuration 是一个 JSON 对象，用于提供配置新连接的选项。
RTCPeerConnection 与本地音视频数据绑定
RTCPeerConnection 提供2种方法进行数据绑定：addTrack() 和 addStream()。
其中 addStream() 已经被 WebRTC 标记为过时，因此建议使用 addTrack() 方法。
当客户端从服务端接收到 joined 消息后，它会创建 RTCPeerConnection 对象，然后调用 bindTrack() 函数将其与之前通过 getUserMedia() 采集到的音视频数据绑定：
function bindTrack() {...ls.getTracks().foreach((track) => {pc.addTrack(track, ls);...})...}其中，ls 是一个全局变量，当通过 getUserMedia() 采集到 MediaStream 后，需要将其交由 ls 管理；pc 是 RTCPeerConnection 的缩写，也是一个全局变量，当 RTCPeerConnection 创建好后，交由 pc 管理。
媒体协商
当 RTCPeerConnection 对象与音视频数据绑定后，紧接着需要进行媒体协商。看双方都支持那些编码方式，支持哪些分辨率等。协商的方法是通过信令服务器交换媒体能力信息，交换的内容是 SDP 格式的。
在 WebRTC 中，媒体协商是有严格的协商顺序的，如下图所示：
整个过程分为 8 步：
Amy 调用 createOffer 方法创建 offer 消息。offer 消息中的内容是 Amy 的 SDP 信息。Amy 调用 setLocalDescription 方法，将本端的 SDP 信息保存起来。Amy 将 offer 消息通过信令服务器传给 Bob。Bob 收到 offer 消息后，调用 setRemoteDescription 方法将其存储起来。Bob 调用 createAnswer 方法创建 answer 消息， 同样，answer 消息中的内容是 Bob 的 SDP 信息。Bob 调用 setLocalDescription 方法，将本端的 SDP 信息保存起来。Bob 将 anwser 消息通过信令服务器传给 Amy。Amy 收到 anwser 消息后，调用 setRemoteDescription 方法，将其保存起来。通过以上步骤就完成了通信双方媒体能力的交换。
ICE
当媒体协商完成后，WebRTC 就开始建立网络连接了，其过程叫 ICE（Interactive Connectivity Establishment，交互式连接建立）。更确切地说，ICE 是在各端调用 setRemoteDescription 方法后就开始了。其操作过程如下：
收集 Candidate交换 Candidate按优先级尝试连接什么是 Candidate？
Candidate 是 WebRTC API 的接口之一，表示用于建立 RTCPeerConnection 的候选交互连接建立（ICE）的配置信息。它是至少包含 {address, port, protocol} 三元组的一个信息集。
RTCIceCandidate 实例属性：
candidate：表示用于连接检查的候选者的传输地址的字符串。格式为：a=candidate:{foundation} {component} {protocol} {priority} {ip} {port} typ {type} generation {generation} ufrag {username} network_id {id} network_cost {cost}。
以如下 candidate 为例说明其代表的含义：a=candidate:1221703924 1 udp 2122260223 192.168.0.105 51417 typ host generation 0 ufrag Q8Wv network-id 1 network-cost 10。
typ host 表示本地候选者，使用的 IP 是 192.168.0.105，端口为 51417，使用 UDP 协议，其优先级为 2122260223，generation 表示代数，初始值为 0，用户名为 Q8Wv，如果更新 candidate 则 generation 值会递增，替换老的 candidate。sdpMid：表示候选者的媒体流标识标签的字符串，该标签在候选者关联的组件中唯一标识媒体流，如果不存在这样的关联，则为 null。sdpMLineIndex：如果值不为 null，sdpMLineIndex 表示 SDP 中候选者关联的从零开始的媒体描述索引编号。
其他更多属性见于：RTCIceCandidate
WebRTC 还将 Candidate 分为了四种类型：host、srflx、prflx、relay，它们的优先级依次递减。假如 WebRTC 收集到两个 Candidate，一个是 host 类型，另一个是 relay 类型，那么 WebRTC 会先尝试与 host 类型的 Candidate 建立连接，如果不成功，才会使用 relay 类型的 Candidate。
收集 Candidate
WebRTC 收集 Candidate 时有几种途径：
host 类型的 Candidate 由主机的网卡个数决定。一般一个网卡对于一个 IP 地址，每个 IP 地址随机分配一个端口从而生成一个 host 类型的 Candidate；srflx 类型的 Candidate 由 STUN 服务器获得的 IP 地址和端口生成；relay 类型的 Candidate 由 TRUN 服务器获得的 IP 地址和端口生成。收集到 Candidate 后，为了通知上层，WebRTC 还在 RTCPeerConnection 对象中提供了 onicecandidate 事件。为了将收集到的 Candidate 交换给对端，需要为 onicecandidate 事件设置一个回调函数：
pc.onicecandidate = (e) => {if (e.candidate) {...}}通过该回调函数就可以获得 WebRTC 底层收集到的所有 Candidate 了。同时，还可以在函数内实现发送给对端的操作。
交换 Candidate
WebRTC 收集 Candidate 后，会通过信令系统将它们发送给对端。对端接收后，会与本地的 Candidate 形成 CandidatePair（连接候选者对）。
有了 CandidatePair，WebRTC 就可以开始尝试建立连接了。
注意，Candidate 的交换不是等所有 Candidate 收集好了再进行的，而是边收集边交换。
尝试连接
当 WebRTC 形成 CandidatePair 后，便开始尝试进行连接。一旦发现一个可以连通的 CandidatePair 时，就不再进行其他的连接尝试了，但发现新的 Candidate 时仍然可以继续交换。
SDP 与 Candidate 消息的互换
媒体协商和 ICE 都需要通信双方做信息的交换，如交换 SDP 和 Candidate。这种信息交换使用的也是信令系统，只不过需要为这种需求专门设置一个新的信令，即 message。
信息交换的过程：
发起方向信令服务器发送 message；服务器收到 message 后不做任何处理，直接转发给目标用户；目标用户接收 message。客户端发送消息：
function sendMsg(roomid, data) {...socket.emit('message', roomid, data);}服务器转发：
socket.on('message', (room, data) => {socket.to(room).emit('message', room, data);});客户端接收：
socket.on('message', (room, data) => {...if (data.hasOwnProperty('type') && data.type === 'offer') {...} else if (data.hasOwnProperty('type') && data.type === 'answer') {...} else if (data.hasOwnProperty('type') && data.type === 'candidate') {...} else {...}});远端音视频渲染
当各端将收集到的 Candidate 通过信令系统交换给对方后，WebRTC 内部就开始就开始尝试建立连接了。连接一旦建成，音视频数据就开始源源不断地由发送端发送给接收端。
每当有远端的音视频数据传过来时，RTCPeerConnection 对象的 ontrack() 事件就会被触发。因此只需要给 ontrack() 事件设置一个回调函数，就可以拿到远端的 MediaStream 了。再将远端音视频流赋值给本地 <video> 标签的 srcObject 属性，就可以播放音视频数据了。
具体代码如下所示：
function getRemoteStream(mediaStream) {...// 将远端音视频流赋值给本地 <video> 标签的 srcObject 属性videoElement.srcObject = mediaStream;}let pc = new RTCPeerConnection(...);...pc.ontrack = getRemoteStream;...