WebRTC通话原理

「爱情、让人受尽委屈。」 2022-10-08 02:21 214阅读 0赞

# WebRTC通话原理 #

--------------------

## 目录 ##

1.  媒体协商-音视频编解码
2.  网络协商
    
    1.  STUN
    2.  TURN
3.  媒体协商+网络协商 数据的交换通道
4.  WebRTC API
5.  一对一通话

--------------------

### 1. 媒体协商-音视频编解码 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]

1.  比如： Peer-A端可支持VP8、 H264多种编码格式，而Peer-B端支持VP9、 H264，要保证二端都正确的编解码，最简单的办法就是取它们的交集H264
2.  有一个专门的协议 ，称为Session Description Protocol (SDP)，可用于描述上述这类信息，在WebRTC中，参与视频通讯的双方必须先交换SDP信息，这样双方才能知根知底，而交换SDP的过程，也称为"媒体协商"。

--------------------

### 2. 网络协商 ###

1.  彼此要了解对方的网络情况，这样才有可能找到一条相互通讯的链路  
    ![2.][]
2.  理想的网络情况是每个浏览器的电脑都是私有公网IP，可以直接进行点对点连接
3.  实际情况是：我们的电脑和电脑之间或大或小都是在某个局域网中， 需要NAT（Network Address Translation，网络地址转换）  
    ![4.][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 1]

--------------------

#### 1. STUN ####

1.  STUN（Session Traversal Utilities for NAT， NAT会话穿越应用程序）是一种网络协议，它允许位于NAT（或多重NAT） 后的客户端找出自己的公网地址(ip+port)，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的Internet端端口。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 2]
2.  使用一句话说明STUN做的事情就是：告诉我你的公网IP地址+端口是什么。
3.  问题是： STUN并不是每次都能成功的为需要NAT的通话设备分配IP地址的， P2P在传输媒体流时，使用的本地带宽，在多人视频通话的过程中，通话质量的好坏往往需要根据使用者本地的带宽确定。
4.  TURN可以很好的解决这个问题。

--------------------

#### 2. TURN ####

1.  TURN的全称为Traversal Using Relays around NAT，是STUN/RFC5389的一个拓展，主要添加了Relay功能。如果终端在NAT之后， 那么在特定的情景下，有可能使得终端无法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继，对来往的数据进行转发  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 3]
2.  在STUN分配公网IP失败后，可以通过TURN服务器请求公网IP地址作为中继地址。这种方式的带宽由服务器端承担，在多人视频聊天的时候，本地带宽压力较小。
3.  以上是WebRTC中经常用到的2个协议， STUN和TURN服务器我们使用coturn开源项目来搭建
4.  ICE（ Interactive Connectivity Establishment，交互式连接建立）
5.  跟STUN和TURN不一样， ICE不是一种协议，而是一个框架（Framework），它整合了STUN和TURN。 coturn开源项目集成了STUN(打洞)和TURN(中继)的功能。
6.  网络信息：放在 candidate

--------------------

### 3. 媒体协商+网络协商 数据的交换通道 ###

1.  从上面我们知道了2个客户端协商媒体信息(SDP)和网络信息(candidate)，那怎么去交换？是不是需要一个中间商去做交换？所以我们需要一个信令服务器（Signal server）（房间服务器）转发彼此的媒体信息和网络信息。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 4]
2.  访问到的局域网，借助信令服务器，就可以实现上面提到的SDP媒体信息及Candidate网络信息交换。
3.  信令服务器不只是交换 媒体信息sdp和网络信息candidate，比如：
    
    1.  房间管理
    2.  人员进出房间

--------------------

### 4. WebRTC API ###

1.  MediaStream ： MediaStream用来表示一个媒体数据流（通过getUserMedia接口获取），允许你访问输入设备，如麦克风和 Web摄像机，该 API 允许从其中任意一个获取媒体流。
2.  RTCPeerConnection ： RTCPeerConnection 对象允许用户在两个浏览器之间直接通讯 ，你可以通过网络将捕获的音频和视频流实时发送到另一个 WebRTC端点。使用这些 Api，你可以在本地机器和远程对等点之间创建连接。它提供了连接到远程对等点、维护和监视连接以及在不再需要连接时关闭连接的方法。

--------------------

### 5. 一对一通话 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]: /images/20221005/35cac21d63dc422aa38b59cc946fd970.png
[2.]: /images/20221005/18d3d1b083db4f7d85b29fde18be5cdd.png
[4.]: /images/20221005/91d2b52befb14b24a2d6a00fed518823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 1]: /images/20221005/d4cc6cdbb9ec4b17b7cfcef0290a2440.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 2]: /images/20221005/f885302b1fb84ac9990066301cefb7dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 3]: /images/20221005/8e2ea3f2102c44deb70046d78a7345a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 4]: /images/20221005/86e149bd76614da5b83c540fb06be010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/45dbbe90c29d47d0b55ffe06c16d1d81.png