webRTC深入浅出(一)

1,476 阅读4分钟

「回顾2022,展望2023,我正在参与2022年终总结征文大赛活动

webRTC深入浅出(一)

前提提要

最近接到前端组长的任务说让分享一篇关于前端技术的分享,说实话,如果不是为了API谁整体有那么多时间陪你分享各种知识点?有些知识点甚至只是形式主义,完全在生活或者工作中用不到,纯纯只是为了分享而分享,失去了技术分享会该有的样子,好了,仅仅只是一个小小的吐槽,正好我最近对webRTC技术比较感兴趣在通过不断的研究下总结出几点,观点仅供参考,有不同意见的小伙伴欢饮指正批评!

背景

首先解释一下关于webRTC,可能有的小伙伴都没听过这个词,其实也没那么高大上,它就是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。

发展历史

2010年5月,Google以6820万美元收购VoIP软件开发商Global IP Solutions的GIPS引擎,并改为名为“WebRTC”。WebRTC使用GIPS引擎,实现了基于网页的视频会议,并支持722,PCM,ILBC,ISAC等编码,同时使用谷歌自家的VP8视频解码器;同时支持RTP/SRTP传输等。

什么是WebRTC

从另一个角度来看,WebRTC 只是一个媒体引擎,上面有一个 JavaScript API,所以每个人都知道如何使用它(尽管浏览器实现仍然各不相同)。

WebRTC,网页即时通讯(英语:Web Real-Time Communication),是直接在 Web 浏览器内驱动实时通信(语音、视频和任意数据)方法的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准,并于 2011 年标准化。谷歌开源的一款产品。

简单的说:WebRTC 是一种 HTML5规范,他无需在浏览器中安装任何插件可以在网页内进行实时通信工作的开源技术,它直接在浏览器和设备之间添加实时媒体通信。

到 2016 年,估计安装了 20 亿个可以与 WebRTC 一起工作的浏览器。从流量的角度来看,仅浏览器通信就估计每周传输超过 10 亿分钟和 500 TB 的数据。

总结一下,就是谷歌开源的,跨平台的,主要用于浏览器之间的, 时时传输的,音视频引擎。

介绍.png

应用场景

应用场景.png

以后发展趋势:

音视频实时互动

游戏、即时通讯、文件传输等等

他是一个百宝箱,传输,音视频处理(回音消除、降噪等)

WebRTC 浏览器与终端兼容性

WebRTC 在所有现代浏览器中都可用。Google Chrome、Mozilla Firefox、Apple Safari 和 Microsoft Edge 都支持它。也可以将其集成到应用程序或嵌入式设备中,而完全不需要浏览器。

兼容性.png

学习的难点

难点.png

我的学习路线

学习路线.png

WebRTC 如何工作

WebRTC 是一个媒体引擎,上面有一个 JavaScript API,所以每个人都知道如何使用它(尽管浏览器实现仍然各不相同)

如何工作.png

(1)紫色部分是Web开发者API层;

(2)蓝色实线部分是面向浏览器厂商的API层

(3)蓝色虚线部分浏览器厂商可以自定义实现

Track 轨 MediaStream 流

webRTC重要类

MediaStream 获取的媒体流 RTCpeerConnection 传输的流 RTCDataChannel 非音视频数据

RTCpeerConnection调用过程

流.png

调用时序图

时序图.png

架构组件介绍

Your Web App

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

webRtc源码目录结构

目录.png

目录2.png

目录3.png

目录4.png

参考资料:

webRTC介绍 baike.baidu.com/item/WebRTC…