【音视频】WebRTC实现一对一通信 与 各端的互通互联

目的：学习RTC各端的实现顺序，用于更精准的定位哪个步骤容易出什么问题。

学习书籍：摘自《WebRTC音视频实时互动技术》原理、实战与源码分析

浏览器Web端

1. 遍历音视频设备

enumerate Devices（）接口

2. 采集音视频数据

getUserMedia（）接口

3. MediaStream和MediaStreamTrack

• MediaStreamTrack称为“轨”，表示单一类型的媒体源，比如视频数据一个～，音频又是另一个～。
• MediaStream称为“流”，它可以包括0个和多个MediaStreamTrack。
  • 作用一：可以作为录制或者渲染的源，将Stream中的内容录制成稳点或者将Stream中的数据通过浏览器的标签播放；
  • 作用二：同一个MediaStream中的MediaStreamTrack数据会进行同步，而不同MediaStream中的MediaStreamTrack之间不进行时间同步。

4. 本地视频预览

5. 信令状态机

• 基本原理：每次发送/接收一个信令后，客户端都根据状态机当前的状态做相应的逻辑处理。比如Init状态 - join消息 - joined消息后 - joined_unbind以及joined_conn。

6. RTCPeerConnection

• 创建RTCPeerConnection对象、
• RTCPeerConnection与本地音视频数据绑定
• 媒体协商
• ICE
• SDP与Candidate消息交换
• 远端音视频渲染

7. 补充

• 什么是Candidate，可连接的候选者，包含{address、port、protocal}还包括{CandidateType、ufrag}
• ICE：交互式连接建立，收集Candidate、交换Candidate、尝试连接

Android端

1.申请权限

静态权限、动态权限、EasyPermissions

2. 引入WebRTC库

WebRTC + socket.io + EasyPermissions。build.gradle文件中增加。

3. 构建PeerConnectionFactory

设计模式（工厂模式）。比如是否开启DTLS、指定音视频编码器：VP8/VP9、H264等

4. 创建音视频源

• AudioSource和VideoSource，然后创建AudioTrack和VideoTrack，进行绑定

5. 视频采集

• 两种camera，前置和后置。createCameraCapture（）首先获取Android系统下的所有摄像头设备，然后对设备进行便利，查找到第一个前置摄像头后将其作为默认摄像头。如果没有找到，则选择第一个后置摄像头作为默认。

6. 视频渲染

WebRTC Native使用OpenGL ES 进行视频渲染。

• 先将视频从主内存中复制到GPU上，然后在GPU上通过OpenGL ES 管道渲染到GPU的内存中，之后输出给显卡并最终显示在手机屏幕上。
• 两个SurfaceViewRenderer：一个用于显示本地视频，其宽高与手机屏幕大小一致；第二个用于显示远端视频，其宽高120*160。layout_grevity属性被设置为“top”，所以回悬浮在本地视频之上显示。视频的填充模式、是否开启硬件拉伸加速等。
• 创建View、初始化View、视频与View绑定。

7. 创建PeerConnection

超级socket。设置观察者模式实现

8. 建立信令系统

由于socket.io是跨平台的，所以JS和Android中，都能让客户端与服务端相连

iOS端

1. 申请权限

2. 引入WebRTC库

3. 构造RTCPeerConnecctionFactory

initialize（）传入默认编码器和默认解码器

4. 创建音视频源

5. 视频采集

• iOS端不需要显示设置音频输入设备的，因为移动端音频设备的切换是在底层自动化完成的。
• 比如将手机放在耳边，WebRTC会将音频设备变成听筒模式，如果插上耳机，她又将变成耳机模式。RTCCameraCapturer类。

6.本地视频预览

• 两个View，RTCCameraPerviewView、RTCEAGLVideoView。
• 安卓端，本地视频和远端视频是同一个View，iOS却是两个不同的View。则使用的源是不同的。

7. 建立信令系统

• 如通信双方发起呼叫的顺序、媒体协商、Candidate交换等。
• iOS端端socket.io使用Swift语言实现，而实现的音视频互动系统是Object-C，OC直接通到use_prameworks，使用Swift语言开发库。
• 当socket.io库成功引入后，
  • 第一步：通过url获取SocketIOClinet对象，建立与服务器的连接了。
  • 第二步：注册侦听的消息，并未么个侦听的消息绑定一个处理函数。
  • 第三步：通过SocketIOClinet建立的连接发送消息，connect方法。

8. 创建RTCPeerConnection

9. 远端视频渲染

将RTCEAGLVideoView对象与远端视频的Track关联到一起

PC端：Window PC和Mac

1. Native方案（通过底层API实现）

开发应用程序执行效率高，占用空间小，且可针对WebRTC做深度定制开发。劣势开发成本高、工作量大针对两套系统编写代码。

2. Electron方案（基于Chrome浏览器内核）

是基于Chrome浏览器的，所以一套就行，效果一致，语言是JavaScript，开发效率高，劣势不如Native灵活、可定制。

3. Flutter方法

最近Google推出，一套代码让所有终端都可执行。