背景
🎃在我的上篇文章中介绍了即时聊天🎈Chatterbox（话匣子）中WebSocket的应用，既然即时聊天肯定少不了实时语音通话、实时视频通话的功能。那就不得不聊一下WebRTC(Web Real-Time Communication)，下面我就从它的一些基本概念介绍开始说起。话不多说，先上两张图：
😁没错！Chatterbox（话匣子）已经实现了实时语音、视频通话。
什么是WebRTC
WebRTC（全称：Web Real-Time Communication）是一个实时通讯技术，它允许网络应用、站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接（简称：P2P、全称：Peer-to-Peer），实现视频流、音频流或其他任意数据的传输。
| 传统方式 | P2P | |
|---|---|---|
| 网络结构 | 通常采用中心化的网络结构-C/S（客户端-服务器）模式，数据交换需要通过中心服务器进行。 | 采用去中心化的网络结构，依靠用户群节点进行信息交换的对等式网络。每个用户节点既是客户端又是服务端，能同时作为服务器给其他节点提供服务。 |
| 可扩展性与健壮性 | 当网络规模变得庞大时，中心服务器的负担会越来越重，容易成为网络瓶颈。 | 具有高度的可扩展性，用户可以随时加入或离开网络，系统整体服务能力随用户节点的增加而提高。由于不存在中心服务器，P2P网络天生具备耐攻击和高容错的特点，即使网络中某个节点被攻击或下线，也不影响整个系统的正常运行。 |
| 资源利用率 | 依赖中心服务器进行数据处理和存储，资源利用率相对较低。 | 能够有效地利用互联网中大量分散的普通用户节点，充分利用这些节点中闲散的CPU、带宽、存储资源，从而达到高性能计算和海量存储的目的。 |
| 隐私保护 | 用户的隐私信息在传输过程中需要经过中心服务器，存在被窃听和泄露的风险。 | 由于信息的传输分散在各个节点之间，而无需经过中心服务器，因此减少了用户隐私信息被窃听和泄露的风险。 |
| 负载均衡 | 负载均衡主要依赖中心服务器进行，当服务器负载过高时，可能导致数据传输速度下降或服务中断。 | 由于资源分散存储在多个节点上，而每个节点又都可以充当服务器的角色，当某个节点需要获取资源时，只需要向相邻节点发送请求即可，很好地实现了整个网络的负载均衡。 |
| 成本效益 | 需要投入大量资金建设和维护中心服务器，成本较高。 | 采用去中心化的方式，减少了中心服务器的建设和维护成本，同时充分利用了普通用户节点的闲散资源，具有较高的成本效益。 |
RTCPeerConnection
RTCPeerConnection是WebRTC API中的一个对象，它允许在浏览器之间建立点对点的实时通信连接，无需中心服务器的参与。支持音频、视频和数据流的传输，使得实时通信更加高效和私密。
主要功能
- 使用SDP（Session Description Protocol）来协商双方的媒体参数，如编解码器、分辨率、帧率等。通过交换SDP描述信息，两个浏览器可以确定通信所需的媒体配置。
- 使用ICE（Interactive Connectivity Establishment）协议来建立对等连接，并选择最佳的通信路径。ICE通过尝试不同的传输方式（如UDP、TCP和TURN）来克服防火墙和NAT的限制，确保流媒体可以在对等之间传输。
- 负责采集本地音视频流，并进行编码和解码。同时，它还可以添加各种效果和过滤器来处理音视频流，如降噪、回声消除和图像增强等。
- 与远程端进行信令交换，以建立连接并协商媒体参数。通常，开发者需要使用WebSocket或XHR等技术来实现信令传输，并将SDP描述信息和候选地址发送给对方。
- 收集本地设备的IP地址和端口，这些地址将用于ICE协议的候选地址。收集到的候选地址将发送给对方，对方会选择最佳的候选地址进行通信。
使用场景
🎬实时视频会议-创建变得简单高效；实时游戏-玩家的操作可以即时反馈至服务器或其他玩家；文件共享-支持浏览器之间的文件传输，无需中心服务器的中转等等。
API
RTCPeerConnection MDN API：developer.mozilla.org/zh-CN/docs/...
RTCPeerConnection 接口表示本地端和远程对等端之间的 WebRTC 连接。它提供了创建远程对等端连接、维护和监视连接，以及在连接不再需要时关闭连接的方法。下面只介绍几个重要的相关的API。
RTCPeerConnection()构造器会返回一个RTCPeerConnection实例，表示本地设备和远程对等端之间的连接。
js
const connection = new RTCPeerConnection([config])实例方法
connection.createDataChannel()：创建一个数据通道用于数据传输。connection.createOffer()：启动创建一个SDP offer，目的是启动一个新的WebRTC去连接远程端点。connection.createAnswer()：启动创建一个SDP answer，目的是接受远程端点的连接。connection.setLocalDescription()：设置与连接关联的本地描述。connection.setRemoteDescription()：设置远程对等方的描述。connection.addTrack()：将一个新的媒体轨道添加到将传输到其他对等体的轨道集。connection.close()：关闭当前对等连接。
事件
connection.onicecandidate：已通过对connection.setLocalDescription()的调用识别并将RTCIce候选者添加到本地对等点 或者 与特定用户名片段和密码组合相关的每个RTCIce候选者都已被识别和添加，并且 所有运输工具上的所有ICE采集都已完成 时候触发该事件。connection.ontrack：当新的MediaStreamTrack被添加到作为RTCPeerConnection的一部分的RTCRtpReceiver时触发该事件。
channel事件
channel.onopen：数据通道打开时触发。channel.onclose：数据通道关闭时触发。channel.onmessage：数据通道接收到消息时触发。
🦀🦀感谢看官看到这里，如果觉得文章不错的话，可以给小生的几个开源项目点个Star⭐！
- 基于 Vue3 + Element-plus 管理后台基础功能框架
- 基于 Vue3 + Element-plus + websocket 即时聊天系统
- 基于 node 开发的后端服务：github.com/gmingchen/n...