WebRTC 概述
WebRTC，名称源自网页即时通信（Web Real-Time Communication的缩写），是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。
WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能， 并且还支持跨平台：windows，linux，mac，android。
从架构图中我们看到，WebRTC帮我实现了音频引擎，视频引擎，网络传输引擎，封装了上层API，让开发者能够基于浏览器（Chrome\FireFox...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现。
WebRTC原理
浏览器点对点P2P的信道(peer-to-peer)，信道可发送任何数据并无需经过服务器。WebRTC的实现是建立客户端之间的直接连接而无需服务器中转的，即P2P。所以要求彼此知道对方外网地址，而计算机大多位于NAT之后，只有少数主机拥有外网地址，这就需要一种可以穿透NAT技术。
NAT打洞
在处于使用NAT设备的私有TCP/IP网络中的主机之间建立连接时需使用NAT穿越。NAT的行为是非标准化的，穿越技术大多使用公共服务器，使全球任何地方都能访问得到IP地址， 在RTCPeerConnection中实用ICE框架来保证RTCPeerConnection实现NAT穿越。
常见的NAT穿越技术有：应用层网关(ALG)方式、M1DCOM (Middle-Bax Communications)代理方式、STUN方式、TURN方式、FuIIProxy方式、ICE方式。其中ICE己经被公认为在非对称性NAT环境下首选的NAT穿越解决方案。ICE本身是一种方法，它综合运用STUN、 TURN等协议来提供一个通用的解决方案，使之在最适合的情况下工作，以弥补单独使用其中任何一种所带来的固有缺陷。
WebRTC建立连接
1.ClientA 创建WebRTC对象和RTC数据通道，并绑定一些事件
// 创建WebRTC对象
const pc = new RTCPeerConnection();
// 创建WebRTC数据通道，可以传输自定义数据
const dc = pc.createDataChannel("channel");
// 数据通道开启
dc.onopen = () => console.log("Data Channel Opened");
// 数据通道收到数据的事件
dc.onmessage = (e) => console.log("Get Message：", e.data);
// SDP变化的事件
pc.onicegatheringstatechange = () => {
if (pc.iceGatheringState === "complete") { // 在SPD创建完成的时候打印他
console.log(JSON.stringify(pc.localDescription));
}
}
2.ClientA 创建Offer
使用pc.createOffer()来创建Offer，并且调用setLocalDescription将Offer绑定在本地SDP，执行完成后可以看到在控制台中打印了你的Offer，复制这端Offer，我们可以来写ClientB的代码了
/**
* 创建Offer
* @return {Promise<void>}
*/
async function createOffer() {
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
}
3.ClientB 创建WebRTC对象和RTC数据通道，并绑定一些事件
由于ClientA已经有数据通道了，所以ClientB不需要自己创建，通过pc.ondatachannel绑定监听事件
const pc = new RTCPeerConnection();
let dc = null;
// 同样的监听SDP变化的事件，在SPD创建完成的时候打印他
pc.onicegatheringstatechange = () => {
if (pc.iceGatheringState === "complete") {
console.log(JSON.stringify(pc.localDescription));
}
}
// 监听数据通道的事件，并添加上事件，保存一下这条数据通道
pc.ondatachannel = (e) => {
console.log("data channel");
dc = e.channel;
dc.onmessage = (e) => console.log("get message", e.data);
dc.onopen = async (e) => console.log("channel opened");
}
4.ClientB 绑定Offer
通过setRemoteDescription来设置远端OfferSDP
async function setOffer() {
await pc.setRemoteDescription(JSON.parse(需要绑定的offer));
console.log("Offer Set");
}
5.ClientB 创建Answer
使用createAnswer来创建一个Answer，并且用setLocalDescription设置到本地SDP，我们在设置完Offer后立刻创建Answer，经过上面的过程，可以在控制台中看到打印的本地Answer，复制这个Answer，我们去ClientA绑定它
async function setOffer() {
await pc.setRemoteDescription(JSON.parse(需要绑定的offer));
console.log("Offer Set");
await createAnswer();
}
async function createAnswer() {
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
}
6.ClientA 绑定Answer，建立P2P连接
在通过setRemoteDescription设置远端AnswerSDP，这样就完成了数据通道连接，然后我们就可以通过dc.send('要发送的消息')进行消息传递
async function setAnswer() {
await pc.setRemoteDescription(JSON.parse(需要绑定的Answer));
console.log("Answer Set");
}
7.将音视频流推送给WebRTC，并接收对方传来的音视频流
async function openVideo() {
const stream = await navigator.mediaDevices.getUserMedia({
video: true, audio: true
});
myVideo.srcObject = stream;
stream.getTracks().forEach((track) => {
pc.addTrack(track, stream);
});
}
// 通过监听track，表示有音频流进来
pc.ontrack = (e) => {
console.log("track");
video.srcObject = e.streams[0];
}
