webRTC流程梳理(个人学习版)

519 阅读3分钟

webRtc创建流程

  1. 呼叫者通过 navigator.mediaDevices.getUserMedia() (en-US) 捕捉本地媒体。
  2. 呼叫者创建一个RTCPeerConnection 并调用 RTCPeerConnection.addTrack() (注: addStream 已经过时。)
  3. 呼叫者调用 RTCPeerConnection.createOffer() 来创建一个提议 (offer).
  4. 呼叫者调用 RTCPeerConnection.setLocalDescription() (en-US) 将提议 (Offer) 设置为本地描述 (即,连接的本地描述).
  5. setLocalDescription() 之后,呼叫者请求 STUN 服务创建 ice 候选 (ice candidates)
  6. 呼叫者通过信令服务器将提议 (offer) 传递至 本次呼叫的预期的接受者。
  7. 接受者收到了提议 (offer) 并调用 RTCPeerConnection.setRemoteDescription() 将其记录为远程描述 (也就是连接的另一端的描述).
  8. 接受者做一些可能需要的步骤结束本次呼叫:捕获本地媒体,然后通过RTCPeerConnection.addTrack()添加到连接中。
  9. 接受者通过 RTCPeerConnection.createAnswer() (en-US) 创建一个应答。
  10. 接受者调用 RTCPeerConnection.setLocalDescription() (en-US) 将应答 (answer) 设置为本地描述。此时,接受者已经获知连接双方的配置了。
  11. 接受者通过信令服务器将应答传递到呼叫者。
  12. 呼叫者接受到应答。
  13. 呼叫者调用 RTCPeerConnection.setRemoteDescription() 将应答设定为远程描述。如此,呼叫者已经获知连接双方的配置了。

流程与专业属于解析

步骤3,createOffer创建出的offer是啥

该offer属于SDP offer Session Description Protocol (SDP).描述了用于连接的多媒体内容,包括分辨率,格式,编码,加密算法等。 具体SDP内容大致如下:

image.png

关于SDP中具体的字段可以参考这篇文章,很详细。

步骤5:stun协议和ice

stun协议:Session Traversal Utilities for NAT (STUN)

NAT协议: Network Address Translation (NAT)

先解释一下NAT协议:路由器拥有一个公网ip, 所有连接该路由器的设备无公网ip,取而代之,路由器为这些设备提供私有网段的ip地址(例如192.168.x.x). 私网设备在公网上的ip被映射为路由器的公网IP+唯一的端口。通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。也就是所谓的局域网

顾名思义,stun协议作为NAT传输协议,作用就是让处于局域网的设备和公网设备进行通信。私网设备通过stun server获取自己的在公网IP地址(也就是路由器的IP+唯一端口). 从而与公网上设备进行通信。

image.png (图片来自MDN)

ice 候选 除了交换关于媒体的信息 (上面提到的 Offer / Answer 和 SDP ) 中,对等体必须交换关于网络连接的信息。这被称为 ICE 候选者,并详细说明了对等体能够直接或通过 TURN 服务器进行通信的可用方法。通常,每个对点将优先提出最佳的 ICE 候选,逐次尝试到不佳的候选中。理想情况下,候选地址是 UDP(因为速度更快,媒体流能够相对容易地从中断恢复 ),但 ICE 标准也允许 TCP 候选。

步骤六 信令服务器

看起来只是需要一个能传递webRTC通信双方offer的服务器就行

步骤九 answer

offer的应答数据结构,可以提供应答方相关信息

webRTC步骤图解

image.png

关于webRTC的具体流程,可以使用webrtc-internals进行查看