WebRTC基本概念

ggbond_zhu
116 阅读6分钟

要实现两个客户端的实时音视频通信，并且这两个客户端可能处于不同网络环境，使用不同的设备，都需要解决哪些问题？

主要是下面这3个问题：

  • 如何发现对方？
  • 不同的音视频编解码能力如何沟通？
  • 如何联系上对方？

下面我们将逐个讨论这3个问题。

如何发现对方

在P2P通信的过程中，双方需要交换一些元数据比如媒体信息、网络数据等等信息，我们通常称这一过程叫做“信令 (signaling)"。

对应的服务器即“信令服务器(signaling server)”,通常也有人将之称为“房间服务器”，因为它不仅可以交换彼此的 媒体信息和网络信息，同样也可以管理房间信息。

比如：

1)通知彼此who加入了房间；

2)who离开了房间

3)告诉第三方房间人数是否已满是否可以加入房间。

为了避免出现冗余，并最大限度地提高与已有技术的兼容性，WebRTC标准并没有规定信令方法和协议。本次会使用websocket来搭建一个信令服务器

不同的音视频编码能力如何沟通

不同浏览器对于音视频的编解码能力是不同的。

比如：以日常生活中的例子来讲，小李会讲汉语和英语，而小王会讲汉语和法语。为了保证双方都可以正确的理解 对方的意思，最简单的办法即取他们都会的语言，也就是汉语来沟通。

在WebRTC中：有一个专门的协议，称为Session Description Protocol(SDP),可以用于描述上述这类信息。

因此：参与音视频通讯的双方想要了解对方支持的媒体格式，必须要交换SDP信息。而交换SDP的过程，通常称 之为媒体协商。

如何联系上对方

其实就是网络协商的过程，即参与音视频实时通信的双方要了解彼此的网络情况，这样才有可能找到一条相互通讯 的链路。

理想的网络情况是每个客户端都有自己的私有公网IP地址，这样的话就可以直接进行点对点连接。实际上呢，出于网络安全和其他原因的考虑，大多数客户端之间都是在某个局域网内，需要网络地址转换(NAT)。

在WebRTC中我们使用ICE机制建立网络连接。ICE协议通过一系列的技术（如STUN、TURN服务器）帮助通信 双方发现和协商可用的公共网络地址，从而实现NAT穿越。

ICE的工作原理如下：

  1. 首先，通信双方收集本地网络地址（包括私有地址和公共地址）以及通过STUN和TURN服务器获取的候选地址。
  2. 接下来，双方通过信令服务器交换这些候选地址。
  3. 通信双方使用这些候选地址进行连接测试，确定最佳的可用地址。
  4. 一旦找到可用的地址，通信双方就可以开始实时音视频通话。

image.png

在WebRTC中网络信息通常用candidate来描述

针对上面三个问题的总结：就是通过WebRTC提供的API获取各端的媒体信息SDP以及网络信息candidate, 并通过信令服务器交换，进而建立了两端的连接通道完成实时视频语音通话。

常用API

WebRTC 的核心能力通过三个主要 API 实现，覆盖了实时通信的全流程：

  1. getUserMedia()

    • 作用：访问用户设备的摄像头和麦克风，获取本地音视频流（MediaStream）。
    • 示例：调用后会请求用户授权，获取到的流可直接渲染到页面的<video>标签中（预览本地画面）。
// 获取摄像头和麦克风流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const video = document.getElementById('localVideo');
    video.srcObject = stream; // 本地预览
  })
  .catch(error => console.error('无法访问设备:', error));

  1. RTCPeerConnection

    • 作用：建立两个客户端之间的点对点连接，负责音视频流的编码、传输、解码和同步（核心模块）。
    • 功能：自动处理网络地址转换（NAT 穿透）、带宽自适应、丢包补偿等复杂网络问题，确保实时传输稳定。

  2. RTCDataChannel

    • 作用：在已建立的 P2P 连接上传输非媒体数据（如文本消息、文件、游戏指令等），类似 “实时数据管道”。
    • 特点：低延迟、高可靠性（可配置是否有序传输），适合实时协作工具（如共享白板）、在线游戏等场景。

工作原理（简化流程）

WebRTC 的 “点对点通信” 并非完全无需服务器，而是需要一个信令服务器（Signaling Server）  辅助建立连接，核心流程如下：

  1. 信号交换（Signaling） ：两个客户端（A 和 B）需要先通过信令服务器交换 “会话描述信息”（SDP，包含媒体编码格式、网络信息等）和 “网络候选地址”（ICE Candidates，包含 IP 和端口），确定如何建立连接。
  2. P2P 连接建立：基于交换的信息，RTCPeerConnection在 A 和 B 之间直接建立 UDP 连接（绕过服务器中转）。
  3. 实时通信：连接建立后，音视频流或数据通过RTCPeerConnection或RTCDataChannel直接传输，实现低延迟互动。

image.png

整个媒体协商过程可以简化为三个步骤对应上述四个媒体协商方法：

1.呼叫端创建Offer(createOffer)并将offer消息（内容是呼叫端的SDP信息）通过信令服务器传送给接收端，同 时调用setLocalDesccription 将含有本地SDP信息的Offer 保存起来

2.接收端收到对端的Offer信息后调用setRemoteDesccription方法将含有对端SDP信息的Offer保存起来， 并创建Answer(createAnswer)并将Answer消息（内容是接收端的SDP信息）通过信令服务器传送给呼叫端

3.呼叫端收到对端的Answer信息后调用setRemoteDesccription 方法将含有对端SDP信息的Answer保存起 来

经过上述三个步骤，则完成了P2P通信过程中的媒体协商部分，实际上在呼叫端以及接收端调用 setLocalDesccription 同时也开始了收集各端自己的网络信息(candidate),然后各端通过监听事件 onicecandidate 收集到各自的candidate并通过信令服务器传送给对端，进而打通P2P通信的网络通道，并通过 监听onaddstream事件拿到对方的视频流进而完成了整个视频通话过程。

image.png

avatar
文章
阅读
粉丝