亢少军，联合创立了捷智云视频会议系统，他拥有丰富的流媒体技术开发经验，尤其在Android、iOS等领域造诣颇深。作为核心开发者，他参与多个项目，如医疗、交通、银行等行业的应用软件，展现出其广泛的技术应用能力。

本书详细介绍WebRTC音视频开发技术，本书系统介绍WebRTC技术的原理与应用，涵盖：WebRTC技术发展历史、应用场景、整体架构，WebRTC通话原理，Web开发环境搭建，HTML5项目简介，访问设备的设置，音视频设备的设置，音视频的录制，结合React+Flutter+Go技术开发音视频应用的案例等。 分为三篇，共15章，主要内容包括： 基本概念篇（第1~2章），介绍WebRTC技术发展历史，分析WebRTC整体架构及其核心API，分析WebRTC通话原理，介绍媒体协商、网络协商等基本概念，介绍NAT、SDP、ICE、STUN以及TURN协议； 基础应用篇（第3~11章），介绍WebRTC技术的方方面面，如访问设备、音视频设置、媒体流与轨道、媒体录制、连接建立过程以及数据通道等，帮助读者快速掌握WebRTC的常用接口； 综合案例篇（第12~15章），通过一个一对一的视频通话案例，将前面所学知识串起来，案例的客户端实现了画面渲染、声音控制、视频控制、大小视频展示等功能，服务器端实现了信令处理服务器以及中转数据服务器等。 本书是一本入门级实战指南，既有基础知识，又有操作步骤详细的丰富示例，实操性强，可帮助读者在轻松掌握基础理论的同时快速进入应用开发领域。
 亢少军 捷智云视频会议系统联合创始人，从事流媒体技术研发工作多年，对于Android、iOS等开发技术有比较深入的研究和应用，作为主要程序员开发了多个应用项目，涉及医疗、交通、银行等领域。

WebRTC，由Google引领并开放源代码的实时通信技术，集成了音频/视频捕捉、编码与解码及数据传输功能。它旨在通过简洁API，实现在浏览器和移动应用间的无缝音视频交流，无需额外插件，兼容跨平台且免费使用。广泛支持Web、Android、iOS等环境，具备优异的音视频处理性能和高效的传输效率，适用于视频会议、在线教育、游戏等多种场景，在5G时代更显其潜力。

在视频通话中，WebRTC应用涉及SDP（Session Description Protocol）与网络协商。SDP扮演描述媒体流格式及传输参数的角色，而网络协商则包括获取外网IP映射和信令服务器间的信息交换。ICE框架在此过程中协助处理NAT难题，STUN用于揭示设备公网地址，TURN在必要时提供中继服务以应对复杂的NAT配置。信令服务器作为关键中介，负责SDP、Candidate等通信控制信息的转发，确保双方顺利建立连接。

初始化 PeerConnection，添加媒体流，经过多次交互接收对方媒体流并播放，是A和B之间使用WebRTC进行音视频交流的详细步骤。整个过程涵盖了从创建到运行完整通信链路的所有关键环节，展示了WebRTC技术在实际应用中的强大功能和便捷性。

第一篇 基本概念

Node.js是一个构建在Chrome V8引擎上的JavaScript运行环境，专为服务器端编程设计。安装Node.js需从官方网站下载对应操作系统的Binary文件并执行安装程序。安装完成后，在命令行中输入`node -v`检查Node版本，使用`npm -v`确认npm的版本。若要更新npm，执行`npm install npm -g`命令。为解决网络问题导致的包安装延迟，推荐使用淘宝npm镜像cnpm，通过`npm install -g cnpm --registry=https://registry.npm.taobao.org`命令进行安装。

Visual Studio Code（VSCode）是一个跨平台的代码编辑器，内置对JavaScript、TypeScript和Node.js的支持，并拥有丰富的插件生态系统。在VSCode中，可以搜索并安装ESLint插件以执行代码检查。

项目的核心配置文件package.json包含了项目信息、脚本和依赖。创建该文件后，使用`npm install`命令安装所有依赖，生成node_modules目录。scripts部分的"build"和"start"脚本分别用于构建发布版本和启动开发环境。

Babel是一个将ES6+语法转换为兼容各浏览器代码的工具，通过创建.babelrc文件并添加插件实现转换。Webpack则是一个模块打包工具，处理项目依赖关系，并生成可部署的静态文件。在webpack.config.js中定义了入口、输出目录、模块规则和开发服务器配置。

首页模板index.html被创建，引入打包后的samples.jsx文件，同时编写全局样式styles/css/styles.scss提供默认样式。src/index.jsx作为入口文件，负责将主组件App渲染到页面，并导入全局样式和antd样式库。应用的主组件App包含路由配置，根路径直接跳转至Samples页面。

Samples页面展示了WebRTC示例，通过List组件列出不同示例标题和链接，用户点击可访问对应示例。代码编写完成后，启动应用程序，出现"Compiled successfully"表示成功编译运行。但初次访问时地址栏可能会提示不安全链接。

第3章 HTML5示例工程准备

在网页中运用浏览器API操作用户的媒体设备是一项重要技能。具体来说，通过调用`navigator.mediaDevices.getUserMedia()`方法，我们可以获取用户摄像头或麦克风的访问权限，进而得到包含音频或视频数据的`MediaStream`对象。这个过程可能需要用户的明确同意，如果用户拒绝或者没有可用的设备，系统会触发错误处理函数，并返回相应的异常，比如`PermissionDeniedError`或`NotFoundError`。

成功获取媒体流后，你可以将它赋值给HTML元素进行播放，例如将视频数据流关联到`<video>`标签，音频数据流关联到`<audio>`标签。此外，如果你对视频画面感兴趣，可以利用HTML5的`<canvas>`标签来截取和处理视频帧。通过将视频元素设置为画布的绘图源，然后调用`drawImage()`方法，你可以在画布上实时绘制视频帧，实现动态的画面效果。

WebRTC技术允许我们在网页中添加视频滤镜，给用户带来更丰富的视觉体验。只需在video标签的filter属性中指定相应的滤镜类型，就能实时改变视频画面的外观。例如，你可以创建一个功能，让用户根据自己的喜好选择不同的滤镜效果，从而实现视频流的即时样式变换。

综上所述，通过合理的API调用和HTML元素操作，我们能在网页中灵活地处理用户的媒体设备数据，并提供诸如实时滤镜等增强视觉体验的功能。这不仅丰富了用户在网页上的互动方式，也对提升用户体验有着重要作用。

第4章 访问设备

视频分辨率是衡量视频清晰度的重要指标，常见的有QVGA、VGA、720P、1080P、2K、4K和8K等。随着技术进步，人们对视频质量要求提升，高分辨率如4K和8K能呈现更精细的图像细节。在WebRTC中，可以通过设置约束条件来控制视频采集的分辨率，例如使用getUserMedia()方法配合不同分辨率参数实现。示例代码展示了如何创建并应用不同分辨率的限制，以动态调整视频播放质量。

一个运行中的视频分辨率示例程序允许用户从QVGA、VGA等选项中选择，当尝试不支持的高分辨率时，会抛出OverconstrainedError错误。此外，通过点击按钮，用户也能实时切换视频分辨率，展示网页上视频播放和分辨率选择功能的应用实例。

React组件DeviceSelect用于音频输入、输出和视频设备的选择。在构造函数中初始化状态，包括各设备的选择和列表。组件挂载后，通过refs获取video元素并更新设备列表。如果某个设备未选且有可用选项，则默认选择第一个。startTest方法根据用户选择的设备Id获取getUserMedia流并在video元素上显示。此外，还有处理音频输入、视频输入和音频输出设备改变的事件处理器。

设备枚举示例程序中，用户可以通过下拉列表选择麦克风、摄像头和扬声器，并通过“测试”按钮预览效果。在实际应用中，可能遇到多设备显示但只有一个可用的情况，通常是驱动未正确卸载导致。为了提供良好用户体验，视频会议或远程教育系统需具备媒体设置功能，包括选择音频输入、展示音量、选择摄像头、预览视频、设置分辨率和码率。这些设置可以预先设定，也可在使用过程中调整。高分辨率带来清晰画面但需要更多带宽，高码率保证流畅传输但占用网络资源。保存用户选择的设备信息到本地存储，以便下次快速恢复设置。关闭不再使用的媒体流以避免设备资源被占用。测试音视频项目时，如遇到设备问题，需检查是否有其他软件占用或设备指示灯是否正常。

程序中包含一个修改设备对话框，点击“修改设备”按钮弹出，用户可选择音频输入（麦克风）、视频输入（摄像头）和视频清晰度进行设置。预览区域显示选中的设备信息，用户可以测试音量和视频效果。保存设置到浏览器本地存储，下次打开对话框时保留之前的设置。关闭对话框后确保所有设备正常关闭，避免资源泄露。这个示例直观展示了应用程序中如何实现设备选择和设置功能。

第5章 音视频设置

WebRTC技术中，媒体流是音频或视频设备产生的连续数据，通过MediaStream接口管理，属性如active、ended和id反映其状态，事件如onactive和onended监控变化。MediaStreamTrack代表单一的媒体源，可通过enabled、kind和muted控制。使用getUserMedia获取设备媒体流，可addTrack或removeTrack操作轨道。Canvas作为媒体流捕获工具，通过getContext("2d")创建绘图上下文，设置起点、绘制线段、闭合路径并填充颜色。监听鼠标事件在Canvas上捕捉用户操作，canvas.captureStream()同步到视频播放器实时预览，适用于在线教育或协作白板功能。

第6章 媒体流与轨道

MediaRecorder API是一个用于创建录制对象的工具，它允许开发者通过stream参数指定媒体数据来源，如getUserMedia、<video>、<audio>或<canvas>标签，并使用options设置诸如mimeType（定义录制格式和编码方式）、音频和视频比特率等属性。API中包含isTypeSupported方法，可以用来检查浏览器对特定mimeType的支持情况。控制录制过程的函数包括start、stop、pause和resume，同时提供了ondataavailable和onerror事件来处理数据状态变化或错误。

在进行视频录制时，用户需要设置音频开启并指定视频分辨率，如1280*720。播放器方面，音频录制只需使用audio标签，而视频录制则需准备视频预览和播放器对象，分别用于实时监控录制内容和回放。代码示例展示了如何根据浏览器支持选择不同的视频编码格式，例如vp9或vp8，并提供了一个完整的视频录制流程，包括打开摄像头、开始/停止录制、播放和下载等功能的实现。

在React应用中实现屏幕录制功能，首先通过getDisplayMedia()获取桌面流并设定分辨率。将视频元素的源设置为捕获到的流后，即可启动录制。使用MediaRecorder创建实例，并监听其stop和dataavailable事件来管理录制过程。用户可以通过“开始”和“停止”按钮控制录制，结束时生成webm格式的视频文件供下载。

此外，RecordCanvas组件示例展示了如何实时录制Canvas内容。在灰色区域涂鸦时，下方的视频会同步播放这些动作。点击“停止”后，生成canvas.webm视频文件供下载。这个组件让用户体验到Canvas录制的即时性和互动性，特别适合远程教育场景中记录电子白板的内容。

总之，MediaRecorder API提供了强大的媒体录制功能，无论是在屏幕、音频还是Canvas上，都能实现灵活且高效的录制和播放。在React应用中集成这些功能，可以为用户提供丰富多样的交互体验。

第7章 媒体录制

WebRTC技术在实现视频通话中扮演关键角色。首先，通过getUserMedia API获取本地音视频媒体流，然后使用RTCPeerConnection代表本地与远程设备间的连接，并配置ICE服务器。接着，将媒体流加入RTCPeerConnection，生成SDP Offer启动新连接，同时发送给远端设置描述。远端回应Answer并回传，期间交换ICE候选地址优化网络。最终，通过事件监听获取对方媒体流并在两端播放，实现双向视频传输。整个过程涉及SDP协商、信令服务器通信和ICE候选处理。

在React组件中运用WebRTC实现实时视频通话，初始化本地和远程视频元素。呼叫功能检查摄像头和麦克风设备，设置ICE Server并创建RTCPeerConnection，添加事件监听器处理候选信息、ICE状态变化及track事件。通过连接添加音视频轨道，交换SDP描述完成点对点通信。接收远端视频流后应用到显示元素。

组件中还包含Canvas绘图功能，初始化远端视频和画布，捕获Canvas内容并绘制线条。在call方法中，使用Canvas流创建RTCPeerConnection实例，设置ICE服务器并监听icecandidate、iceconnectionstatechange等事件。发起呼叫时生成Offer，发送给对方接收Answer，并处理Candidate交换确保数据包正确路由。接收到远端视频流后应用到显示元素。

挂断功能则关闭两个RTCPeerConnection连接结束通话。组件核心是通过WebRTC实现实时互动视频通信，同时利用Canvas同步远程用户的绘图内容。

另一个示例展示了电子白板同步，用户点击呼叫按钮建立连接，在本地白板涂鸦实时传输至远端显示。只需关注本地白板功能如画笔、圆圈和橡皮擦工具，录像可选择在本地或服务器进行。

第8章 连接建立

WebRTC中的数据通道是实现实时通信和文件传输的关键。它构建了一条高效的数据传输路径，使得文本、文件、图片等信息能不间断地在两点之间流动。这个过程基于RTCPeerConnection的连接，相关API在表9-1中有详尽的说明。

数据通道的功能强大且独特，不仅支持音视频之外的数据交换，还具备与WebSocket相似但有所不同的特性。首先，它采用点对点的方式进行通信，通常比WebSocket更快速。其次，它基于SCTP协议运行，允许设置为可靠或不可靠传输模式，以满足实时通信中对低延迟的严格要求。特别地，数据通道无需通过服务器建立连接，这使得其在隐私保护和效率上具有优势。

发送文本消息是数据通道的基础应用。这个过程包括创建本地和远端连接，初始化数据通道并添加事件监听，以及实际输入和发送文本信息。代码示例详细展示了这一系列步骤的实现过程。

Web应用程序使用FileReader对象来异步读取本地文件，并能处理文件读取中的错误、取消或完成情况。通过监听onabort、onerror和onload事件，开发者可以确保文件读取的安全性和完整性。读取完成后，数据通道可以将文件高效地传输到另一端。

整个文件传输过程包括设置描述符、添加Candidate、监控ICE状态变化以及处理数据包的到达。为了增强用户体验，还可以显示进度条，并在接收完毕后提供下载链接。通过这些步骤，WebRTC成功实现了实时通信和大文件传输的功能。

总的来说，WebRTC的数据通道是一个强大且灵活的工具，它不仅提升了信息传输的速度和效率，还确保了数据的安全性，为实时通信和文件共享提供了坚实的基础。无论是简单的文本消息还是大型文件，都能借助这个平台顺畅地进行传输。

第9章 数据通道

在Windows系统中搭建Flutter开发环境，首要任务是处理网络问题，并利用Flutter提供的镜像资源。接下来，安装Git和Flutter SDK，对环境变量进行配置。通过运行"flutter doctor"命令，可以检查并确保所有依赖项已成功安装。对于MacOS用户，同样需要解决网络问题，保证命令行工具的正常运作。下载Flutter SDK并将其路径添加到系统中，设置环境变量，同时安装Xcode和相关插件以支持iOS应用开发。值得注意的是，在iOS设备上测试 Flutter 应用，开发者账户和证书配置是必不可少的步骤。

 Flutter入门教程从创建一个简单的"Hello World"程序开始，让初学者理解 Flutter应用程序的核心结构与关键组件，如MaterialApp、Scaffold、AppBar和Text等。运行此程序，用户会在屏幕上看到欢迎信息，从而直观感受Flutter的应用展示效果。教程进一步解释了在iOS和Android平台上如何设置应用，包括获取摄像头和麦克风权限的配置。

项目配置部分聚焦于pubspec.yaml文件，它在 Flutter项目中的重要角色以及如何添加和管理依赖库。理解并熟练运用这个文件，对于项目的构建和维护至关重要。通过深入学习这些基础知识，开发者能更好地组织和优化他们的代码结构。

总的来说，无论是Windows还是MacOS平台，搭建Flutter开发环境都需要对网络、SDK安装、环境变量设置等环节有清晰的了解。同时，掌握基本的 Flutter编程概念，如组件使用和权限配置，是构建功能完整应用的基础。通过实践教程中的示例项目，开发者能逐步提升他们的技能，并为后续更复杂的开发任务做好准备。

第10章 App示例工程准备

Flutter-WebRTC 是一个适用于 Flutter 移动应用的库，它利用 getUserMedia 接口访问摄像头和麦克风等设备。在代码示例中，我们展示了如何运用 navigator.getUserMedia 获取媒体流，并将其与 RTCVideoRenderer 绑定进行显示。此外，还讲解了如何使用 getDisplayMedia 接口实现屏幕共享功能，同时提供了相应的约束条件作为参考。章节内容以实际操作为主，旨在帮助读者理解 WebRTC 在 Flutter 应用中的应用实践。

在 Flutter 中，Flutter-WebRTC 插件被用来构建一个包含屏幕共享功能的示例应用。用户通过点击按钮控制屏幕共享的开启和关闭，同时实时显示手机屏幕内容。当启用屏幕共享时，会请求用户的权限，一旦允许，即可展示手机画面。插件还支持设备控制，如切换摄像头、静音、启用扬声器等，以满足不同场景需求。示例代码演示了如何在 Flutter 中实现这些功能，包括添加交互按钮和调用相关接口方法。

在处理设备控制的示例中，展示了如何重绘用户界面、响应手机旋转以及控制媒体流的开启和关闭。使用名为 PeerConnectionSample 的组件配置媒体约束（如音频质量、视频质量和帧率）、连接约束和 SDP 约束来建立 WebRTC 连接。当屏幕方向改变时，OrientationBuilder 用于检测并调整布局。此外，还展示了如何根据用户操作控制摄像头的开关、前后置切换、麦克风静音以及扬声器和听筒的切换。

Flutter-WebRTC 库在移动端的一个重要应用是视频通话功能。当用户点击悬浮按钮后，通过 _open 方法创建本地和远端 PeerConnection 对象，并进行 SDP 交换以完成连接。代码中包含了处理 Ice 连接状态、添加本地和远程媒体流的回调函数。同时，展示了如何渲染本地和远程视频流。在数据通道部分，简述了配置 RTCDataChannelInit 参数以及创建发送和接收数据通道的方法，用于移动端向远端发送文本消息。

一个 Flutter 数据通信示例应用程序利用 WebRTC 实现客户端之间的实时数据交换。通过 `createPeerConnection` 函数创建 PeerConnection 对象，并设置 ICE 服务器、SDP 约束等配置。用户点击屏幕上的按钮触发 _open 方法初始化连接，生成并交换 Offer 和 Answer SDP 描述符以建立连接。应用程序还实现了数据通道的管理，包括发送和接收数据的功能。通过 _sendMessage 发送文本消息给远端，收到的消息在界面上显示。当用户点击悬浮按钮时，如果连接已建立，则调用 _close 断开连接。这个示例完整展示了 Flutter 中使用 WebRTC 进行实时数据通信的实现过程。

第11章 App音视频技术

第二篇 基础应用

视频通话的完整流程和技术框架。在通话过程中，A作为发起方创建提议Offer，B作为应答方回应Answer。双方通过信令服务器交换SDP和Candidate信息，利用STUN服务器获取网络信息并建立连接。技术框架中，客户端使用React或Flutter实现，服务器端采用Golang的WebSocket和Pion/TURN项目。WebSocket作为一种全双工通信协议，允许服务器主动推送数据给客户端，相比传统的轮询方式更高效。信令设计用于交换会话控制、错误处理、元数据和网络数据，确保通话顺利进行。通过定义明确的信令状态，前端可以根据消息类型调整UI显示，提供更好的用户体验。



第12章 一对一视频通话总体架构

在Windows系统中搭建Go环境，需要下载MSI包安装Go，它会自动配置GOROOT和Path等环境变量。用户变量中的GOPATH通常设置为用户的go文件夹，而Path则包含GOPATH的bin目录。如果工作路径改变，记得手动调整GOPATH。同时，文章也提到了安装Git的步骤。

在MacOS系统中，通过下载pkg包并安装Go，然后手动编辑.bash_profile配置环境变量，如GOROOT、GOBIN、PATH和GO111MODULE等值。同样需要安装Git。文中还推荐了开发工具VSCode，并指导如何安装插件以及创建项目工程。

文章详细解释了运行TURN服务器的过程，包括目录结构、命令执行和网络设置。在信令服务器部分，强调了项目文件、目录构成，特别是证书文件和配置文件的重要性。依赖管理通过go.mod文件实现，确保代码的稳定性和可维护性。

此外，文中还简单介绍了工具库构建，如日志处理和Json数据处理的函数，并说明配置文件用于部署时调整服务器设置，给出一个简单的配置示例。整个章节深入浅出地讲解了Go语言环境搭建、项目结构、依赖管理以及关键功能模块。

接着讨论了一个基于WebSocket协议的Socket服务，负责前端消息接收与转发。它定义了WebSocket连接的数据结构，并包含事件派发器、socket实例、互斥锁和关闭状态等字段。通过读取消息通道，goroutine不断从socket读取数据并传递给上层用户。服务器还定期发送心跳包以保持连接稳定，同时提供发送消息和关闭连接的功能。

P2P服务器的Bind方法接收一个配置对象，定义了处理WebSocket请求和提供静态文件服务的HTTP回调函数。服务器启动HTTPS监听，通过指定主机名、端口号、证书文件和私钥确保安全连接。此外，还介绍了用户和会话信息的数据结构，用于管理用户连接和通信。

P2P信令服务涉及查找和挂断用户、处理连接关闭以及通知用户更新等功能。当用户退出房间时，会向其他用户发送离开消息并更新用户列表。通过执行go run main.go命令启动服务，监听8000端口。

第13章 服务器端实现

React技术被应用于PC-Web端视频通话程序的开发，登录组件作为入口，用户需输入用户名和房间号。这个组件利用Ant Design库中的Form、Input和Button实现表单提交，获取信息后传递给父组件。在p2p目录下，有两个jsx文件分别负责本地视频（显示摄像头画面）和远端视频（展示对方视频流），它们设定各自的样式和属性。此外，程序包含信令功能，通过WebSocket连接与信令服务器交换通信数据如Offer、Answer等，处理获取本地媒体流、发送消息、挂断通话等功能。

建立P2P视频通话的信令服务过程涉及WebSocket管理，包括打开连接、处理消息、错误处理和关闭。接收到服务器转发的消息时，根据消息类型执行相应操作，如处理offer、answer、candidate等。获取本地媒体流的函数getLocalStream会根据参数type（音频或视频）设置不同的约束条件，调用getUserMedia或getDisplayMedia接口获取流。startCall函数用于发起呼叫，生成唯一会话Id，获取本地媒体流，并创建PeerConnection对象进行通信。

P2P客户端作为登录、用户列表和视频通话组件的父组件，负责整合这些功能。在p2p目录中创建P2PClient.jsx文件，定义状态如用户数组、本地用户信息、房间号等。连接信令服务器和中转服务器，初始化P2PVideoCall对象，并监听事件处理操作。添加界面方法如开始呼叫、挂断、静音和视频开关。根据登录状态显示登录组件，展示用户列表，渲染本地和远端视频。加入挂断、静音和视频控制按钮完成界面构建。

JavaScript代码片段定义了处理音频和视频控制的函数，如onToggleLocalAudioTrack切换本地音频轨道启用状态，loginHandler进行登录操作更新状态并连接服务器。render函数根据登录和通话状态渲染不同界面元素，包括登录表单、用户列表及视频通话界面，包含视频、音频控制按钮和挂断功能。这些代码展示了前端应用中音视频交互逻辑的实现。

第14章 Web端实现

在Flutter项目中，首先创建p2p文件夹并添加p2p_login.dart，定义P2PLogin状态管理类。设置用户名和房间号变量，点击登录方法跳转至P2PClient页面。构建登录界面包含输入框与登录按钮，处理文本电话号码键盘输入，检查房间号不空则调用登录方法。项目中生成随机数作为用户、房间和会话标识，使用randomNumeric方法生成指定长度的随机字符串。应用需满足媒体、PeerConnection和SDP配置要求。

P2P Video Call实现包括封装WebSocket与信令消息处理。定义回调函数封装WebSocket连接、关闭、发送数据和接收消息功能，处理自签名证书确保安全连接。使用Dart基础I/O库创建WebSocket连接，触发相应回调。定义P2PState枚举表示视频通话状态，如加入房间、挂断和连接错误等。实现信令功能，包括ICE配置、WebSocket操作、消息处理、本地媒体流获取及状态回调。

P2P视频通话步骤涉及接收处理信令服务器消息、获取本地媒体流、媒体网络协商、挂断与切换摄像头。通过WebSocket与信令服务器通信，根据消息类型执行相应操作，如创建Offer、Answer和Candidate完成音视频传输。涉及多个回调函数和类方法调用确保通话顺利。

服务器端onMessage()处理前端消息，根据消息类型执行不同操作：'updateUserList'解析数据并回调用户列表信息；'offer'处理呼叫请求，创建PeerConnection设置远端SDP描述发送应答；'answer'接收对方应答SDP描述应用到对应 PeerConnection；'candidate'处理网络Candidate信息；'leaveRoom'和'hangUp'处理成员离开房间和挂断呼叫。处理心跳包('heartPackage')及未知类型消息，体现实时通信系统信令交互。

客户端实现包括创建组件、连接服务器、界面操作与构建用户列表。在p2p目录下添加p2p_client.dart文件，初始化本地远端视频渲染对象，连接信令和中转服务器设置状态变更回调。定义界面交互方法如发起呼叫、挂断、切换摄像头和麦克风静音。使用ListView构建用户列表显示用户项，利用RTCVideoView显示视频，通过OrientationBuilder处理设备方向变化。添加挂断、静音和摄像头切换按钮，完成UI设计并设置示例数据与路由跳转。

该应用包含一对一视频通话功能，登录后用户可查看房间列表发起呼叫。通话期间支持视频共享桌面。Android模拟器上可实时显示画面，iOS需真机测试。项目包括React Web应用、Flutter应用和Golang信令服务器中转服务器。章节末提供测试案例供用户体验完整视频通话流程。