一.WebRTC愿景

想象一下一个世界,您的电话,电视和计算机都可以在同一个平台上进行通信。想象一下,将视频聊天和对等数据共享添加到Web应用程序很容易。这就是WebRTC的愿景。

想尝试一下吗?WebRTC现在可在台式机和移动设备上的Google Chrome,Safari,Firefox和Opera中使用。一个很好的起点是位于appr.tc的简单视频聊天应用程序:

  1. 在浏览器中打开appr.tc。
  2. 单击加入按钮加入聊天室,然后让该应用使用您的网络摄像头。
  3. 在新标签页中打开页面底部显示的URL,或者最好在另一台计算机上打开。

二.WebRTC概念

1.什么是WebRTC

我们都知道浏览器本身不支持相互之间建立信道进行通信,都需要通过服务器进行中转。比如现在有两个客户端—甲、乙,他俩想要进行通信,首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时,甲先将消息发送到服务器上,服务器对甲的消息进行中转,发送到乙处,反过来也是一样。这样甲与乙之间的一次消息要通过两段信道,通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流的传输,如何建立浏览器之间的点对点传输,一直困扰着开发者。因此WebRTC应运而生。

WebRTC是一个开源项目,旨在使得浏览器能为实时通信(RTC)提供简单的JavaScript接口。说的简单明了一点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样,打通一个浏览器与WebSocket服务器之间的通信,而是通过一系列的信令,建立一个浏览器与浏览器之间(-to-peer)的信道,这个信道可以发送任何数据,而不需要经过服务器。并且WebRTC通过实现MediaStream,通过浏览器调用设备的摄像头、话筒,使得浏览器之间可以传递音频和视频。

同时WebRTC是一个非常优秀的多媒体框架,且支持跨平台(支持Android、IOS),能够使得Android和IOS设备作为终端设备能够像浏览器一样,进行即时通信。

2.使用WebRTC能做什么?

  • 能用于音视频实时互动,视频会议
  • 能用于游戏、即时通讯、文件传输等等
  • 它是一个采集,编码,传输音视频处理(回音消除、降噪等),渲染

3.学习WebRTC的过程中我们能掌握什么?

  • 音视频设备的访问与管理
  • 音视频数据的采集
  • 数据的传输与实时互动
  • WebRTC的整体工作机制

4.学习WebRTC步驟

(1). 学习NodeJS的基本使用,尝试搭建一个简单的Web服务器并实现简单的HTTP服务。

(2). 学习JavaScript,了解并掌握其基本的使用方法,为后续开发及完善Web服务做技术铺垫。

(3). 了解音视频设备相关的Web API,尝试使用MediaDevices实现音视频设备的访问,包括摄像头、麦克风及屏幕采集。

(4). 学习使用Socket.IO,尝试使用Socket.IO实现简单的聊天室,为后续开发WebRTC信令服务器做技术铺垫。

(5). 了解和学习使用SDP,并使用WebRTC的Web API实现本地的1v1视频互通。

(6). 搭建STUN/TURN服务器,使用ICE框架及Socket.IO实现WebRTC正式的1V1连麦

(7). 实现WebRTC的移动端开发,做到浏览器和手机客户端能进行连麦操作。

三.WebRTC架构

整个WebRTC架构具有很高的复杂性。

 

整体架构分为应用层和核心层。应用层提供实现相关业务逻辑Api,核心层提供应用层需要的核心API。

其中核心层分为四层:

第一层为C++ API,其中最主要的是PeerConnection,这个接口需要重点学习和掌握。

第二层为Session层,为上下文管理层,应用里的音频和视频及非音视频的数据处理逻辑都可以在这层进行。

第三层为引擎和传输层,包括音频引擎和视频引擎,以及音视频的传输,这也是整个架构中最重要的一层。

第四层与硬件相关,包括音视频的采集和网络的IO。

注:WebRTC的核心层无视频的渲染,所有的渲染都需要应用层自行实现。

这里着重提一下第三层:

  • Voice Engine(音频引擎模块):包含编码能力、音频缓冲Buff(防网络抖动)、回音消除(实时连麦关键点)。
  • Video Engine(视频引擎模块):包含编码能力(如VP8)、视频缓冲、图像增强。
  • Transport(传输模块):传输协议在底层使用UDP,上层使用的RTP(为安全起见增加SRTP),还有P2P机制,包括STUN、TURN 和 ICE。

四、WebRTC源码目录结构

这里着重介绍一下module目录下的子目录结构:

五、WebRTC 运行机制

WebRTC核心API有三个:MediaStream、RTCPeerConnection、RTCDataChannel。

MediaStream:通过设备的摄像头及话筒获得视频、音频的同步流

PeerConnection: 用于构建点对点之间稳定、高效的流传输的组件

DataChannel:能够使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传输任何数据

其中PeerConnection调用过程如下图所示:

 

其中RTCPeerConnection对象的主要任务是建立和创建对等连接。我们可以轻松地钩住连接的关键点,因为此对象在出现时会触发一组事件。这些事件使您可以访问我们的连接配置,如下图所示:

六,WebRTC-快速指南

基本方案

WebRTC允许您快速,轻松地建立与其他Web浏览器的对等连接。为了从头开始构建这样的应用程序,您需要大量的框架和库来处理典型的问题,例如数据丢失,连接丢失和NAT遍历。借助WebRTC,所有这些内置于现成的浏览器中。这项技术不需要任何插件或第三方软件。它是开源的,其源代码可从http://www.webrtc.org/

WebRTC API包括媒体捕获,音频和视频的编码和解码,传输层以及会话管理

基本方案

媒体捕捉

第一步是访问用户设备的摄像头和麦克风。我们检测可用设备的类型,获得用户访问这些设备和管理流的权限。

音频和视频编码和解码

通过Internet发送音频和视频数据流并非易事。这是使用编码和解码的地方。这是将视频帧和音频波分成较小的块并将其压缩的过程。该算法称为编解码器。有大量不同的编解码器,这些编解码器由具有不同业务目标的不同公司维护。WebRTC内部也有许多编解码器,例如H.264,iSAC,Opus和VP8。当两个浏览器连接在一起时,它们会在两个用户之间选择最受支持的编解码器。幸运的是,WebRTC在后台进行了大多数编码。

运输层

传输层管理数据包的顺序,处理数据包丢失并连接到其他用户。同样,WebRTC API使我们可以轻松访问事件,这些事件会在连接出现问题时告诉我们。

会话管理

会话管理处理管理,打开和组织连接。这通常称为信令。如果将音频和视频流传输给用户,则传输附带数据也很有意义。这是由RTCDataChannel API完成的。

来自Google,Mozilla,Opera等公司的工程师为将这种实时体验引入Web做出了出色的工作。

参考:

https://www.cnblogs.com/renhui/p/6369568.html

https://www.tutorialspoint.com/webrtc/webrtc_quick_guide.htm

https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-disruptive

 

 

 

原文链接:https://blog.csdn.net/u014162133/article/details/106816015

最后修改日期:2020年6月19日