WebRTC介绍

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

WebRTC是什么?

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


image.png

通过上述图片可以看到【浏览器M】和【浏览器L】可以在不依赖于Web服务器的情况下点对点实时传输数据。上图中的Web服务器不是用于数据传输,而是用于协助【浏览器M】和【浏览器L】进行连接,进行协助连接的服务器也叫【信令服务器】。

WebRTC能做什么?

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


    image.png
  • 屏幕分享
    也可以通过WebRTC在PC浏览器上实现屏幕分享。
image.png
  • 文件传输
    使用WebRTC传输数据时,数据可以是任意的二进制数据,所以在浏览器和浏览器之间能直接传输文件。
  • 互动白板
    以在线课堂为例,【教师】在浏览器的白板中绘制内容,使用WebRTC将绘制的内容逐帧实时传输到【学生】的浏览器并渲染。


    image.png

常用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,通过密钥加密后进行通信。协议栈如下图所示:


image.png

四(数据传输)

上面说了对数据加密是使用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、其他。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,392评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,258评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,417评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,992评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,930评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,199评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,652评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,327评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,463评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,382评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,432评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,118评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,704评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,787评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,999评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,476评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,057评论 2 341

推荐阅读更多精彩内容