欢迎大家来到IT世界,在知识的湖畔探索吧!

一、WebRTC概念

1.什么是WebRTC

我们都知道浏览器本身不支持相互之间建立信道进行通信，都需要通过服务器进行中转。比如现在有两个客户端—甲、乙，他俩想要进行通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲的消息进行中转，发送到乙处，反过来也是一样。这样甲与乙之间的一次消息要通过两段信道，通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流的传输，如何建立浏览器之间的点对点传输，一直困扰着开发者。因此WebRTC应运而生。

WebRTC是一个开源项目，旨在使得浏览器能为实时通信（RTC）提供简单的JavaScript接口。说的简单明了一点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样，打通一个浏览器与WebSocket服务器之间的通信，而是通过一系列的信令，建立一个浏览器与浏览器之间（-to-peer）的信道，这个信道可以发送任何数据，而不需要经过服务器。并且WebRTC通过实现MediaStream，通过浏览器调用设备的摄像头、话筒，使得浏览器之间可以传递音频和视频。

同时WebRTC是一个非常优秀的多媒体框架，且支持跨平台（支持Android、IOS），能够使得Android和IOS设备作为终端设备能够像浏览器一样，进行即时通信。

2.使用WebRTC能做什么？

• 能用于音视频实时互动
• 能用于游戏、即时通讯、文件传输等等
• 它是一个百宝箱，传输、音视频处理（回音消除、降噪等）

3.学习WebRTC的过程中我们能掌握什么？

• 音视频设备的访问与管理
• 音视频数据的采集
• 数据的传输与实时互动
• WebRTC的整体工作机制

4.学习WebRTC思路

(1). 学习NodeJS的基本使用，尝试搭建一个简单的Web服务器并实现简单的HTTP服务。

(2). 学习JavaScript，了解并掌握其基本的使用方法，为后续开发及完善Web服务做技术铺垫。

(3). 了解音视频设备相关的Web API，尝试使用MediaDevices实现音视频设备的访问，包括摄像头、麦克风及屏幕采集。

(4). 学习使用Socket.IO，尝试使用Socket.IO实现简单的聊天室，为后续开发WebRTC信令服务器做技术铺垫。

(5). 了解和学习使用SDP，并使用WebRTC的Web API实现本地的1v1视频互通。

(6). 搭建STUN/TURN服务器，使用ICE框架及Socket.IO实现WebRTC正式的1V1连麦

(7). 实现WebRTC的移动端开发，做到浏览器和手机客户端能进行连麦操作。

二、WebRTC 架构

下面是WebRTC的基础架构图：

整体架构分为应用层和核心层。应用层提供实现相关业务逻辑Api，核心层提供应用层需要的核心API。

其中核心层分为四层：

第一层为C++ API，其中最主要的是PeerConnection，这个接口需要重点学习和掌握。

第二层为Session层，为上下文管理层，应用里的音频和视频及非音视频的数据处理逻辑都可以在这层进行。

第三层为引擎和传输层，包括音频引擎和视频引擎，以及音视频的传输，这也是整个架构中最重要的一层。

第四层与硬件相关，包括音视频的采集和网络的IO。

注：WebRTC的核心层无视频的渲染，所有的渲染都需要应用层自行实现。

这里着重提一下第三层：

• Voice Engine（音频引擎模块）：包含编码能力、音频缓冲Buff（防网络抖动）、回音消除（实时连麦关键点）。
• Video Engine（视频引擎模块）：包含编码能力（如VP8）、视频缓冲、图像增强。
• Transport（传输模块）：传输协议在底层使用UDP，上层使用的RTP（为安全起见增加SRTP），还有P2P机制，包括STUN、TURN 和 ICE。

需要更多ffmpeg/webrtc..音视频流媒体开发学习资料加群领取

三、WebRTC源码目录结构

首先我们需要将WebRTC的源码下载下来，现了解一下WebRTC源码目录的基本构成：

这里着重介绍一下module目录下的子目录结构：

四、WebRTC 运行机制

WebRTC核心API有三个：MediaStream、RTCPeerConnection、RTCDataChannel。

MediaStream：通过设备的摄像头及话筒获得视频、音频的同步流

PeerConnection: 用于构建点对点之间稳定、高效的流传输的组件

DataChannel：能够使得浏览器之间(点对点)简历一个高吞吐量、低延时的信道，用于传输任何数据

其中PeerConnection调用过程如下图所示：

PeerConnection调用时序图如下：

这里我们现不对上面的流程图和时序图进行详细介绍，大家简单看一下，保证稍微有点概念即可。