找回密码
 立即注册
LiveVideoStack 首页 资讯 查看内容
  • QQ空间
  • 回复
  • 收藏

熊猫TV直播H5播放器架构探索(1)

2018-6-28 08:00

本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文。当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自研一款H5播放器呢?为了保证业务持续扩展能力,需要对播放器做解耦。同时,在播放器上线初期还遇到了音画不同步、故障定位、客户端性能不足等问题。


文 / 姜雨晴

整理 / LiveVideoStack



大家知道HTML5播放器曾被广泛运用于视频点播,而今天我想与大家分享的是运用在直播领域的HTML5播放器。现在熊猫已不再使用FLVJS作为播放器了,所以今天与大家探讨一下直播HTML5播放器的技术难点与架构探索。



我来自熊猫直播,从去年的7月份加入熊猫并在 11月中旬开始开发播放器,主要致力于HTML5播放器的研制开发。


接下来我将从以下几个方面介绍HTML5播放器的相关内容:


1. HTML5播放器产生背景


首先让我们来看看HTML5播放的产生背景,



通过最近的一些新闻大家可以看到,包括谷歌的Chrome还有Adobe这样的公司都在强调其产品不再专注Flash转而更关注HTML5。在这样一个后Flash时代,我们必须要有自己的新技术来支撑视频播放,尤其是视频直播的需求。



作为熊猫直播最重要的用户之一,熊猫直播的老板王思聪之前提出H5播放器的开发需求,那么H5播放器具有哪些优势呢?



(1)高效性

第一点是高效性。我们需要明确Video标签为浏览器带来的是什么?其实是在背后把H264的Codec打进了浏览器,无需内嵌应用而是利用浏览器Codec进行视频解码。


(2)兼容性

第二点是兼容性。之前我们遇见了很多非同寻常的案例与需求,包括将HTML5播放器技术运用于电视直播或游戏主机,这其实是反映了H5解决方案的良好兼容性。这种兼容性体现在一次开发后可以在多个不同平台应用,降低开发成本。


(3)浏览器新技术

第三点是快速接入浏览器新技术。例如大家或多或少听说过的流媒体加密的浏览器新接口Encrypted  Media  Extensions,还有 WebRTC、VP9、AV1、H.265等新技术,通过使用HTML5可以将这些新技术快速接入浏览器中。例如最新版本的Chrome浏览器便打入了H.265的Codec。相对于Flash播放器, HTML5可更便捷快速地引入新技术。


当然,HTML5播放器的开发过程并不是一帆风顺的。


2. 直播领域H5播放器的问题



我们之前从未尝试过将H5播放器技术运用于视频直播领域,因此在开发初期我们遇到了很多棘手的问题。2016年12月份上线的第一版便出现音画不同步、码率过高、播放器崩溃、浏览器崩溃、延迟高等问题。



我们团队曾经将这些问题集中并研究解决方案,下面我将会选其中几个比较具有代表性的问题进行详细阐述。


2.1 音画不同步



音画不同步的问题困扰了许久,很多开发者问到相关的问题,下面就是我们对于问题的定位与解决思路。

初期我们在观察来自内核的视频时会发现主播口型与声音无法准确同步,延迟可达到两三秒。这对用户而言是一场糟糕的体验,那么究竟为什么会出现音画不同步的问题呢?


1) 问题定位



我们发现,户外直播是发生音画不同步问题最为频繁的版区。第一个原因是户外主播手机性能及网络问题导致上行数据掉帧频发;第二个原因是音频和视频的掉帧时间长度存在差异;第三个原因是播放端音视频实际播放时长不一致导致音画不同步。



上图为问题示意图。灰色框为视频帧组成的视频流,红色框为音频帧组成的音频流,理想状态下的视频流与音频流应当是长度一致。其中虚线框表示帧片丢失的状态,例如现在视频流丢了3片,音频流丢了1片,此时实际传输的音视频为上图,但实际播放的音视频为下图:



但看着一小段音视频流,两三帧的差异似乎不是特别明显;一旦累计时间过长,视频流与音频流之间的时间差异越来越大,音画不同步的现象也就会越来越明显。相信现在使用FLVJS做视频直播的朋友也都会遇到这样一个问题:音画不同步的现象随时间的增长越来越显著,那么如何改进技术消除这个问题呢?


2) 解决方案



上图是影视动画后期制作时使用Au将配音员配音人声与视频画面做对接的处理过程。当出现音画不同步的现象时最常用的处理方案是调整轨道相对位置,再添加特效使得音画自然同步。


视频直播中出现音画不同步时可以运用类似方法进行处理,我们称为抽帧处理。当然抽帧后需要进行音频补帧处理。



在这里大家一定会有疑问,后期补进去的音频帧并不是原生的,那么应该补进去什么帧呢?为了让大家比较清晰地理解这个问题,也我们使用配音中的原理进行解释。



演员配音时,因为演员说每个字时发声的频率不同,声音听上去也会不同。如果每个字的不同频率切换得比较平滑便不会出现“嘶啦”的声音也就是“过电”现象;但如果是补一个空白帧,便会出现这样的现象,此时人耳会听到短暂的电流杂音,体验很不好;尤其是当直播频繁掉帧时用户会感觉到明显的电流杂音。



所以我们取前一帧进行音频补帧,较好避免了过电现象的发生。


3)改进效果



通过上述播放器对轨与补帧处理可以在掉帧频繁时明显降低音画不同步带来的对直播视频观看的影响。


2.2 码率问题


1) 问题定位

相信大家无论是使用Flash还是在H5播放器都曾遇见正在播放时突然弹框显示“页面已崩溃”的问题。这是为什么?因为浏览器会限制网页占用运行内存。普通的无音视频流的网页,除非代码出现严重的Bug否则不会占用过高的运行内存;但如果网页中有播放器的运行便很容易使浏览器处于一个高内存占用运行状态,一旦达到运行内存上限便会使得网页崩溃。



上图是蓝光直播上线第一天的反馈情况,可以看到大家反馈的信息,无论是选手毛孔还是主播妆容都是纤毫毕现。


直播, 视频, 熊猫直播, Html5, 姜雨晴

来自: LiveVideoStack
文章点评
相关文章