WebRTC技术与流程图解懒人包

WebRTC（Web Real-Time Communication）是一项强大而灵活的技术，使得网页应用程序（Web App）能够在没有第三方套件的情况下进行声音影像通讯和数据传输。这篇文章将带您深入了解WebRTC的基础知识及其工作流程，并通过一张自制的流程图展示了之前建立的点对点（P2P）连接与信号服务器进行的消息交换过程。

什么是WebRTC？

WebRTC 是一个开源项目，主要是让网页浏览器和手机应用程序能够透过简单的 JavaScript API 进行即时的声音图像通讯和数据传输。它不仅支持点对点（P2P）的连接，还提供高质量和低功耗延迟的数据传输功能。

WebRTC主要包括三个核心组件：

1. MediaStream：获取和操作本地的声音图像。
2. RTCPeerConnection：建立 P2P 连接并处理声音图像的传输。
3. RTCDataChannel：在 P2P 连接中进行任何数据的传输。

WebRTC的工作流程

WebRTC的工作流程分为以下几个主要步骤：

1.获取本地媒体：使用 MediaStream API 获取本地语音图像串流。
2.建立 RTCPeerConnection：创建一个 RTCPeerConnection 对象，准备进行 P2P 连接。
3.信令交换（Signaling)：通过 Signaling Server 交换连接信息（如 SDP 和
4.建立P2P连接：利用交换的信息建立P2P连接，传输声音图像串流和数据。

下面是一张自制的流程图，展示了点对点连接在建立之前通过信令服务器进行的消息交换过程。

在看图之前先来了解一下建立连线之前所需要的详细步骤：

示例程序代码可能会略过一些参数的定义，较实用于整体的流程讲解

信令交换流程

信令（Signaling）是WebRTC中的一个关键步骤，负责交换连接设置信息。虽然WebRTC本身不规范信令协议，但通常会使用WebSocket、XHR或其他即时通讯技术来实现。

信令交换过程如下：

1. Peer A：创建一个 RTCPeerConnection 对象，并通过createOffer方法生成 SDP 描述，将利用setLocalDescription方法记录起来后，将 SDP 描述通过 Signal server 发送给客户端 B。

const peerA = new RTCPeerConnection(config);
const offer = await peerA.createOffer()
await peerA.setLocalDescription(offer)
// 向远程对等点发送offer 
// 例:
sendToServer(offer);

2. Peer B：接收到 SDP 描述后，使用setRemoteDescription设置接收到的终端描述，并生成响应的 SDP 描述（Answer），将应答利用setLocalDescription方法记录起来后，将响应的 SDP 描述通过 Signal server 发送给客户端A

const peerB = new RTCPeerConnection(config);
// 通过信令服务器接收到 Offer 后
await peerB.setRemoteDescription(offer)
const answer = await peerB.createAnswer();
await peerB.setLocalDescription(answer)
// 将应答发送到远程对等点
sendToServer(answer);

3. Peer A & B：分别询问 STUN 或 TURN 服务器自己的 IP 位置与 ICE 候选者。

4. Peer A & B：互相交换ICE候选（通过Signal server），交换最佳的P2P连接路径。

在下一篇文章中，我将运用Firebase实时数据库作为信令服务器，并结合React手部实践作一个简单的WebRTC应用，实现视讯通话、消息和文件传递的功能。