您当前的位置:首页 > 电脑百科 > 软件技术 > 音/视频编辑

WebRTC 音视频同步原理与实现

时间:2021-08-17 10:08:33  来源:  作者:易简视源云会议

所有的基于网络传输的音视频采集播放系统都会存在音视频同步的问题,作为现代互联网实时音视频通信系统的代表,WebRTC 也不例外。本文将对音视频同步的原理以及 WebRTC 的实现做深入分析。

1、时间戳 (timestamp)

同步问题就是快慢的问题,就会牵扯到时间跟音视频流媒体的对应关系,就有了时间戳的概念。

时间戳用来定义媒体负载数据的采样时刻,从单调线性递增的时钟中获取 , 时钟的精度由 RTP 负载数据的采样频率决定。音频和视频的采样频率是不一样的,一般音频的采样频率有 16KHz、44.1KHz、48KHz 等,而视频反映在采样帧率上,一般帧率有 25fps、29.97fps、30fps 等。

习惯上音频的时间戳的增速就是其采样率,比如 16KHz 采样,每 10ms 采集一帧,则下一帧的时间戳,比上一帧的时间戳,从数值上多 16 x10=160,即音频时间戳增速为 16/ms。而视频的采样频率习惯上是按照 90KHz 来计算的,就是每秒 90K 个时钟 tick,之所以用 90K 是因为它正好是上面所说的视频帧率的倍数,所以就采用了 90K。所以视频帧的时间戳的增长速率就是 90/ms。

2、时间戳的生成

音频帧时间戳的生成

WebRTC 的音频帧的时间戳,从第一个包为 0,开始累加,每一帧增加 = 编码帧长 (ms) x 采样率 / 1000,如果采样率 16KHz,编码帧长 20ms,则每个音频帧的时间戳递增 20 x 16000/1000 = 320。这里只是说的未打包之前的音频帧的时间戳,而封装到 RTP 包里面的时候,会将这个音频帧的时间戳再累加上一个随机偏移量(构造函数里生成),然后作为此 RTP 包的时间戳,发送出去,如下面代码所示,注意,这个逻辑同样适用于视频包。

WebRTC 音视频同步原理与实现

 

视频帧时间戳的生成

WebRTC 的视频帧,生成机制跟音频帧完全不同。视频帧的时间戳来源于系统时钟,采集完成后至编码之前的某个时刻(这个传递链路非常长,不同配置的视频帧,走不同的逻辑,会有不同的获取位置),获取当前系统的时间 timestamp_us_,然后算出此系统时间对应的 ntp_time_ms_,再根据此 ntp 时间算出原始视频帧的时间戳 timestamp_rtp_,参看下面的代码,计算逻辑也在 OnFrame 这个函数中。

WebRTC 音视频同步原理与实现

 

为什么视频帧采用了跟音频帧不同的时间戳计算机制呢?我的理解,一般情况音频的采集设备的采样间隔和时钟精度更加准确,10ms 一帧,每秒是 100 帧,一般不会出现大的抖动,而视频帧的帧间隔时间较大采集精度,每秒 25 帧的话,就是 40ms 一帧。如果还采用音频的按照采样率来递增的话,可能会出现跟实际时钟对不齐的情况,所以就直接每取一帧,按照取出时刻的系统时钟算出一个时间戳,这样可以再现真实视频帧跟实际时间的对应关系。

跟上面音频一样,在封装到 RTP 包的时候,会将原始视频帧的时间戳累加上一个随机偏移量(此偏移量跟音频的并不是同一个值),作为此 RTP 包的时间戳发送出去。值得注意的是,这里计算的 NTP 时间戳根本就不会随着 RTP 数据包一起发送出去,因为 RTP 包的包头里面没有 NTP 字段,即使是扩展字段里,我们也没有放这个值,如下面视频的时间相关的扩展字段。

WebRTC 音视频同步原理与实现

 

3、音视频同步核心依据

从上面可以看出,RTP 包里面只包含每个流的独立的、单调递增的时间戳信息,也就是说音频和视频两个时间戳完全是独立的,没有关系的,无法只根据这个信息来进行同步,因为无法对两个流的时间进行关联,我们需要一种映射关系,将两个独立的时间戳关联起来。

这个时候 RTCP 包里面的一种发送端报告分组 SR(SenderReport) 包就上场了,详情请参考RFC3550。

WebRTC 音视频同步原理与实现

 

SR 包的其中一个作用就是来告诉我们每个流的 RTP 包的时间戳和 NTP 时间的对应关系的。靠的就是上边图片中标出的 NTP 时间戳和 RTP 时间戳,通过 RFC3550 的描述,我们知道这两个时间戳对应的是同一个时刻,这个时刻表示此 SR 包生成的时刻。这就是我们对音视频进行同步的最核心的依据,所有的其它计算都是围绕这个核心依据来展开的。

4、SR 包的生成

由上面论述可知,NTP 时间和 RTP 时间戳是同一时刻的不同表示,只是精度和单位不一样。NTP 时间是绝对时间,以毫秒为单位,而 RTP 时间戳则和媒体的采样频率有关,是一个单调递增数值。生成 SR 包的过程在 RTCPSender::BuildSR(const RtcpContext& ctx) 函数里面,老版本里面有 bug,写死了采样率为 8K,新版本已经修复,下面截图是老版本的代码:

WebRTC 音视频同步原理与实现

 

计算的思路如下

首先,我们要获取当前时刻(即 SR 包生成时刻)的 NTP 时间。这个直接从传过来的参数 ctx 中就可以获得:

WebRTC 音视频同步原理与实现

 

其次,我们要计算当前时刻,应该对应的 RTP 的时间戳是多少。根据最后一个发送的 RTP 包的时间戳 last_rtp_timestamp_ 和它的采集时刻的系统时间
last_frame_capture_time_ms_,和当前媒体流的时间戳的每 ms 增长速率 rtp_rate,以及从 last_frame_capture_time_ms_ 到当前时刻的时间流逝,就可以算出来。注意,last_rtp_timestamp_ 是媒体流的原始时间戳,不是经过随机偏移的 RTP 包时间戳,所以最后又累加了偏移量 timestamp_offset_。其中最后一个发送的 RTP 包的时间信息是通过下面的函数进行更新的:

WebRTC 音视频同步原理与实现

 

5、音视频同步的计算

因为同一台机器上音频流和视频流的本地系统时间是一样的,也就是系统时间对应的 NTP 格式的时间也是一样的,是在同一个坐标系上的,所以可以把 NTP 时间作为横轴 X,单位是 ms,而把 RTP 时间戳的值作为纵轴 Y,画在一起。下图展示了计算音视频同步的原理和方法,其实很简单,就是使用最近的两个 SR 点,两点确定一条直线,之后给任意一个 RTP 时间戳,都可以求出对应的 NTP 时间,又因为视频和音频的 NTP 时间是在同一基准上的,所以就可以算出两者的差值。

WebRTC 音视频同步原理与实现

 

上图以音频的两个 SR 包为例,确定出了 RTP 和 NTP 对应关系的直线,然后给任意一个 rtp_a,就算出了其对应的 NTP_a,同理也可以求任意视频包 rtp_v 对应的 NTP_v 的时间点,两个的差值就是时间差。

下面是 WebRTC 里面计算直线对应的系数 rate 和偏移 offset 的代码:

WebRTC 音视频同步原理与实现

 

在 WebRTC 中计算的是最新收到的音频 RTP 包和最新收到的视频 RTP 包的对应的 NTP 时间,作为网络传输引入的不同步时长,然后又根据当前音频和视频的 JitterBuffer 和播放缓冲区的大小,得到了播放引入的不同步时长,根据两个不同步时长,得到了最终的音视频不同步时长,计算过程在
StreamSynchronization::ComputeRelativeDelay() 函数中,之后又经过了 StreamSynchronization::ComputeDelays() 函数对其进行了指数平滑等一系列的处理和判断,得出最终控制音频和视频的最小延时时间,分别通过 syncable_audio_->SetMinimumPlayoutDelay(target_audio_delay_ms) 和 syncable_video_->SetMinimumPlayoutDelay(target_video_delay_ms) 应用到了音视频的播放缓冲区。

这一系列操作都是由定时器调用
RtpStreamsSynchronizer::Process() 函数来处理的。

另外需要注意一下,在知道采样率的情况下,是可以通过一个 SR 包来计算的,如果没有 SR 包,是无法进行准确的音视频同步的。

WebRTC 音视频同步原理与实现

 

WebRTC 而实现音视频同步的手段就是 SR 包,核心的依据就是 SR 包中的 NTP 时间和 RTP 时间戳。最后的两张 NTP 时间-RTP 时间戳 坐标图如果你能看明白(其实很简单,就是求解出直线方程来计算 NTP),那么也就真正地理解了 WebRTC 中音视频同步的原理。如果有什么遗漏或者错误,欢迎大家一起交流!



Tags:WebRTC   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
我们有时候在音频通话过程中,想要改成视频通话。如果挂断当前的通话再重新发起视频通话就会显得比较麻烦。 因此很多app提供了将音频通话升级成视频通话的功能,同时也有将视频...【详细内容】
2021-12-23  Tags: WebRTC  点击:(5)  评论:(0)  加入收藏
【网络通信 -- WebRTC】WebRTC 基础知识 -- ICE 交互总结【1】ICE 的一般概念简介ICE 角色offer (主动发起)的一方为 controlling 角色answer (被动接受)的一方为 controlle...【详细内容】
2021-11-30  Tags: WebRTC  点击:(24)  评论:(0)  加入收藏
前言最近对 WebRTC iOS 端源码进行了下载和编译,网上针对 WebRTC iOS 端的编译文章基本都是几年前的,有些地方已经不适用于最新版的 WebRTC 的编译,简单记录下载&编译的过程,以...【详细内容】
2021-11-10  Tags: WebRTC  点击:(38)  评论:(0)  加入收藏
Web平台上的WebRTC并不是其唯一的媒体API。WebVR说明书于几年前被引入来为浏览器中的虚拟现实设备提供支持。目前已经变为新的WebXR设备API说明书。今年夏天我在ClueCon,Dan...【详细内容】
2021-08-27  Tags: WebRTC  点击:(70)  评论:(0)  加入收藏
作者 | Vitaly Suturikhin翻译 | 徐鋆 低广播延迟已经成为任何关于建设源端站和CDN的招标和竞争中的必要特性。以前这种标准只适用于体育广播,但现在运营商要求每个领域的广...【详细内容】
2021-08-17  Tags: WebRTC  点击:(70)  评论:(0)  加入收藏
所有的基于网络传输的音视频采集播放系统都会存在音视频同步的问题,作为现代互联网实时音视频通信系统的代表,WebRTC 也不例外。本文将对音视频同步的原理以及 WebRTC 的实现...【详细内容】
2021-08-17  Tags: WebRTC  点击:(75)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  Tags: WebRTC  点击:(113)  评论:(0)  加入收藏
本文来自《WebRTC Native开发实战》书籍作者许建林在LiveVideoStack线上分享中的内容,详细分析总结 WebRTC 的视频数据流程,并对大型项目如何快速上手:分析方法,如何在工作中按...【详细内容】
2020-09-10  Tags: WebRTC  点击:(66)  评论:(0)  加入收藏
一、什么是WebRTCWebRTC技术是激烈的开放的Web战争中一大突破-Brendan Eich, inventor of JavaScript。简单来说,WebRTC 是一个音视频处理+及时通讯的开源库。在实时通信中,音...【详细内容】
2020-08-12  Tags: WebRTC  点击:(89)  评论:(0)  加入收藏
目录1,自定义摄像头分辨率2,码率限制3,调整编码器顺序4,Mesh模型多方通话5,Janus框架分析6,Janus Web源码分析7,Janus Android源码分析8,基于Janus实现会议系统自定义摄像头分辨率一...【详细内容】
2020-07-26  Tags: WebRTC  点击:(218)  评论:(0)  加入收藏
▌简易百科推荐
今天还真是有点小激动啊,B站看来要和抖音杠上了,之前抖音推出网页端要对标B站,不过似乎大家没有用网页刷抖音的习惯。但是这次B站竟然推出了“必剪”电脑客户端,激动的我赶紧下...【详细内容】
2021-12-14  最佳应用    Tags:剪辑   点击:(20)  评论:(0)  加入收藏
做短视频的话我们需不需要跟着热点走呢?答案当然是肯定的!而且还是一定要的!为什么呢?因为热点是最大的流量池,比如最近的大S离婚事件就是热点,这是最大的流量池。所有人的目光都...【详细内容】
2021-12-01  易撰    Tags:短视频   点击:(24)  评论:(0)  加入收藏
平时工作的时候想必大家都有听音乐(摸鱼)的视频,音乐给我们的生活带来了很大的乐趣,但是很多时候我们会发现一些格式的限制,无法播放我们用各种工具录制的音乐,我们现在就来对音频...【详细内容】
2021-11-16  下科技小助手    Tags:MP3   点击:(26)  评论:(0)  加入收藏
游戏视频录制,用什么软件录屏好?小关这几周在某鱼看到了好多的游戏主播,这些游戏主播有的比技术,有的比能说会道,有的比样貌。都在各自得直播间里面玩得热火朝天,有自己的一处小天...【详细内容】
2021-11-11  杨姐爱智能    Tags:录屏   点击:(35)  评论:(0)  加入收藏
怎么在电脑上录制高清视频?小米最近在学校有点闲,因为这个学期的课程较少,自己也提前完成了许多的学习任务,想着怎么有效的把这些空闲的时间好好利用起来,不能白白浪费这些时间吧...【详细内容】
2021-11-11  张哥聊科技    Tags:高清视频   点击:(22)  评论:(0)  加入收藏
时长:4h 14m | 32节| 视频:1280×720,44 KHz | 2.6 GB语言:英语+中英文字幕(根据原英文字幕机译更准确)成为Adobe Premiere Pro专业版视频编辑专家的唯一要求你会学到什么a...【详细内容】
2021-11-03  CG达人  搜狐号  Tags:Premiere   点击:(23)  评论:(0)  加入收藏
我们在制作短视频的时候,需要自己给视频配音,然后与拍摄内容合成还是很难的,所以少不了后期配音的环节。今天小编给大家推荐几款,超好用的短视频配音软件。1、剪映小伙伴是不是...【详细内容】
2021-11-03  语音dub爱好者  搜狐号  Tags:视频配音   点击:(65)  评论:(0)  加入收藏
视频怎么压缩变小?视频的出现虽然说给我们的日常生活带来了极大的消遣与事业发展,但是不得不说视频格式非常占用内存,如果想要进行视频的拍摄、剪辑、放映对工具都需要较高的要...【详细内容】
2021-11-03  娱乐情怀    Tags:视频   点击:(44)  评论:(0)  加入收藏
如何把m4v转换成mp4格式?M4V是一种应用于网络视频点播网站和移动手持设备的视频格式,是MP4格式的一种特殊类型。由苹果公司创造,此种格式为 iPod 、iPhone 和 PlayStation Port...【详细内容】
2021-11-03  纸折兔    Tags:m4v   点击:(38)  评论:(0)  加入收藏
FFmpeg的作用: FFmpeg是一个优秀的多媒体框架; FFmpeg可以运行在Linux,Mac,Windows等平台; FFmpeg可以解码,编码,转码,复用,解复用,过滤音视频数据。播放器基本架构:image.pngSDL视频渲...【详细内容】
2021-10-27  linux音视频    Tags:FFmpeg   点击:(30)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条