慢慢来,是种诚意,加载中 . . .

webrtc学习笔记


img

引言

WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.

1.什么是WebRTC?

WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API

2.特性

  • 基于网页的视频会议
  • 标准是WHATWG 协议
  • 是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications (RTC))能力。
  • 最终目的主要是让Web开发者能够基于浏览器(Chrome\FireFox...)轻易快捷开发出丰富的实时多媒体应用
  • 无需下载安装任何插件
  • WebRTC提供了视频会议的核心技术,包括音视频的采集、编解码、网络传输、显示等功能,并且还支持跨平台:windows,linux,mac,android。

WebRTC是一个开源项目,旨在使得浏览器能为实时通信(RTC)提供简单的JavaScript接口。

支持的浏览器和平台

Chrome Firefox Opera Safari Android iOS
chrome firefox Opera apple android apple
Latest ✔ Latest✔ Latest✔ 11+ ✔ Latest ✔ 11+ ✔

WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。

它并不是单一的协议,包含了媒体、加密、传输层等在内的多个协议标准以及一套基于 JavaScript 的 API。通过简单易用的 JavaScript API ,在不安装任何插件的情况下,让浏览器拥有了 P2P音视频和数据分享的能力。同时WebRTC 并不是一个孤立的协议,它拥有灵活的信令,可以便捷的对接现有的SIP 和电话网络的系统。

WebRTC 内部结构

demo-01

架构图颜色标识说明:

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

3.三个接口

WebRTC实现了三个API,

分别是:

  • MediaStream:通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流
  • RTCPeerConnection:RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件
  • RTCDataChannel:RTCDataChannel使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传输任意数据

W3C标准传送门

:hibiscus: JavaScript API

:tulip: 接口教程

webrtc有三个模块

WebRTC有三个模块:

  • Voice Engine(音频引擎)
    • Voice Engine包含iSAC/iLBC Codec(音频编解码器,前者是针对宽带和超宽带,后者是针对窄带)
    • NetEQ for voice(处理网络抖动和语音包丢失)
    • Echo Canceler(回声消除器)/ Noise Reduction(噪声抑制)
  • Video Engine(视频引擎)
    • VP8 Codec(视频图像编解码器)
    • Video jitter buffer(视频抖动缓冲器,处理视频抖动和视频信息包丢失)
    • Image enhancements(图像质量增强)
  • Transport
    • SRTP(安全的实时传输协议,用以音视频流传输)
    • Multiplexing(多路复用)
    • P2P,STUN+TURN+ICE(用于NAT网络和防火墙穿越的)
    • 除此之外,安全传输可能还会用到DTLS(数据报安全传输),用于加密传输和密钥协商
    • 整个WebRTC通信是基于UDP的

WebRTC 的核心组件

  • 音视频引擎:OPUS、VP8 / VP9、H264
  • 传输层协议:底层传输协议为 UDP
  • 媒体协议:SRTP / SRTCP
  • 数据协议:DTLS / SCTP
  • P2P 内网穿透:STUN / TURN / ICE / Trickle ICE
  • 信令与 SDP 协商:HTTP / WebSocket / SIP、 Offer Answer 模型

WebRTC 音频和视频引擎

demo-01

  • 最底层是硬件设备,上面是音频捕获模块和视频捕获模块
  • 中间部分为音视频引擎。音频引擎负责音频采集和传输,具有降噪、回声消除等功能。视频引擎负责网络抖动优化,互联网传输编解码优化
  • 在音视频引擎之上是 一套 C++ API,在 C++ 的 API 之上是提供给浏览器的Javascript API     

WebRTC 协议栈

WebRTC协议栈

  • WebRTC 核心的协议都是在右侧基于 UDP 基础上搭建起来的
  • 其中,ICE、STUN、TURN 用于内网穿透, 解决了获取与绑定外网映射地址,以及 keep alive 机制
  • DTLS 用于对传输内容进行加密,可以看做是 UDP 版的 TLS。由于 WebRTC 对安全比较重视,这一层是必须的。所有WebRTC组件都必须加密,并且其JavaScript API只能用于安全源(HTTPS或本地主机)。信令机制并不是由WebRTC标准定义的,所以您必须确保使用安全协议。
  • SRTP 与 SRTCP 是对媒体数据的封装与传输控制协议
  • SCTP 是流控制传输协议,提供类似 TCP 的特性,SCTP 可以基于 UDP 上构建,在 WebRTC 里是在 DTLS 协议之上
  • RTCPeerConnection 用来建立和维护端到端连接,并提供高效的音视频流传输
  • RTCDataChannel 用来支持端到端的任意二进制数据传输
  • WebRTC 协议栈解释
    • ICE:互动式连接建立(RFC 5245)
    • STUN:用于NAT的会话遍历实用程序(RFC 5389)
    • TURN:在NAT周围使用继电器进行遍历(RFC 5766)
    • SDP:会话描述协议(RFC 4566)
    • DTLS:数据报传输层安全性(RFC 6347)
    • SCTP:流控制传输协议(RFC 4960)
    • SRTP:安全实时传输协议(RFC 3711)

相关参考

WebRTC各种资料集合

javascript frameworks

Video chat:

https://github.com/andyet/SimpleWebRTC
https://github.com/priologic/easyrtc
https://github.com/webRTC-io/webRTC.io

Peer-to-peer data:

http://peerjs.com/
https://github.com/peer5/sharefest

demos:

https://webrtc.github.io/samples/

WebRTC codelab:

a step-by-step guide that explains how to build a complete video chat app, including a simple signaling server.
https://www.bitbucket.org/webrtc/codelab

Getting started:

https://webrtc.org/start/

tutorials:

http://www.html5rocks.com/en/tutorials/webrtc/basics/

中文文档:

https://segmentfault.com/a/1190000000436544
[http://www.cnblogs.com/lingyunhu/tag/webrtc%20android%20ios/](http://www.cnblogs.com/lingyunhu/tag/webrtc android ios/)
http://blog.csdn.net/kl222/article/details/17198873/

其他:

http://www.openwebrtc.org/
http://www.theucbuyer.com/blog/3-considerations-for-hosting-webrtc-based-applications-in-the-cloud
http://telestax.com/webrtc_cloudbees/

如何部署服务器?

https://www.npmjs.com/package/easyrtc
https://easyrtc.com/docs/guides/easyrtc_server_install.php
https://webrtchacks.com/own-phoneco-with-webrtc/
http://piratefsh.github.io/projects/2015/08/27/webrtc-stun-turn-servers.html
http://danielpocock.com/get-webrtc-going-fast

安装Turn服务器?

https://www.webrtc-experiment.com/docs/TURN-server-installation-guide.html

webrtc提供商

国外:
https://xirsys.com
https://tokbox.com/developer/
https://cloud.aculab.com/documents/webrtcdemo
https://www.twilio.com/webrtc
http://www.frafos.com/webrtc/
http://www.sightcall.com/
国内:融云,亲加云,环信等。

webrtc用户或者demo列表:

http://telestax.com/webrtc_cloudbees/

现代 JavaScript 教程

实战demo练习和教程

必须要有摄像头,(笔记本和手机默认支持)


评论
  目录