webrtc整体框架

已于 2022-03-14 09:14:40 修改
阅读量4.4k 收藏 6
点赞数 2
分类专栏： WebRTC实践 文章标签： webrtc整体框架 webrtc 音视频
于 2022-03-08 09:47:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38731735/article/details/123338738
版权
本文介绍了WebRTC的整体框架，它由WebAPI、音频引擎、视频引擎和网络传输四层构成。音频引擎包括音频编解码和语音信号处理，如回声消除和降噪；视频引擎涉及视频编解码和图像处理，使用VP8作为默认编解码器，并通过视频抖动缓冲器和图像处理提高图像质量。网络传输层通过SRTP和ICE协议确保音视频数据的安全传输和穿越防火墙。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1 前言

WebRTC前世今生，在2010年google收购了GlobalIpSolutions公司，并在2011年将其开源。WebRTC主要是用于web浏览器的多媒体及时通讯技术，可以实现在没有其他中间媒介的情况下实现点对点通讯。本文主要目的是了解WebRTC的整体框架，为后续深入学习WebRTC框架打下基础。

2 整体框架介绍

WebRTC目前比较普遍的框架描述如下图所示，WebRTC整体架构从上到下一共分为三层，最上层是WbeAPI层，这一层是暴露给开发人员的用于开发WebRTC应用的JavaScript API;中间的那一层是WebRTC技术最为关键核心的一层，一共包括三个模块，分别是音频引擎、视频引擎以及网络传输；最下层是由各厂商自主开发的一层，用于实现音视频的采集和网络IO。
在这里插入图片描述

2.1 音频引擎

音频引擎（VoiceEngine）负责WebRTC的音频通信，通过一套完整的音频处理框架，解决了音频从外接设备如麦克风读入数据然后再通过网络进行传输的音频处理问题。主要分为两个模块：音频编解码和语音信号处理。其核心是回声消除(AcousticEchoCancceler，AEC)和降噪(NoiseReduction，NR)。回声消除是一种改善声音质量，消除产生的回声或防止其发生的方法。降噪是从信号中去除噪声的过程。音频机制主要分为iSAC和iLBC两大类编解码器。iLBC编解码器该窄带音频编解码器适用于IP上的语音通信。

2.2 视频引擎

视频引擎（VideoEngine）负责WebRTC的视频通信，通过一套完整的视频处理框架，解决了视频从外接设备如摄像头采集数据然后再通过网络传输最后显示视频的视频处理问题。主要分为两个模块：视频图像编解码和视频图像处理。视频图像编解码方面，默认的编解码器是VP8，比较适合实时通信场景下的视频编解码。视频图像处理方面，通过两种方式来保证传输的视频图像的高质量、美观性，一方面，利用视频抖动缓冲器来减小由于抖动和丢包带来的影响，另一方面对采集到的图像进行颜色增强、降噪等处理来提升图像清晰度。

3.3 网络传输

网络传输负责音视频数据的传输，通过一套完整的传输框架，解决了音视频数据的加密传输和防火墙穿透问题。一方面，通过SRTP协议保证音视频数据在加密的状态下进行传输，另一方面，通过整合了STUN和TURN的ICE协议来保证音视频数据可以突破防火墙和NAT网络的限制。

3 目录结构

WebRTC目录结构大致如下，其中核心模块是modules层，这个部分功能相对独立可以单独剥离运用，类似一个音视频的工具箱，涵盖了比较全面的音视频组件，音视频QOS策略主要是集中在这部分。网络P2P模块是另一个核心功能，对于点对点网络连接研究很有帮助。后续将根据各个模块和数据流进一步深入研究。
在这里插入图片描述
webrtc的框架结构共可以分为5层. 每层的大致作用如下:
接口层: 该层主要由mediaengine模块充当, 其主要作用为连接Java层与C++/C层, 向Java层提供JNI接口, 用于上层调用; 同时提供回调定义, 用于下层回调.
逻辑层: 该层主要由audio_engine和video_engine模块组成, 其主要维护了音/视频通道的逻辑处理关系, mediaengine模块通过VoiceEngineData/VideoEngineData来调用逻辑层. 而逻辑层则通过VoEBase/ViEBase来管理各自的通道及切换逻辑, 并通过其他类来调用组件层相关接口.
组件层: 该层由modules模块构成, 向上提供了所有音/视频相关的操作组件, 逻辑层可以通过这些组件抽象地调用编解码功能或下层硬件设备及文件. 该层也可以视为是对具体平台操作的抽象.
通用操作层: 该层由common_audio和common_video模块构成, 其作用主要是提供了一些通用的工具函数, 用于不同组件之间的公共调用. 可以视为工具类.
平台封装层: 该层由system_wrapper模块构成, 其作用主要为跨平台接口, 将不同平台间的常用系统接口进行封装及抽象, 便于不同平台之间的移植.

WebRTC 架构
shichaog的专栏
04-30 6500
WebRTC Native框架 我的书： 购买链接： 京东购买链接 淘宝购买链接 当当购买链接 WebRTC还是比较庞大的，咋一看无从下手，本篇以WebRTC自带的例子，阐述WebRTC Native核心的音频、视频和信令三个部分，WebRTC本身架构是P2P的，信令的部分也是围绕P2P展开的，好了，废话不多，直接上正文了。 WebRTC是Google开源的Web实时音视频通信框...
WebRTC架构图说明
u012944685的专栏
07-19 2288
首先我们通过webRTC官网上的一张图了解一下webRTC的架构： 网上也有很多资料说这张图在webRTC的官网上，但是很多童鞋根本就找不到。这是因为很多童鞋没有进行科学上网： WebRTC架构说明英文文档：https://webrtc.github.io/webrtc-org/architecture/ 对于WebRTC的架构说明，官方的英文文档已经说的很清楚了，所以本文可能更多的是充当这一个翻译者的角色。下面我们从上往下分别了解WebRTC的架构设计。 三层架构 首先我们从图中可以看出webRTC被划
WebRTC解析
qq_25218777的博客
02-24 1862
首选场景：需要浏览器免插件、超低延迟、强加密的实时交互万级并发直播（需结合 CDN 架构）纯音频广播（HLS 更经济）快速开发：Agora/Sendbird自主可控：Mediasoup/Jitsi移动端：Pion/Flutter-WebRTC通过合理架构设计（如 SFU/MCU 模式选择），WebRTC 可支撑从 1v1 通话到万人直播的全场景需求，是下一代实时通信系统的基石技术。
深入理解WebRTC
weixin_34202952的博客
09-28 279
Web Real-Time Communication（Web实时通信，WebRTC）由一组标准、协议和JavaScript API组成，用于实现浏览器之间（端到端）的音频、视频及数据共享。 WebRTC使得实时通信变成一种标准功能，任何Web应用都无需借助第三方插件和专有软件，而是通过简单地JavaScript API即可完成。 在We...
webrtc架构分析
04-29
WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术。本文对其源码框架进行分析
WebRTC Native框架(五)
2401_89609705的博客
01-14 999
代码实现上将PeerConnection和windows作为两个独立的组件，用conductor类管理起来。发送完登录请求和SDP请求之后，由网络线程一直检测来自网络的数据，并触发相应的函数，如更新列表和对端发来的数据，最终调用OnMessageFromPeer处理对端发来的数据，如果对端是新来的，则会创建InitializePeerConnection对象，这在主动发起会议时已经见过，如果是主动发起方回调了这个函数，就不会再创建这个对象了，但是依然要解析对端的SDP信息，SDP信息是JSON格式。
WebRTC Native框架(五)，HR的话扎心了
2401_84103100的博客
04-04 933
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
WebRTC基础理论和通话原理
weixin_50873490的博客
11-07 1197
WebRTC（Web RealTime Communication）是 Google于2010以6829万美元从 Global IP Solutions 公司购买，并 于2011年将其开源，旨在建立一个互联网浏览器间的实时通信的平台，让 WebRTC技术成为 H5标准之一。它定义了一组标准化的API,用于在浏览器和移动应用程序中进行实时语音、视频和数据通信,无需安装任何插件或其他软件。
WebRTC Native框架(五)，29岁vivo员工吐槽
m0_60721695的博客
03-21 345
*要想成为高级安卓工程师，必须掌握许多基础的知识。**在工作中，这些原理可以极大的帮助我们理解技术，在面试中，更是可以帮助我们应对大厂面试官的刁难。Android架构视频+BAT面试专题PDF+学习笔记即可获取！自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
WebRTC视频 01 - 视频采集整体架构
Ziwubiancheng的博客
11-12 1688
本章主要介绍了视频数据采集的关键类VcmCapture、VideoTrack、VideoBroadcaster，VideoCapture。并且交代了这几个类的主要职责，以及如何利用他们创建一条数据链路的。后续，对具体的引擎再做分析。
跨平台的WebRTC客户端框架OpenWebRTC.zip
07-19
OpenWebRTC 是基于 Gstreamer 实现的开源的、跨平台的 WebRTC 客户端框架，支持 H.264 和 VP8。利用 OpenWebRTC，WebRTC就不再仅仅是纯粹浏览器技术了，你可以在NativeAPP中使用WebRTC，并且还可以与浏览器WebRTC互联互通。 标签：OpenWebRTC
webrtc学习-架构、流程图、MediaStream、MediaStreamTrack等API
weixin_43287787的博客
11-27 1416
webrtc建立一个浏览器间的实时通信控平台。
4幅图看懂webrtc的架构
tianyu的专栏 - Linux site:blog.youkuaiyun.com/wishfly
03-01 5190
webrtc用起来很复杂，但其实他的代码结构很清晰，通过如下4幅图我们即可对他的结构有个比较清晰的认识。 图一：整体架构 图二：声音处理模块 图三：视频处理模块 图四：整体线程模型 http://www.wtoutiao.com/p/1d5hx6y.html
WebRTC架构图详解
m0_73627566的博客
07-03 409
Web API层的作用是将复杂的底层技术抽象为简单易用的接口，让开发者能够专注于业务逻辑的实现，而无需关注底层的实现细节。引擎层：引擎层是WebRTC的核心引擎，包括了音频引擎、视频引擎和网络传输引擎。音频引擎负责音频数据的采集、编解码和播放，视频引擎负责视频数据的采集、编解码和显示，网络传输引擎负责音视频数据的传输和接收。本文将详细解析WebRTC的架构图，包括其核心功能层、Web API层和应用层，旨在帮助读者理解这一复杂技术的内在逻辑，并提供一些实际应用和实践经验。二、Web API层。
WebRTC架构介绍
Ziwubiancheng的博客
09-11 1230
WebRTC早期作为一个VOIP公司的软件,被谷歌收购了之后(金额令人眼馋!!!)加入了一些强大的编解码器什么的,最终形成了一个强大的解决方案,并且已经加入了W3C推荐标准中.为啥这么做呢?原因很简单:谷歌内心寻思着:我已经都帮你想好了,调好了,总之就是做好了,还特别稳定高效,你直接调用JS的api就行了(即使您是即使半天只能憋出一个hello world的水平也是可以调用的).专业术语来说就是:不要重复造轮子!!!优秀的接口封装:上层调用API的用户"傻瓜式"调用,这也是最好的接口设计,越简单越好;
Web Real-Time Communication（WebRTC）技术概述
好记性不如写博客！
06-20 2334
1. 前言 　　WebRTC（Web Real-Time Communication——网页实时通信）是一个基于浏览器的实时多媒体通信技术。该项技术旨在使Web浏览器具备实时通信能力；同时，通过将这些能力封装并以JavaScript API的方式开放给Web应用开发人员，使得Web应用开发人员能够通过HTML标签和JavaScript API快速地开发出基于Web浏览器的实时音视频应用，而无需依
WebRtc入门 -webrtc框架
成长之路
11-22 498
紫色部分web应用开发这API层 蓝色实现部分是面向浏览器厂商的API层 蓝色虚线部分浏览器厂商可以自定义实现 重点关注PeerConnection、音频编解码模块、视频编解码模块、传输模块（STUN、TURN、ICE） VoiceEngine 音频引擎是包含一系列音频多媒体处理的框架。 PS：VoiceEngine是WebRTC极具价值的技术之一，是Google收购GIPS公司后开源的。在VoIP上，技术业界领先。 Opus：支持从6 kbit/s到510 kbit/s的恒定和可变比特率编码，帧大小..
WebRTC整体架构分析
小奥の专属领地
11-15 1024
1 设计WebRTC的目的 WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox…）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现。W3C等组织正在制定Javascript标准API，目前是Web...
springboot 整合webrtc
最新发布
02-27
### 集成 WebRTC 实现音视频通信 为了在 Spring Boot 项目中集成 WebRTC 来实现音视频通信功能，可以遵循以下架构设计和代码示例。 #### 架构概述 WebRTC 是一种支持网页浏览器进行实时语音对话或视频聊天的技术。要将其与基于 Java 的服务器端框架如 Spring Boot 结合起来，通常需要设置信令服务器来交换连接信息[^1]。 #### 设置依赖项 首先，在 `pom.xml` 文件里加入必要的 Maven 依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <!-- For handling WebSocket connections --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjar:adapter.js</artifactId> <version>7.6.0</version> </dependency> ``` #### 创建WebSocket配置类 创建一个新的配置文件用于启动 WebSocket 支持: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new SignalingServer(), "/signalling").setAllowedOrigins("*"); } } ``` #### 开发信号处理逻辑 编写一个处理器用来管理客户端之间的消息传递过程： ```java @Component public class SignalingServer extends TextWebSocketHandler { private final Set<WebSocketSession> peers = Collections.synchronizedSet(new HashSet<>()); @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { String payload = message.getPayload(); // Broadcast the received SDP/ICE candidate to all connected clients except sender itself. for (WebSocketSession peer : peers) { if (!peer.getId().equals(session.getId())) { peer.sendMessage(message); } } } @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { peers.add(session); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { peers.remove(session); } } ``` 此部分实现了简单的广播机制，当接收到新的会话描述协议(SDP) 或者交互控制组件(ICE) 候选时就会向其他所有已建立连接的用户发送这些数据[^2]。 #### 客户端HTML页面 最后一步是在前端构建 HTML 页面并引入适配器库 adapter.js ，以便兼容不同浏览器间的差异性： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Video Chat Demo</title> <script src="/webjars/adapter/adapter.js"></script> <script type="text/javascript"> let localStream; const configuration = {"iceServers": [{"urls": "stun:stun.l.google.com:19302"}]}; const pc = new RTCPeerConnection(configuration); // Add event listeners... pc.ontrack = function(event){ document.getElementById('remote-video').srcObject = event.streams[0]; }; navigator.mediaDevices.getUserMedia({video:true,audio:true}) .then(stream => { localStream = stream; document.querySelector('#local-video').srcObject = stream; stream.getTracks().forEach(track => pc.addTrack(track,stream)); }); document.querySelector("#start-call").onclick = async () => { try{ const offer = await pc.createOffer(); await pc.setLocalDescription(offer); sendToServer(JSON.stringify({"type":"offer","content":offer})); } catch(error){console.error(error);} } function sendToServer(msg){ var ws = new WebSocket(`ws://${window.location.host}/signalling`); ws.onopen = ()=>{ ws.send(msg); }; ws.onmessage = ({data})=>{ let msgData = JSON.parse(data); switch(msgData.type){ case 'answer': pc.setRemoteDescription(new RTCSessionDescription(msgData.content)); break; default: console.log("Received unknown message:",msgData); } }; }; </script> </head> <body> <h1>Simple Video Call Example</h1> <p><button id="start-call">Start Call</button></p> <div style="display:flex;"> <div> <strong>Your video:</strong><br/> <video id="local-video" autoplay muted width=320 height=240></video> </div> <div> <strong>Partner's video:</strong><br/> <video id="remote-video" autoplay width=320 height=240></video> </div> </div> </body> </html> ``` 上述代码片段展示了如何通过 JavaScript 和 HTML5 `<video>` 标签捕获本地媒体流以及显示远程参与者的视屏画面。同时利用 WebSocket 协议完成两方之间关于 SDP 提供应答及 ICE 候选项的信息交流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值