十五. Webrtc

311 阅读10分钟

Webrtc

1. 什么是WebRTC

网页即时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

1.1 组成

  • 视频引擎(VideoEngine)
  • 音效引擎(VoiceEngine)
  • 会议管理(Session Management)
  • iSAC:音效压缩
  • VP8:Google自家的WebM项目的视频编解码器
  • APIs(Native C++ API, Web API)

1.2 重要API

WebRTC原生APIs文件是基于WebRTC规格书撰写而成,这些API可分成Network Stream API、 RTCPeerConnection、Peer-to-peer Data API三类。

1.2.1 Network Stream API

  • MediaStream:MediaStream用来表示一个媒体数据流。
  • MediaStreamTrack在浏览器中表示一个媒体源。

1.2.2 RTCPeerConnection

  • RTCPeerConnection:一个RTCPeerConnection对象允许用户在两个浏览器之间直接通讯。
  • RTCIceCandidate:表示一个ICE协议的候选者。
  • RTCIceServer:表示一个ICE Server

1.2.3 Peer-to-peer Data API

  • DataChannel:数据通道(DataChannel)接口表示一个在两个节点之间的双向的数据通道

2. 架构

2.1 颜色标识说明

  • 紫色部分是Web开发者API层;
  • 蓝色实线部分是面向浏览器厂商的API层
  • 蓝色虚线部分浏览器厂商可以自定义实现

2.2 架构组件介绍

2.2.1 Your Web App

  • Web开发者开发的程序,Web开发者可以基于集成WebRTC的浏览器提供的web API开发基于视频、音频的实时通信应用。

2.2.2 Web API

面向第三方开发者的WebRTC标准API(Javascript),使开发者能够容易地开发出类似于网络视频聊天的web应用,最新的标准化进程可以查看这里. 这些API可分成Network Stream API、 RTCPeerConnection、Peer-to-peer Data API三类,详细的API说明可以看这里。 Network Stream API

  • MediaStream:MediaStream用来表示一个媒体数据流。
  • MediaStreamTrack在浏览器中表示一个媒体源。
  • RTCPeerConnection
  • RTCPeerConnection: 一个RTCPeerConnection对象允许用户在两个浏览器之间直接通讯。
  • RTCIceCandidate :表示一个ICE协议的候选者。
  • RTCIceServer:表示一个ICE Server。
  • Peer-to-peer Data API
  • DataChannel:数据通道( DataChannel)接口表示一个在两个节点之间的双向的数据通道 。

2.2.3 WebRTC Native C++ API

本地C++ API层,使浏览器厂商容易实现WebRTC标准的Web API,抽象地对数字信号过程进行处理。

2.2.4 Transport / Session

  • 传输/会话层
    • 会话层组件采用了libjingle库的部分组件实现,无须使用xmpp/jingle协议
  • a. RTP Stack协议栈
    • Real Time Protocol
  • b. STUN/ICE
    • 可以通过STUN和ICE组件来建立不同类型网络间的呼叫连接。
  • c. Session Management
    • 一个抽象的会话层,提供会话建立和管理功能。该层协议留给应用开发者自定义实现。

2.2.5 VoiceEngine

音频引擎是包含一系列音频多媒体处理的框架,包括从视频采集卡到网络传输端等整个解决方案。 PS:VoiceEngine是WebRTC极具价值的技术之一,是Google收购GIPS公司后开源的。在VoIP上,技术业界领先,后面的文章会详细了解

  • a. iSAC
    • Internet Speech Audio Codec
    • 针对VoIP和音频流的宽带和超宽带音频编解码器,是WebRTC音频引擎的默认的编解码器
    • 采样频率:16khz,24khz,32khz;(默认为16khz)
    • 自适应速率为10kbit/s ~ 52kbit/s;
    • 自适应包大小:30~60ms;
    • 算法延时:frame + 3ms
  • b.iLBC
    • Internet Low Bitrate Codec
    • VoIP音频流的窄带语音编解码器
    • 采样频率:8khz;
    • 20ms帧比特率为15.2kbps
    • 30ms帧比特率为13.33kbps
    • 标准由IETF RFC3951和RFC3952定义
  • c.NetEQ for Voice
    • 针对音频软件实现的语音信号处理元件
    • NetEQ算法:自适应抖动控制算法以及语音包丢失隐藏算法。使其能够快速且高解析度地适应* 不断变化的网络环境,确保音质优美且缓冲延迟最小。
    • 是GIPS公司独步天下的技术,能够有效的处理由于网络抖动和语音包丢失时候对语音质量产生的影响。
    • PS:NetEQ 也是WebRTC中一个极具价值的技术,对于提高VoIP质量有明显效果,加以AEC\NR\AGC等模块集成使用,效果更好。
  • d.Acoustic Echo Canceler (AEC)
    • 回声消除器是一个基于软件的信号处理元件,能实时的去除mic采集到的回声。
  • e.Noise Reduction (NR)
    • 噪声抑制也是一个基于软件的信号处理元件,用于消除与相关VoIP的某些类型的背景噪声(嘶嘶声,风扇噪音等等… …)

2.2.6 VideoEngine

  • WebRTC视频处理引擎
    • VideoEngine是包含一系列视频处理的整体框架,从摄像头采集视频到视频信息网络传输再到视频显示整个完整过程的解决方案。
  • a. VP8
    • 视频图像编解码器,是WebRTC视频引擎的默认的编解码器
    • VP8适合实时通信应用场景,因为它主要是针对低延时而设计的编解码器。
    • PS:VPx编解码器是Google收购ON2公司后开源的,VPx现在是WebM项目的一部分,而WebM项目是
    • Google致力于推动的HTML5标准之一
  • b. Video Jitter Buffer
    • 视频抖动缓冲器,可以降低由于视频抖动和视频信息包丢失带来的不良影响。
  • c. Image enhancements 图像质量增强模块
    • 对网络摄像头采集到的图像进行处理,包括明暗度检测、颜色增强、降噪处理等功能,用来提升视频质量.

3.视频

  • WebRTC的视频部分,包含采集、编解码(I420/VP8)、加密、媒体文件、图像处理、显示、网络传输与流控(RTP/RTCP)等功能。

3.1 视频采集---video_capture

  • 源代码在webrtc\modules\video_capture\main目录下,包含接口和各个平台的源代码。
  • 在windows平台上,WebRTC采用的是dshow技术,来实现枚举视频的设备信息和视频数据的采集,这意味着可以支持大多数的视频采集设备;对那些需要单独驱动程序的视频采集卡(比如海康高清卡)就无能为力了。
  • 视频采集支持多种媒体类型,比如I420、YUY2、RGB、UYUY等,并可以进行帧大小和帧率控制。

3.2 视频编解码---video_coding

  • 源代码在webrtc\modules\video_coding目录下。
  • WebRTC采用I420/VP8编解码技术。VP8是google收购ON2后的开源实现,并且也用在WebM项目中。VP8能以更少的数据提供更高质量的视频,特别适合视频会议这样的需求。

3.3 视频加密--video_engine_encryption

  • 视频加密是WebRTC的video_engine一部分,相当于视频应用层面的功能,给点对点的视频双方提供了数据上的安全保证,可以防止在Web上视频数据的泄漏。
  • 视频加密在发送端和接收端进行加解密视频数据,密钥由视频双方协商,代价是会影响视频数据处理的性能;也可以不使用视频加密功能,这样在性能上会好些。
  • 视频加密的数据源可能是原始的数据流,也可能是编码后的数据流。估计是编码后的数据流,这样加密代价会小一些,需要进一步研究。

3.4 视频媒体文件--media_file

  • 源代码在webrtc\modules\media_file目录下。
  • 该功能是可以用本地文件作为视频源,有点类似虚拟摄像头的功能;支持的格式有Avi。
  • 另外,WebRTC还可以录制音视频到本地文件,比较实用的功能。

3.5 视频图像处理--video_processing

  • 源代码在webrtc\modules\video_processing目录下。
  • 视频图像处理针对每一帧的图像进行处理,包括明暗度检测、颜色增强、降噪处理等功能,用来提升视频质量。

3.6 视频显示--video_render

  • 源代码在webrtc\modules\video_render目录下。
  • 在windows平台,WebRTC采用direct3d9和directdraw的方式来显示视频,只能这样,必须这样。

3.7 网络传输与流控

  • 对于网络视频来讲,数据的传输与控制是核心价值。WebRTC采用的是成熟的RTP/RTCP技术。

4 音频

WebRTC的音频部分,包含设备、编解码(iLIBC/iSAC/G722/PCM16/RED/AVT、NetEQ)、加密、声音文件、声音处理、声音输出、音量控制、音视频同步、网络传输与流控(RTP/RTCP)等功能。

4.1 音频设备---audio_device

  • 源代码在webrtc\modules\audio_device\main目录下,包含接口和各个平台的源代码。
  • 在windows平台上,WebRTC采用的是Windows Core Audio和Windows Wave技术来管理音频设备,还提供了一个混音管理器。
  • 利用音频设备,可以实现声音输出,音量控制等功能。

4.2 音频编解码---audio_coding

  • 源代码在webrtc\modules\audio_coding目录下。
  • WebRTC采用iLIBC/iSAC/G722/PCM16/RED/AVT编解码技术。
  • WebRTC还提供NetEQ功能---抖动缓冲器及丢包补偿模块,能够提高音质,并把延迟减至最小。
  • 另外一个核心功能是基于语音会议的混音处理。

4.3 声音加密--voice_engine_encryption

  • 和视频一样,WebRTC也提供声音加密功能。

4.4 声音文件

  • 该功能是可以用本地文件作为音频源,支持的格式有Pcm和Wav。
  • 同样,WebRTC也可以录制音频到本地文件。

4.5 声音处理--audio_processing

  • 源代码在webrtc\modules\audio_processing目录下。
  • 声音处理针对音频数据进行处理,包括回声消除(AEC)、AECM(AEC Mobile)、自动增益(AGC)、降噪(NS)、静音检测(VAD)处理等功能,用来提升声音质量。

4.6 网络传输与流控

和视频一样,WebRTC采用的是成熟的RTP/RTCP技术。

5. 几种流视频的格式

协议httpflvrtmphlsdashwebscoketflvwebRtcrtsp
传输方式http传输tcp传输http传输http传输webscoket传输webscoket传输http传输
视频封装格式flvflv tagm3u8的Ts文件Mp4 3gp webmflvSDP
延时
数据分段连续流连续流连续流切片文件连续流
HTML5播放通过html5解封包播放(flv.js)不支持可通过html5解封包播放(hls.js)如果dash文件列表是mp4 webm文件,可直接播放通过html5解封包播放(flv.js)

6. 音视频通话

6.1 流程

(1) 如何发现对方---->信令 服务器
(2) 音视频编解码能力沟通
    浏览器编解码有一定的区别,
    苹果浏览器---支持H265
    谷歌浏览器---不支持H265, 支持H264(VP8,VP9)
    微软浏览器---不支持H265
(3) 网络传输数据

6.2 NAT (Net Address Transport)

  • NAT的作用就是进行内外网的地址转换.
  • 为啥需要NAT
    • 公网IP有限
    • 每个人如果有独立的外网地址, 容易被攻击
  • 不同的网络,音视频数据怎么转发
    • 两个外网地址可以互通测试, 如果能 直接连通,叫p2p
  • 在同一个局域网,直连就可以了,

6.3 candidate封装了网络信息

  • host类型,即本机内网的IP和端口
  • srflx类型,即本机NAT映射后的外网的IP和端口
  • relay类型,即中继服务器的IP和端口

7 深度了解音视频技术

7.1

  • ICE服务器
部署
1 根据域名申请证书
2 nginx 或 caddy    https://caddyserver.com
3 nginx js jsonrpc 代理转发