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

珍稀干货!阿里 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   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
原文地址:How To Secure Your Web App With HTTP Headers原文作者:Hagay Lupesko众所周知,无论是简单的小网页还是复杂的单页应用,Web 应用都是网络攻击的目标。2016 年,这种最主...【详细内容】
2020-07-06   Web  点击:(1)  评论:(0)  加入收藏
NodeJS是服务器端JavaScript,是为在网络应用程序框架内实现高性能而开发的,并针对并发环境进行了优化。它是使用命令行工具,用JavaScript和C ++编写。它借助后端JavaScript代码...【详细内容】
2020-07-02   Web  点击:(3)  评论:(0)  加入收藏
阅读目录 一、前言 二、主动攻击 三、被动攻击 四、我们能做什么?回到顶部一、前言HTTP 协议具有无状态、不连接、尽最大努力的特点,对于 Web 网站的攻击基本也是针对 HTTP 协...【详细内容】
2020-07-02   Web  点击:(1)  评论:(0)  加入收藏
大家好,从今天起,我们一起来学习 Echo 框架。这几年,随着 Go 语言的发展,各种 Web 框架也出现了。常言道:没有选择是一种无奈,有选择是一种痛苦。所以,大家总是问:Web 框架大佬推荐...【详细内容】
2020-06-30   Web  点击:(1)  评论:(0)  加入收藏
在 macOS Big Sur 中,Safari 将支持更多类型的 Web 扩展,苹果也将使其更容易从其它浏览器移植现有扩展。Safari 虽然支持扩展,但是与 Google Chrome 或 Firefox 这样的浏览器相...【详细内容】
2020-06-28   Web  点击:(2)  评论:(0)  加入收藏
现如今,有越来越多的小伙伴,进入IT行业,从事web开发工作。那么今天,我们一起来了解下什么是web开发。随着近年来,互联网技术的飞速发展,再加上移动端应用的突飞猛进,可以说真正让we...【详细内容】
2020-06-26   Web  点击:(2)  评论:(0)  加入收藏
1 说明:=====1.1 Bokeh是专门针对Web浏览器的交互式、可视化Python绘图库。1.2 Bokeh,可以做出像D3.js简洁漂亮的交互可视化效果,但是使用难度低于D3.js。1.3 不需要使用Javasc...【详细内容】
2020-06-26   Web  点击:(0)  评论:(0)  加入收藏
我在 Mac 上编写 WordPress 插件,这些是我的工具列表。 来源:https://linux.cn/article-12337-1.html 作者:David Gewirtz 译者:Xingyu.Wang(本文字数:4974,阅读时长大约:8 分钟)根...【详细内容】
2020-06-22   Web  点击:(0)  评论:(0)  加入收藏
一:简介WebMvcConfigurer是SpringBoot的一个配置类,采用JavaBean的形式来代替传统的xml配置文件形式,简化了开发中类的配置,可以自定义一些Handler,Interceptor,ViewResolver,Messa...【详细内容】
2020-06-22   Web  点击:(1)  评论:(0)  加入收藏
什么是webshell顾名思义,webshell是通过web实现的shell,即通过PHP、JSP、ASP.NET等网页编程语言执行命令,并通过HTTP进行请求、应答的非交互的命令行模拟shell。使用webshell控...【详细内容】
2020-06-21   Web  点击:(0)  评论:(0)  加入收藏
0x00 前言之前我们简单介绍了一下扫描器中爬虫的部分,接下来将继续介绍扫描器中一些我们认为比较有趣的技巧。0x01 编码/解码/协议在很久以前有人提问 AMF 格式的请求怎么进...【详细内容】
2020-06-20   Web  点击:(1)  评论:(0)  加入收藏
不少的云服务器的网页后台就能登录服务器,并可以在浏览器上进入命令行交互。能不能在自己也部署一个呢?能不能配置一个更加符合自身需求的网页 SSH 终端呢?或许可以以此做一个...【详细内容】
2020-06-18   Web  点击:(2)  评论:(0)  加入收藏
如果有人告诉您可以使用150-200行代码创建交互式Web应用程序,该怎么办? 有趣的权利。 Streamlit为您提供了使用简单的python脚本和一些streamlit调用来创建漂亮的Web应用程序...【详细内容】
2020-06-16   Web  点击:(13)  评论:(0)  加入收藏
我在前面的文章中提到过目前基于WebGL的前端三维可视化存在的一些问题:1、前端浏览体验和数据量有很大关系,需要花费大量的数据进行数据的轻量化以及切片处理,但是同样要忍受切...【详细内容】
2020-06-15   Web  点击:(0)  评论:(0)  加入收藏
网络可访问性标准很重要,对Web开发人员,必须要解知识一些应Web可访问性标准,以便创造更好的访问体验。然而,有在一个问题实践中公认的W3C Web内容可访问性指南(WCAG,现在是2.1版本...【详细内容】
2020-06-15   Web  点击:(0)  评论:(0)  加入收藏
提升Web应用的性能从未像今天这样刻不容缓。在线经济活动的比例日益提高,就连发展中国家和地区的经济活动都已经有5%以上在线进行了(相关数据请参考本文后面的资源)。在这个超...【详细内容】
2020-06-12   Web  点击:(1)  评论:(0)  加入收藏
什么是二次注入?恶意数据插入到数据库时被处理的数据又被还原并存储在数据库中,当Web程序调用存储在数据库中的恶意数据并执行SQL查询时,就发生了SQL二次注入。 本课二次注入思...【详细内容】
2020-06-09   Web  点击:(4)  评论:(0)  加入收藏
在这篇文章中,小编要给您推荐的是这款内置集成环境的软件,phpstudy。有些人一看到这个是国产的集成环境软件,心里就过不去,但是小编想说的是,不要因为他是国产软件就直接否定他,实...【详细内容】
2020-06-09   Web  点击:(5)  评论:(0)  加入收藏
1 说明:=====1.1 PySimpleGUI1.1.1 是PySimpleGUI的一个组成包,而PySimpleGUI使用起来非常简单。1.1.2 本人曾介绍过:《python3的PySimpleGUI库的介绍、安装、学习》,此处省略。...【详细内容】
2020-06-09   Web  点击:(23)  评论:(0)  加入收藏
SQL注入攻击#!/usr/bin/env python# -*- coding: utf-8 -*-from flask import Flask,requestimport pymysqlapp = Flask(__name__)"""SQL语句注入 在编写SQL语句时,如果...【详细内容】
2020-06-09   Web  点击:(4)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条