详解WebRTC——网页实时通信技术

简介

全称是： Web browser Real Time Communication
特点如下：

• 是基于浏览器的实时音视频（数据）通信技术
• 免插件
• 开源
• 已被W3C纳入HTML5标准
• 跨平台，跨浏览器，跨移动应用
• Mac OSX、Windows、iOS、Android、Linux

应用场景

适用于网页间音视频实时通信，点对点数据共享，QQ、腾讯视频已有应用

优势

1.方便。对于用户来说，在WebRTC出现之前想要进行实时通信就需要安装插件和客户端，但是对于很多用户来说，插件的下载、软件的安装和更新这些操作是复杂而且容易出现问题的，现在WebRTC技术内置于浏览器中，用户不需要使用任何插件或者软件就能通过浏览器来实现实时通信。
2.免费。虽然WebRTC技术已经较为成熟，其集成了最佳的音/视频引擎，十分先进的codec，但是Google对于这些技术不收取任何费用。
3.强大的打洞能力。WebRTC技术包含了使用STUN、ICE、TURN、RTP-over-TCP的关键NAT和防火墙穿透技术，并支持代理。

缺点

1.传输质量难以保证，比如跨地区、跨运营商、低带宽、高丢包、P2P连接率、呼叫成功率。
2.设备端适配，如回声、录音失败等问题层出不穷。这一点在安卓设备上尤为突出。由于安卓设备厂商众多，每个厂商都会在标准的安卓框架上进行定制化，导致很多可用性问题（访问麦克风失败）和质量问题（如回声、啸叫）。

WebRTC媒体会话原理

WebRTC内部结构简化图

WebRTC架构图（截图来自官网https://webrtc.org/）

WebRTC核心技术点，简要概括为三部分

下文详细介绍WebRTC核心API和信令服务器部分

WebRTC 核心API详解

运用RTCPeerConnection和RTCDataChannel两个核心API，能够实现任意数据的点对点交换，官网Demo如下：

该Demo不需要servers，因为呼叫方（发送数据）和呼叫应答方（接收数据）在同一页面上，这样能够清晰的了解RTCPeerConnection API的原理，页面上的RTCPeerConnection对象可以直接交换数据和消息，而无需使用信令服务器。
可以用开发者工具查看WebRTC统计信息

• Chrome：chrome://webrtc-internals
• Opera：opera://webrtc-internals
• FireFox：about:webrtc
  chrome开发者工具中查看WebRTC，如下图所示：