掌握 RTCPeerConnection：在 WebRTC 中建立点对点连接

在上一篇文章中，我们探讨了用于采集和管理媒体流的 MediaStream API。现在，我们将重点转向 RTCPeerConnection API，它是在 WebRTC 中建立和管理点对点连接的基础。本文将指导您了解 RTCPeerConnection 的基本要素，包括 ICE 候选者、SDP 交换和媒体流传输。

什么是 RTCPeerConnection？

RTCPeerConnection 是 WebRTC 提供的 API，可用于在两个对等方之间建立直接连接。它能处理复杂的网络问题，如穿越 NAT 和防火墙，并管理音频、视频和数据流的传输。

RTCPeerConnection 的主要组件：

• ICE（交互式连接建立）：处理网络穿越和为连接对等设备寻找最佳路径的框架。
• SDP（会话描述协议）：一种描述多媒体通信会话的格式，用于在对等方之间交换配置信息。
• STUN/TURN 服务器：用于在无法建立直接点对点连接时发现公共 IP 地址 (STUN) 和中继媒体 (TURN) 的服务器。

建立连接：

建立点对点连接的过程包括在两个对等方上创建 RTCPeerConnection 对象、交换 ICE 候选对象以及发送/接收 SDP 要约和应答。

示例代码：

下面是建立点对点连接的简化示例：

// 创建 RTCPeerConnection 对象
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerA = new RTCPeerConnection(configuration);
const peerB = new RTCPeerConnection(configuration);

// 处理 ICE 候选
peerA.onicecandidate = event => {
    if (event.candidate) {
        peerB.addIceCandidate(event.candidate);
    }
};
peerB.onicecandidate = event => {
    if (event.candidate) {
        peerA.addIceCandidate(event.candidate);
    }
};

// 创建要约
peerA.createOffer()
    .then(offer => peerA.setLocalDescription(offer))
    .then(() => peerB.setRemoteDescription(peerA.localDescription))
    .then(() => peerB.createAnswer())
    .then(answer => peerB.setLocalDescription(answer))
    .then(() => peerA.setRemoteDescription(peerB.localDescription));

// 添加媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        stream.getTracks().forEach(track => peerA.addTrack(track, stream));
    });

peerB.ontrack = event => {
    const videoElement = document.querySelector('video');
    videoElement.srcObject = event.streams[0];
};

RTCPeerConnection 工作流程：

1. 创建 RTCPeerConnection：每个对等方创建一个 RTCPeerConnection 对象并进行必要的配置。
2. 添加 ICE 候选者： 发现 ICE 候选者后，在对等方之间进行交换。
3. 创建和交换 SDP： 对等方 A 创建一个 SDP 要约，将其设置为本地描述并发送给对等方 B。对等方 B 将此要约设置为远程描述，创建一个 SDP 应答并将其发回给对等方 A。
4. 添加媒体轨道：将媒体轨道添加到 RTCPeerConnection，以便传输音频和视频流。
5. 建立连接：一旦完成 SDP 交换和 ICE 候选者收集，就会建立直接的点对点连接，从而实现实时通信。

简化的连接流程：

下面是一个 Mermaid 图，说明了 RTCPeerConnection 的工作流程：

摘要

RTCPeerConnection 是在 WebRTC 中建立对等连接的核心 API。通过了解如何创建 RTCPeerConnection 对象、处理 ICE 候选对象、交换 SDP 请求和应答以及添加媒体轨道，你可以有效地管理对等方之间的实时通信。该 API 简化了复杂的网络方面，实现了无缝音频、视频和数据传输。

在下一篇文章中，我们将深入探讨 RTCDataChannel API，它允许在对等方之间进行实时数据交换，补充了 WebRTC 的媒体功能。敬请期待！

作者：Mani L