您当前的位置:首页 > 电脑百科 > 网络技术 > 网络知识

珍稀干货!阿里 Web 音视频开发趟坑指南

时间:2020-02-05 11:03:25  来源:  作者:

作者 | 阿里文娱前端技术专家 归影

责编 | 夕颜

出品 | CSDN(ID:CSDNnews)

这不是一篇基于MSE开发Web播放器的入门文章,而是围绕Web播放器开发遇到的常见问题与解决方案,毕竟入门文章常有而趟坑干货不常有。如果您有Web播放开发经验和音视频技术基础,读起来会更有共鸣。

Web播放器开发基础知识

先介绍Web播放器开发的一些基础知识。有人要问了,Web播放器开发难道不是一个video标签就够了么?非也!

1、浏览器Video支持的格式非常有限

在W3C的标准里面Video只支持MP4格式 准确的说是ISOBMFF(Fragment MP4)。当然chrome支持WEBM,safari支持HLS(MPEG-TS)这都是自家的私有实现,做不得数。

2、浏览器Video无法逐个加载视频切片

现在主流的流媒体点播/直播技术,都会把视频切片。而video标签src只能挂载整个MP4资源。没法逐个的加载视频分段。

所以我们的主角出场—— MediaSource Extenstion,简称MSE,是一套能不断的把音视频二进制数据塞给video标签播放的API。

图1:MSE简明结构

MSE内部可以创建一系列的sourcebuffer,一般是一个音频buffer,一个视频buffer。把MSE做成blob url之后绑定给video的src。然后就可以通过AppendBuffer往video里追加音视频数据了。有了MSE,播放器器的整体结构是什么样的呢,见下图。

图2:Web播放器简明结构

首先在浏览器层面,主要使用video标签、MSE、XHR 和UI。那么播放器主要由Manager驱动加载视频的playlist(比如HLS里的m3u8,dash里的MPD,FLV虽然不是playlist概念,但是是原理上差别不大,都是为了拿到视频的一个个的片段的地址),并通过数据服务加载这一个个的分片。然后通过transmuxer也就是所谓的转封装器,把分片的封装格式比如TS拆开(demux) 把连原始的音视频数据解出来,再重新打包成fmp4(remux),最后通过MSE API喂给video标签里,让video去播放。

因此播放器所做的事情最主要有两点:

1) 转封装。即将video不支持的封装格式转码成video所支持的封装格式;

2) 如何驱动整个播放进行。即决定何时下载下一个分片,何时需要解码插入到video的buffer里。

时间戳对齐

转封装除了的封装格式的解复用(demux)和再复用(remux)之外最重要的环节就是分片的时间戳对齐策略,以及音视频同步。

图3(传说中的“开局一张图 原理全靠猜”)

简单讲一下上图:红色代表音频的时间轴。蓝色/青色是视频的时间轴。PTS(Presentation Time Stamp) 指的是这一帧需要渲染的时间。DTS(Decoding Time Stamp) 指的是这一帧需要解码的时间。

1、首片首帧的对齐策略

正常来说音频PTS和DTS是一样的,而视频如果有B帧的话DTS往往要比PTS早一些(因为要预留一定的时间解码)。因此视频的首帧会有一个洞(gap/shift随便你怎么叫),如果不经处理插到video里,那么video里的buffer也会呈现出一小段的洞,一般是0.08s(比如10s的分片 插进去可能出现0.08~10.08的情况)。现在主流的做法是削掉这个洞。就是把DTS跟PTS强行拉平,一般来说chrome 不会出现太大的问题。但是safari不行,如果不预留一定的DTS/PTS偏移,safari前两帧的播放会明显卡顿。

2、后续对齐策略后续分片的对齐,会通过DTS/PTS两个尾部指针来做。如果发现后续分片时间轴有间隔就往前推从而填上间隔。如果发现重叠,就把重叠帧后移。这样虽然会导致后续分片的前几帧重叠。但在播放的过程中几乎没有影响。

音视频同步

首先,什么情况下会导致音画不同步?

1、视频源流压根没对齐。没救了,看下一点。

2、还是因为有洞。很多时候视频切出来的每个分片之间都不一定是严丝合缝的,分片间的音视频时间戳可能有洞。而且对于TS由于音频每一帧的duration(≈23ms) 跟视频每一帧的duration(40ms@25fps) 无法吻合(整除) 所以加剧了这种参差不齐的情况。那么,重点来了!chrome有个特殊的机制, 如果发现音频之间有洞之后,为了保证音频的平顺,会自动把后续音频往前推抹平这个洞。如果每个分片都有洞,悲剧了,这种往前推的操作就会积累越来越多导致音视频不同步。

小tips:

打开chrome的媒体调试页面 chrome://media-internals 可以看到媒体播放相关的所有debug信息和error信息非常有用。其中就会有一条关于音频处理的提示:

当然这条显示的具体原因是自动切掉重叠overlap导致的。其实gap/overlap本质是一样的。怎么办?当然是播放器自己主动把洞填上。具体做法是插帧。目前主要是插静音帧,或者复制前一帧。静音帧会带来毛刺音,复制帧会导致拖音。我们目前的优化方案是判断附近的音频数据量,数据量大时说明此处声音丰富(其实不算靠谱,姑且这么处理,因为没有更好的判断方式),如果插静音帧会毛刺很明显,所以此时用复制帧,反之插静音帧。

那些年我们趟过的坑

1、 不同版本表现差异 容忍度不同

1) Chrome 35分水岭。chrome35之前要求关键帧之后的第一帧dts不允许跟关键帧dts相同,否则抛错。

2) 低延迟的模式。把转封装出来的FMP4中的视频轨duration(tkhd box) 设置成0xffffffff 时会让chrome认为这是直播流,会开启低延迟模式,所谓低延迟模式就是会极大的减少帧缓存,基本上视频帧立马解码立马播放减少每个分片的起播延迟。但是呢在CPU负载过高的情况下(解不过来)会造成视频频繁卡顿(网络无关的)。

2、 不同浏览器表现有差异

1) timeupdate事件。W3C的标准是不能超过250ms触发一次。windows下360等浏览器会达到500ms左右。

2) safari对每一帧duration平顺度更敏感。safari需要对每一视频帧的duration标准化处理,例如TS下要处理成3600。

3) 对洞的容忍度不同。chrome遇到buffer中有0.08的间隔以内会自动跳过去。像IE edge等浏览器不行会卡住,所以播放器一定要有跳洞逻辑。比如判断当前卡在洞的边界,要主动跳过去(seek)。

3、内存限制

通过MSE push给video的视频数据会在内部维护一个buffer,这个尺寸是有限制的。

1) chrome系列约100M

2) IE系列约30M

超过的话就会导致抛出 QuotaExceededError 。所以需要处理好buffer的尺寸以及及时清除不用的buffer。比如已经播放过的,正常浏览器会自己清除,但是不那么的及时。

优化

简单说一下卡顿相关的优化。

  • 多级Buffer控制
  • ABR 自适应码率算法
  • 基于WebRTC的P2P

1、多级buffer

为什么要有多级的buffer?因为video本身的解码buffer有大小限制,而且buffer过长会导致长时间解码,会导致CPU一直占用高。所以我们搞了两级buffer一级就是video的buffer另外一级是内存中的,只负责下载,二级很长。可以消除网络抖动带来的卡顿影响。

2、ABR自适应码率的算法

这个主要是来预测用户本身的带宽范围,然后选用不同码率的视频流来无缝切换播放。当然还有一些策略算法,比如根据用户现在buffer的水位,或者检测到用户频繁超时,来采用不同的策略。

3、基于WebRTC的P2P ‍‍

因为P2P是基于UDP的传输,可以突破一些带宽限制或网络拥塞而导致的卡顿问题。不过P2P不一定靠谱所以还是要辅以普通的HTTP传输相结合。我们一般是利用P2P加indexDB 来变相延长视频的缓冲区。因为P2P带宽成本便宜,我们利用P2P做了一个非常长又很便宜的buffer。这样的话网络再波动也不会导致卡顿了。



Tags:Web   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
本人已经过原作者制授权翻译。在这篇文章中,主要介绍10种快速提高网站性能的方法,你只需5分钟内就可以将它应用到你的网站上,废话不多说,让我们进入正题吧 。1. 文件压缩文件压...【详细内容】
2020-11-12   Web  点击:(3)  评论:(0)  加入收藏
一、Drogon是一个基于C++14/17的Http应用框架,使用Drogon可以方便的使用C++构建各种类型的Web应用服务端程序。 本版本库是github上Drogon工程的镜像库。Drogon是作者非常喜...【详细内容】
2020-11-12   Web  点击:(3)  评论:(0)  加入收藏
简介上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历,文件上传无处不在。在本文中,我们将讨论 HTML文件上传支持的10种用法,希望对你...【详细内容】
2020-11-12   Web  点击:(2)  评论:(0)  加入收藏
WAF是什么?WAF的全称是(Web Application Firewall)即Web应用防火墙,简称WAF。国际上公认的一种说法是:Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提...【详细内容】
2020-11-12   Web  点击:(5)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送...【详细内容】
2020-11-11   Web  点击:(3)  评论:(0)  加入收藏
摘要:Webpack是一种前端资源构建工具,一个静态模块打包器。1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/les...【详细内容】
2020-11-06   Web  点击:(5)  评论:(0)  加入收藏
前言我们看到越来越多的人将他们的想法倾注到网页上。我们所指的这些人可能不熟悉网站设计和发布的技术细节,因此在建立他们的平台(网站)时可能会遇到一些问题。使用什么托管...【详细内容】
2020-10-24   Web  点击:(5)  评论:(0)  加入收藏
CSRF跨站请求伪造(Cross-Site Request Forgery)CSRF经常配合XSS一起进行攻击!(同XSS类似,都属于跨站攻击,不攻击服务器端而攻击正常访问网站的用户!)XSS利用站点内的信任用户,CS...【详细内容】
2020-10-22   Web  点击:(6)  评论:(0)  加入收藏
前段时间我有这样一个需求,想和一个异地的人一起看电影,先后在网上找了一些方案,不过那几个案都有一些缺点...【详细内容】
2020-10-21   Web  点击:(6)  评论:(0)  加入收藏
你需要一个 WebSecurityConfigurerAdapter 来对用户提供安全的校验,确保用户能够访问必要的资源。一个基于 Spring Boot 的应用程序将会帮你完成安全的校验(通过在 HTTP 的基...【详细内容】
2020-10-16   Web  点击:(6)  评论:(0)  加入收藏
heatmap.js是一个轻巧,易于使用的JavaScript库,可帮助您可视化三维数据!heatmap.js满足了您所有的热图可视化需求!Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图...【详细内容】
2020-10-12   Web  点击:(10)  评论:(0)  加入收藏
JavaScript是最流行的编程语言之一。过去的20年中程序员们见证了它的爆发式增长。现在,JavaScript几乎可以执行任何操作,并且可以在包括物联网在内的多个平台和设备上运行。其...【详细内容】
2020-10-09   Web  点击:(4)  评论:(0)  加入收藏
Bullet 是一款基于 Java 实现,通过 WebSocket 实现 Bullet 协议反向控制 ngrok 的 web 管理化工具。项目完全开源免费,可独立部署。平台提供了 server 服务,可满足短期的内网穿...【详细内容】
2020-09-30   Web  点击:(9)  评论:(0)  加入收藏
通过一个可视化、拖拽式的界面,LoadUI允许您实时、交互式地创建、配置和重分配负载测试。在单一测试环境下,LoadUI提供完整的测试覆盖,支持所有标准的协议和技术。它功能强大,能...【详细内容】
2020-09-29   Web  点击:(8)  评论:(0)  加入收藏
go-fly基于GO语言实现的web客服即时通讯与客服管理系统。非常适合给自己的网站增加在线客服功能,代码简单也适合学习。Github地址:https://github.com/taoshihan1991/go-fly1....【详细内容】
2020-09-25   Web  点击:(14)  评论:(0)  加入收藏
背景基于Springboot应用以war包的形式运行在tomcat容器中,当更新war包时会有一段时间服务返回404,这对于线上服务是不可接受的。4层的负载均衡可以自动将80端口关闭的节点下线...【详细内容】
2020-09-25   Web  点击:(4)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数...【详细内容】
2020-09-18   Web  点击:(7)  评论:(0)  加入收藏
随着开发框架和平台的不断成熟,需要开发者考虑的安全问题越来越少,但并不是开发者就不需要关心项目的安全问题。Linux、Tomcat等大型项目时不时爆出安全漏洞,把网络安全话题重...【详细内容】
2020-09-16   Web  点击:(8)  评论:(0)  加入收藏
有网站的朋友们肯定了解web应用防火墙,这是目前主要防护网站安全的产品,web应用防火墙一般有三种形态,硬件、软件、云形态,一般软件和云形态用的最多,因为硬件WAF普遍价格在几十...【详细内容】
2020-09-11   Web  点击:(10)  评论:(0)  加入收藏
本文来自《WebRTC Native开发实战》书籍作者许建林在LiveVideoStack线上分享中的内容,详细分析总结 WebRTC 的视频数据流程,并对大型项目如何快速上手:分析方法,如何在工作中按...【详细内容】
2020-09-10   Web  点击:(7)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条