【第3380期】WebRTC 探索：前端视角下的实时通信解析（下）

前言

深入探讨了 WebRTC 技术的核心概念、应用场景以及在实时通信领域的实际应用，为前端开发者提供了从入门到实战的全面指导。今日前端早读课文章由 @苏璇分享，公号：大转转 FE 授权。

正文从这开始～～

在 【第3375期】WebRTC 探索：前端视角下的实时通信解析（上） 中，我们从 WebRTC 的基本概念入手，探讨了其在现代 Web 应用中的关键作用。通过分析 Web 端的常用 API，我们为理解 WebRTC 的底层技术机制奠定了坚实的基础。这一篇章不仅解答了 “什么是 WebRTC” 的问题，还为如何利用这些 API 打造实时通信应用提供了清晰的路径。

紧接着，在 【第3379期】WebRTC 探索：前端视角下的实时通信解析（中） ，我们进一步深入技术层面，全面剖析了 WebRTC 连接的核心概念，并逐步揭示了点对点（P2P）会话连接的内部工作流程。通过搭建一个简易的信令服务器，我们展示了如何将理论转化为实际应用，从而为开发功能完备的实时通信系统提供了技术支持和实践指导。

现在，随着对 WebRTC 核心技术和 P2P 连接流程的理解逐步深入，我们也终于来到了这系列文章的最后一站 ——《WebRTC 探索：前端视角下的实时通信解析（下）》。我们将实际演示如何搭建一个简单的 1v1 音视频通话，让理论知识真正应用于实践。同时，还将介绍多路通信架构，探索如何在 WebRTC 中处理复杂的通信需求。这些内容不仅可以让你动手实现一个功能完整的音视频通话系统，还能让你理解并应用多路通信的设计思路。

1v1 音视频通话 Demo 效果演示

演示背景

为了实现 1v1 音视频通话，我们在本地环境中搭建了一个信令服务器，信令服务器的实现基于 【第3379期】WebRTC 探索：前端视角下的实时通信解析（中） 介绍的内容。为了便于演示，我们用户页面使用 Vue 框架开发了一个简洁的页面。在这个演示中，两个本地浏览器窗口分别模拟了两位用户的音视频通话场景，即用户 “转转” 和 “采货侠”。通过这一 Demo，我们不仅展示了 WebRTC 在点对点（P2P）通信中的应用，同时也验证了我们信令服务器的实际功能。

1、首先在本地启动两个浏览器窗口分别模拟这两位用户 “转转” 与 “采货侠 “进行视频通话

用户 “转转”，看到的画面如下：

2、发起视频通话

当向好友 “采货侠” 发起视频通话时，“采货侠” 用户浏览器端会弹出一个授权音视频设备的弹窗：

好友” 采货侠 “允许后，直接进入音视频通话。左上角显示的是本地视频图像（转转用户视角）：

而在远端（“采货侠”）的视角中，则会看到如下画面：

3、消息发送与接收

在通话过程中，用户 “转转” 向 “采货侠” 发送了一条消息。在 “转转” 的界面中，会显示如下内容：

远端用户 “采货侠” 收到的消息如下：

4、调整视频模式

在实际应用中，可能需要调整视频模式。可以通过以下代码进行控制：

 // 切换视频轨道的启用状态
 senders.find((s) => s.track.kind === 'video').track.enabled = !send.track.enabled

调整后的 “转转” 以及对应的 “采货侠” 画面如下：

在这一部分的演示中，我们展示了一个简单的 1v1 音视频通话 demo。这个演示只是 WebRTC 应用的冰山一角，展示了最基础的功能。虽然看起来简单，但它也已经具备了一个完整 WebRTC 应用的雏形。

接下来，我们将深入探讨 1v1 音视频通话的具体实现及其相关功能。这不仅包括呼叫的发起和应答，还涵盖了媒体流的动态调整和类 IM 功能的实现。我们将详细分析如何使用 PeerConnection 对象进行通信会话的建立、如何在通话过程中切换媒体模式，以及如何通过 datachannel 实现实时文本传输。

1v1 音视频通话功能详解

在 【第3379期】WebRTC 探索：前端视角下的实时通信解析（中） 中，我们已经详细介绍了 WebRTC 的通信流程和信令交互的实现。如果你已经熟悉这些内容，那么接下来对代码的解析将会更加直观和易于理解。

功能拆解

呼叫端

首先，初始化 PeerConnection 对象，并获取本地媒体流，将其添加到 PeerConnection 中，然后渲染到本地预览中。以下是初始化呼叫端的代码概要：

 async initCallerInfo(callerId, calleeId) {
     // 初始化 PeerConnection 对象
     this.localRtcPc = new PeerConnection();

     // 获取本地媒体流（音频和视频）
     const localStream = await this.getLocalUserMedia({ audio: true, video: true });

     // 将本地媒体流中的每个轨道添加到 PeerConnection
     localStream.getTracks().forEach(track => this.localRtcPc.addTrack(track));

     // 将本地媒体流渲染到预览 DOM 元素
     await this.setDomVideoStream("localdemo", localStream);

     // 初始化回调函数来处理各种事件
     this.onPcEvent(this.localRtcPc, callerId, calleeId);

     // 创建并设置 offer 信令
     const offer = await this.localRtcPc.createOffer();
     await this.localRtcPc.setLocalDescription(offer);

     // 通过信令服务器将 offer 发送给被呼叫端
     this.linkSocket.emit("offer", { targetUid: calleeId, userId: callerId, offer });
 }

回调监听函数

处理 PeerConnection 的各种事件，如媒体流的接收、ICE 候选的处理等。以下是核心回调函数的代码概要：

 onPcEvent(pc, localUid, remoteUid) {
     // 创建一个数据通道
     that.channel = pc.createDataChannel('chat');

     // 监听远程媒体流的轨道
     pc.ontrack = function(event) {
         that.setRemoteDomVideoStream('remoteVideo', event.track);
     };

     // 监听重新协商事件
     pc.onnegotiationneeded = function(e) {
         console.log('重新协商', e);
     };

     // 监听 ICE 候选的生成
     pc.onicecandidate = function(event) {
         if (event.candidate) {
             // 通过信令服务器发送 ICE 候选信息
             that.linkSocket.emit('candidate', {
                 targetUid: remoteUid,
                 userId: localUid,
                 candidate: event.candidate,
             });
         } else {
             console.log('在此次协商中，没有更多的候选了');
         }
     };
 }

被呼叫端

被呼叫端的流程类似于呼叫端，但要处理接收的 offer 信令并返回 answer。以下是接收并响应呼叫的代码概要：

 async onRemoteOffer