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

本文来自熊猫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片，此时实际传输的音视频为上图，但实际播放的音视频为下图：