WebRTC（一）从了解三个方面的API开始

灰太狼 2023-03-14 10:50 34阅读 0赞

### WebRTC简介 ###

WebRTC是一个由Google发起的实时通信解决方案，

其中包含音视频采集、编解码、数据传输、音视频展示等功能。

虽然其名为WebRTC，但是实际上它不仅支持Web之间的音视频通讯，还支持Android和iOS端。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]  
底层技术

*  图像引擎（VideoEngine）
 *  VP8编解码
 *  jitter buffer：动态抖动缓冲
 *  Image enhancements：图像增益
 *  声音引擎（VoiceEngine）
 *  iSAC/iLBC/Opus等编解码
 *  NetEQ语音信号处理
 *  回声消除和降噪
 *  会话管理（Session Management）
 *  iSAC音效压缩
 *  VP8 Google自家WebM项目的影片编解码器
 *  APIs（Native C++ API，Web API）

WebRTC 虽然底层实现极其复杂，但是面向开发者的API还是非常简洁的，主要分为三个方面：

1.  Network Stream API
    
     *  MediaStream 媒体数据流
     *  MediaStreamTrack 媒体源
2.  RTCPeerConnection
    
     *  RTCPeerConnection 允许用户在两个浏览器之间直接通讯
     *  RTCIceCandidate ICE协议的候选者
     *  RTCIceServe
3.  DataChannel

#### Network Stream API ####

主要有两个API：MediaStream与MediaStreamTrack。

MediaStreamTrack 代表一种单类型数据流（VideoTrack或AudioTrack），

一个MediaStreamTrack代表一条媒体轨道，这给我们提供了混合不同轨道实现多种特效的可能性。

MediaStream 是一个完整的音视频流，可以包含多个 MediaStreamTrack 对象，

它的主要作用是协同多个媒体轨道同时进行播放，这就是我们平时说的音画同步。

eg：

LocalMediaStream 表示来自本地媒体捕获设备（如网络摄像头、麦克风等）的媒体流。

要创建和使用本地流，web应用程序必须通过 getUserMedia() 函数请求用户访问。

一旦应用程序完成，它可以通过调用 LocalMediaStream 上的 stop() 函数来撤销自己的访问权限。

#### RTCPeerConnection ####

上面我们只是成功的拿到了MediaStream流媒体对象，但是仍然仅限于本地查看。

如何将流媒体与对方互相交换（实现音视频通话）？

答案是我们必须建立点对点连接（peer-to-peer），这就是RTCPeerConnection要做的事情。

在此之前，我们得了解一个概念：信令服务器。

两台公网上的设备要互相知道对方是谁，需要有一个中间方去协商交换它们的信息。

信令服务器干的就是这个事情 —— 牵线搭桥。

一旦建立了对等连接，就可以将媒体流（临时定义的 MediaStream 对象）直接发送到远程浏览器。

#### DataChannel ####

每个流实际上代表一个单向逻辑通道，提供顺序传送的概念。

消息序列可以有序或无序发送。消息传递顺序仅保留给在同一流上发送的所有有序消息。

但是，DataChannel API 已被设计为双向的，这意味着每个 DataChannel 都是由传入和传出SCTP流的捆绑组成的。

当在实例化的 PeerConnection 对象上首次调用 CreateDataChannel() 函数时，将执行 DataChannel 设置（即创建SCTP关联）。

随后每次对 CreateDataChannel() 函数的调用都只会在现有SCTP关联内创建一个新的 DataChannel。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]: /images/20230312/935c2d77110f430f9a70624f7813c9a8.png