**WebRTC 音视频应用实战：从单聊到群聊的通信技术解密**
在直播电商、在线会议及远程协作日益普及的今天，实时音视频（RTC）技术已成为互联网产品的核心竞争力之一。然而，许多开发者在面对 WebRTC 时，往往知其然不知其所以然，尤其在构建点对点对聊与复杂的群组通话时，常因信令交互混乱、网络穿透失败而陷入困境。本课程《WebRTC 音视频应用（直接呼叫/群组呼叫）》正是为了解决这一痛点而设计，旨在带领学员从零构建一套完整、稳定的实时音视频通信系统。
课程开篇并未急于 coding，而是花费充足篇幅夯实理论基础。你将深入理解 WebRTC 的对等连接（P2P）架构本质，明确其如何在浏览器端实现数据与媒体流的直接传输。针对初学者最为困惑的信令环节，课程详细拆解了 SDP（会话描述协议）的结构与含义，以及 ICE 候选人在 NAT 穿透中的关键作用。通过剖析完整的 WebRTC 通信握手流程，你将清楚知道“Offer/Answer”交换背后的每一步逻辑，从而为后续开发打下坚实根基。
理论之后，课程进入硬核的工程实践阶段。环境搭建部分摒弃了繁琐的配置陷阱，指导你快速创建 Node.js 基础服务器以承载信令中转任务，并基于 React 构建现代化的前端交互界面。这种前后端分离的架构模式，不仅符合当前主流开发标准，更便于后续功能的扩展与维护。
本课程的灵魂在于对“直接呼叫”与“群组呼叫”两种核心场景的深度攻克。在单聊模式下，你将掌握如何监听本地媒体流、建立对等连接以及处理远端媒体流的渲染；而在更具挑战性的群组场景下，课程将引导你理清星型拓扑与 Mesh 拓扑的优劣，学习如何利用服务器协调多个客户端之间的连接状态，解决多路视频流的布局与带宽优化问题。全程结合具体代码案例，让抽象的通信协议变得触手可及。
无论你是希望拓展技术栈的前端工程师，还是致力于 IM 功能研发的架构师，这门课都能提供从原理到落地的全套解决方案。不要再去阅读枯燥的官方文档碎片，跟随课程节奏，亲手打通音视频通信的最后“一公里”，掌握构建下一代实时互动应用的硬核技能。现在出发，让即时沟通在您的应用中真正流畅起来。
课程目录
1-1 [webRTC音视频应用——课程介绍] 课程介绍 (17:18) 2-1 [webRTC音视频应用——初识webRTC] 认识webRTC (11:04) 2-2 [webRTC音视频应用——初识webRTC] WebRTC对等连接方式 (08:53) 2-3 [webRTC音视频应用——初识webRTC] SDP协议和ICE候选人 (02:35) 2-4 [webRTC音视频应用——初识webRTC] WebRTC通信流程 (05:30) 3-1 [WebRTC音视频应用——环境准备及构建项目] 环境准备 (03:33) 3-2 [WebRTC音视频应用——环境准备及构建项目] 创建基础服务器 (14:07) 3-3 [WebRTC音视频应用——环境准备及构建项目] 创建react应用程序 (19:53) 3-4 [WebRTC音视频应用——环境准备及构建项目] 配置页面路由 (09:11) 3-5 [WebRTC音视频应用——环境准备及构建项目] 添加redux状态管理 (23:41) 4-1 [WebRTC音视频应用——创建页面组件] 创建登录页面 (38:49) 4-2 [WebRTC音视频应用——创建页面组件] 创建主页页面 (09:18) 4-3 [WebRTC音视频应用——创建页面组件] 设置虚拟活跃用户列表 (12:06) 4-4 [WebRTC音视频应用——创建页面组件] 存储活跃用户到服务器 (11:36) 4-5 [WebRTC音视频应用——创建页面组件] 发送活跃用户到所有客户端 (32:35) 4-6 [WebRTC音视频应用——创建页面组件] 断开连接时移除存储在服务器的用户 (06:31) 4-7 [WebRTC音视频应用——创建页面组件] 获取用户本地媒体流 (24:59) 4-8 [WebRTC音视频应用——创建页面组件] 创建本地媒体流预览 (20:42) 4-9 [WebRTC音视频应用——创建页面组件] 添加呼叫状态管理组件 (08:50) 4-10 [WebRTC音视频应用——创建页面组件] 不同状态下的直接呼叫对话框 (13:29) 5-1 [WebRTC音视频应用——webRTC实现直接呼叫] 通信双方基础数据的传递及呼叫状态更新 (52:35) 5-2 [WebRTC音视频应用——webRTC实现直接呼叫] 处理预呼叫和准备预呼叫回复 (26:16) 5-3 [WebRTC音视频应用——webRTC实现直接呼叫] 拒绝接听并显示拒绝对话框. (18:21) 5-4 [WebRTC音视频应用——webRTC实现直接呼叫] 拒绝接听并显示拒绝对话框 (14:20) 5-5 [WebRTC音视频应用——webRTC实现直接呼叫] 梳理webRTC点对点连接逻辑 (12:25) 5-6 [WebRTC音视频应用——webRTC实现直接呼叫] 创建Peer连接 (07:45) 5-7 [WebRTC音视频应用——webRTC实现直接呼叫] 创建webRTCOffer并发送给应答方 (10:13) 5-8 [WebRTC音视频应用——webRTC实现直接呼叫] 创建webRTCAnswer并返回 (11:15) 5-9 [WebRTC音视频应用——webRTC实现直接呼叫] 创建webRTCAnswer并返回 (14:38) 5-10 [WebRTC音视频应用——webRTC实现直接呼叫] 测试对等连接状态 (07:04) 5-11 [WebRTC音视频应用——webRTC实现直接呼叫] 存储远端stream并渲染 (09:32) 5-12 [WebRTC音视频应用——webRTC实现直接呼叫] 创建会话图标组件 (18:31) 5-13 [WebRTC音视频应用——webRTC实现直接呼叫] 设置控制音视频的开关 (22:44) 5-14 [WebRTC音视频应用——webRTC实现直接呼叫] 设置屏幕共享的开关 (33:04) 5-15 [WebRTC音视频应用——webRTC实现直接呼叫] 设置挂断通信的开关 (21:11) 5-16 [WebRTC音视频应用——webRTC实现直接呼叫] 完善呼叫状态重置 (15:25) 5-17 [WebRTC音视频应用——webRTC实现直接呼叫] 完善主页页面信息 (14:58) 5-18 [WebRTC音视频应用——webRTC实现直接呼叫] 漏洞修改 (10:15) 6-1 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 认识peerJS (07:35) 6-2 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 初始化群组呼叫服务器并连接 (24:27) 6-3 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 创建群组呼叫房间组件 (08:51) 6-4 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 添加创建房间的按钮 (10:56) 6-5 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 服务器保存创建的群组呼叫房间 (21:56) 6-6 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 向客户端广播群组房间 (13:39) 6-7 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 创建群组房间组件 (16:09) 6-8 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 创建加入群组呼叫的逻辑 (17:50) 6-9 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 在群组呼叫中连接新用户 (08:06) 6-10 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 准备显示传入流的逻辑 (08:58) 6-11 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 显示传入的媒体流 (10:41) 6-12 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 用户离开群组呼叫房间 (22:08) 6-13 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 作为房主关闭群组呼叫 (23:51) 6-14 [WebRTC音视频应用——使用PeerJS实现群组呼叫] 完善群组呼叫功能 (14:04) 7-1 [WebRTC音视频应用——webRTC数据通道] 创建数据通道 (12:12) 7-2 [WebRTC音视频应用——webRTC数据通道] 添加聊天逻辑 (07:33) 7-3 [WebRTC音视频应用——webRTC数据通道] 显示消息内容 (21:23)
