WebRTC音视频全解

1、 WebRTC是什么?
2、 WebRTC能做什么?
3、 常用API
4、 基本原理

WebRTC是什么?

WebRTC全称是Web Real-Time communication,是一种实时音视频通讯技术,通过WebRTC可以使浏览器之间建立点对点的连接,并实时传输数据。

WebRTC能做什么?

  • 音视频通话
    目前WebRTC应用得最广泛的场景就是音视频通话,比如直播,在线课堂,聊天。


     

  • 屏幕分享
    也可以通过WebRTC在PC浏览器上实现屏幕分享。


     
  • 文件传输
    使用WebRTC传输数据时,数据可以是任意的二进制数据,所以在浏览器和浏览器之间能直接传输文件。



     
  • 互动白板
    以在线课堂为例,【教师】在浏览器的白板中绘制内容,使用WebRTC将绘制的内容逐帧实时传输到【学生】的浏览器并渲染。

常用API

  • 捕获麦克风和摄像头

    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  • 列举出支持的媒体类型
    navigator.mediaDevices.enumerateDevices()
  • 屏幕分享
    navigator.mediaDevices.getDisplayMedia()
  • 音视频录制
    new MediaRecorder(stream[, options])
  • P2P的连接管理
    new RTCPeerConnection([configuration]);

WebRTC 原理

WebRTC主要分为四部分,分别是信令、建立连接、安全加密、数据传输,下面分别介绍四个步骤。

一(信令)

信令是指通信两端基于交换的数据进行协商。通俗的解释就是在互联网中两个浏览器之间如果要进行点对点的数据传输,连接双方需要交换对方的一些基本信息,基本信息包括对方的地址,带宽,数据的编解码格式,是否支持音视频等等信息。

二(建立连接)

通信双方的基本信息完成交换后,浏览器双方开始建立连接。在网络中,浏览器双方可能在同一个内网,可能不在同一个内网,中间可能还隔着交换机、路由器,还会存在防火墙。在网络的环境复杂的情况下,通信的双方需要找到一条最佳路径传输数据建立连接。建立连接主要使用的协议就是ICE协议。【ICE协议】又需要依赖【STUN协议】和【TURN协议】。

  • 【STUN协议】功能主要是探测主机的公网ip和端口。
  • 【TURN协议】是一个转发数据的中继服务器。
  • 【ICE协议】被称为交互式连接建立协议,主要用于NAT穿透,建立通信两端的多媒体数据流。ICE协议的基本思路是获取一系列可以访问的终端的网络地址,按照优先级发出UDP请求进行探测,如果探测成功,就使用此地址作为数据传输的地址。

三(安全加密)

在WebRTC中,为了保证媒体传输的安全性,引入了【DTLS】作为传输加密协议,DTLS原理和作用类似于SSL/TLS,【DTLS】主要适用于UDP通信过程的加密,SSL/TLS主要适用于TCP通信过程的加密。
在WebRTC中,音视频数据传输是使用RTP协议,然后通过 DTLS 协商出加密密钥之后,RTP 也需要升级为 SRTP,通过密钥加密后进行通信。协议栈如下图所示:

 

四(数据传输)

上面说了对数据加密是使用DTLS,传输数据则分为两种情况,一种是传输音视频数据,另一种是传输自定义应用数据。

1、音视频数据传输,主要使用RTP/SRTP、RTCP/SRTCP协议

  • RTP协议:用来传输实时行较高的数据。
  • RTCP协议:用来监控数据传输过程中的传输质量,并给予数据发送方反馈。
    SRTP 和 SRTCP协议就是在RTP 和 RTCP的基础上加了一个S,可以理解为SRTP = RTP + DTLS,SRTCP = RTCP + DTLS。
    2、自定义应用数据,主要使用SCTP协议
    之前介绍过,RTP/RTCP主要用来传输音视频,是为了流媒体设计的。而对于自定义应用数据的传输,WebRTC中使用了SCTP协议。

结尾

前面主要对WebRTC做了一个简单介绍,跳过了很多细节,有些地方可能不够严谨,如果有兴趣的读者,可以对技术做进一步研究,比如:
1、信令如何进行协商?
2、传输层用了UDP,UDP本身是不可靠的,那么,音视频数据、自定义用户数据的时序、质量是如何保证的?
3、RTP用来传递音视频数据,为什么还需要有RTCP?
4、SCTP如何从协议层面兼顾传输的效率和质量?如何实现自定义数据的高效传递?
5、ICE协议的完整流程。
6、其他。