WebRTC

[tanxukun]

名词

• SDP会话描述协议 Session Description Protocol
• NAT网络地址转换 Network Address Translation
• Candidate网络协商
• WebRTC Web实时通信技术 Web Real-Time Communication
• Mesh 多端进行两两连接，形成网状结构，优势：不需要服务器处理数据，只进行NAT穿透，节省服务器资源；劣势：多人的时候客户端上行带宽和CPU等资源占用很大
• MCU 服务器对流数据解码进行混合处理，重新编码发送给其他端，优势：技术成熟，减少差异化，各端开到的画面一样，体验好；劣势：重新解码，编码，混流，CPU资源消耗巨大，延迟高，上限低
• SFU 服务器直接对数据进行转发，优势：对服务器CPU资源占用少，延迟低，灵活性高；劣势：可能不同步，画面也可能不一致
• STUN（Session Traversal Utilities for NAT，NAT会话穿越应用程序）是一种网络协议，它允许位于NAT（或多重 NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的 Internet端端口。这些信息被用来在两个同时处于NAT路由器之后的主机之间创建UDP通信。该协议由RFC 5389定 义。
• TURN的全称为Traversal Using Relays around NAT，是STUN/RFC5389的一个拓展，主要添加了Relay功能。如果 终端在NAT之后， 那么在特定的情景下，有可能使得终端无法和其对等端（peer）进行直接的通信，这时就需要公网 的服务器作为一个中继， 对来往的数据进行转发。这个转发的协议就被定义为TURN。
• Simulcast模式 客户端可以向SFU发送不同分辨率的视频（一般为三路，如1090p,720p,360p），SFU再根据终端的网络情况选择某一路发出去
• SVC 视频编码时起作用，将视频分成多层（核心层，中间层和扩展层），带宽不好时，只传输底层即核心层，在带宽充足时将三层都发送，SFU发送到终端也一样

SDP

webrtc通过SDP协商，告知对端支持的音视频编码类型，编码器参数，音频或者视频的路数，以及与音视频相关的采样率，编码等等，双方根据各自的能力情况，协商出待传输音视频流的具体参数。 媒体信息描述是整个SDP规范中最重要的部分，他主要包括媒体类型、媒体格式、传输协议、传输的IP和端口。 https://www.jianshu.com/p/48079ba9a96c

Janus

Meetecho开发的WebRTC服务器

Some Api

• navigator.mediaDevices: MediaDevices => https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices
• enumerateDevices() 获取系统可用媒体输入输出设备信息，返回Array<InputDeviceInfo | InputDeviceInfo | MediaDeviceInfo | ...>
• getDisplayMedia() 选择显示器或屏幕窗口或标签栏（画面共享），返回Promise
• getUserMedia() 打开摄像头或麦克风，返回Promise
• 事件: ondevicechange，设备有添加或移除 => navigator.mediaDevices.ondevicechange = function(event) { //updateDeviceList(); }
• addTransceiver：建立一个单一的双向轨道流

RTCPeerConnection

https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection/RTCPeerConnection

发现

icecandidate事件在setLocalDescription之后触发

API记录

• navigator.mediaDevices.enumerateDevices(): Promise<Array> 获取当前可用的所有设备
• navigator.mediaDevices.getDisplayMedia(): Promise 选择和授权捕获展示的内容或部分内容,如整个屏幕，窗口或标签页，用作画面共享
• navigator.mediaDevices.getSupportedConstraints() 获取客户端所支持的约束属性
• navigator.mediaDevices.getUserMedia(): Promise 打开摄像头和麦克风
• navigator.mediaDevices.ondevicechange = (event) => {}; 监听设备编变化

图解