WebRTC的工作原理

WebRTC是一个在浏览器内实现实时通信的技术,无需插件,支持音视频及数据的点对点传输。其工作流程涉及信令和媒体的分离,包括基本概念如浏览器的P2P通信,信令的HTTP/HTTPS或WebSocket传输,以及媒体的SRTP/SCTP传输。WebRTC通过ICE协商处理NAT穿越,确保浏览器之间的直接通信,必要时使用TURN服务器。在实现WebRTC应用时,需要考虑客户端开发、信令处理、NAT穿越和媒体处理。了解WebRTC的工作原理有助于高效实现相关应用。
摘要由CSDN通过智能技术生成

作者:Tsahi Levent-Levi

翻译:Alex

技术审校 | 刘连响


在这里插入图片描述

▲扫描图中二维码了解音视频技术大会更多信息▲

Easy-Tech #032#

WebRTC由很多模块构成。你想了解它的工作原理吗?

WebRTC工作起来就像施魔法一样。你将浏览器指向一个URL,让其他人也将他的浏览器指向一个URL,然后,你们就能看到彼此了。是不是很酷?

如果你了解WebRTC内部的工作原理,你就会知道那里发生了很多事。

我将从不同角度向大家解释WebRTC的工作原理。最后,它们将向你呈现出WebRTC的完整面貌。

WebRTC的基本概念

下面是我介绍WebRTC时首先强调的两点:

  1. WebRTC原生支持Web浏览器进行实时通信

  2. WebRTC是使用JavaScript API的媒体引擎

pic

WebRTC是一种直接在Web浏览器内部实现实时通信(语音、音频和任意数据)的方法,无需任何插件和下载。

从另一方面看,WebRTC只是一个媒体引擎,其上层是JavaScript API,每个人都知道如何使用它(尽管浏览器实现依然各不相同)。所以从这一角度,我就不多做解释了。

现在,让我们从浏览器的角度开始了解真正令WebRTC独一无二的原因。

如果到现在为止,当你想到Web应用的时候,呈现在你眼前的是客户端和服务器:

在这里插入图片描述

你将浏览器作为客户端,它连接服务器后,并向其请求内容(让我们称之为请求)。服务器对请求发送响应。这里我们先抛开WebSocket,但它们的内在原理是一样的。如果我想给正在使用浏览器的朋友发送一条信息,这条信息需要先来到服务器,从那里再发送给我的朋友。这与现实生活中的邮局非常相似。

在这里插入图片描述

WebRTC的交互流程和上述的流程不大一样。

虽然我们仍然需要以某种方式从一个浏览器向另一个浏览器发送信令(以便我们能够相互定位),但一旦发送信令结束,我们就可以直接在两个浏览器之间发送消息——而Web服务器永远不会获取到这些消息。是不是像魔法一样?

这也是WebRTC被称为点对点技术(简称为P2P)的原因。因为浏览器之间可以直接通信。

媒体和信令的分离

在加载网页时,我们已经习惯了浏览器为了渲染页面要去获取100种不同的资源,这些资源来自各种不同的服务器:页面的托管服务器、保存静态文件的CDN和一些第三方网站。也就是说,这些文件主要被分为三类:

  1. HTML和CSS,构成了网站及其形式的主要内容

  2. JS,通常运行网站的交互部分

  3. <
ANS (Adaptive Noise Suppression) 是 WebRTC 中的音频模块之一,用于降噪。它基于维纳滤波原理来实现降噪功能。维纳滤波是一种经典的信号处理方法,通过对输入信号进行加权平均,以减少噪声的影响。 在 ANS 中,维纳滤波器的系数是根据上一帧的带噪语音和估计的干净语音来计算的。先验 SNR (Signal-to-Noise Ratio) 是用来衡量信号与噪声之间的比例关系,通过先验 SNR 的计算,可以对当前帧的噪声进行估计和抑制。 ANS 支持多种采样率,其中最常用的是 16k HZ。在语音信号处理中,一帧通常为 10 毫秒,对应 160 个采样点。处理过程中,信号会从时域转换到频域进行处理,然后再从频域转换回时域。这两个转换过程是对称的,与降噪算法无关。 以上是关于 WebRTC ANS 的基本原理和一些细节的介绍。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [webRTC中语音降噪模块ANS细节详解(一)](https://blog.csdn.net/david_tym/article/details/120576289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [webRTC中语音降噪模块ANS细节详解(三)](https://blog.csdn.net/david_tym/article/details/121040570)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [webRTC中语音降噪模块ANS细节详解(二)](https://blog.csdn.net/david_tym/article/details/120817304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值