视频直播之webp礼物解决方案

最近在Tiki项目中要使用到礼物和边框效果，而后咱们开发团队研究了几种实现的思路。

一、视频：成本最低，不须要额外的设计以及开发成本，直接在收到消息的时候显示就行了。可是性能消耗比较大，Tiki内部已经有两个视频流了，自己编解码的消耗不小了，若是还同时显示边框和显示的话，至关于又多了两个视频流，性能压力大。Android端机型比较多，低端机型很多，因此这个方案放弃。

二、图片：图片方案中动图方案又分好几种，先上性能图

图片来自http://blog.ibireme.com/2015/11/02/mobile_image_benchmark/

感谢该文做者的辛苦测试

1、APng

首先引用下维基百科的解释：

APNG（Animated Portable Network Graphics）格式是PNG的位图动画扩展，但未获PNG组织官方承认。它的扩展方法相似GIF89a，仍对原版PNG保持向下兼容。APNG第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块里，所以只支持原版PNG的软件会正确显示第1帧。APNG与Mozilla社区关系密切，格式标准文档设置在Mozilla网站。

APNG 目前并无被 PNG 官方所接受，因此 libpng 并不能直接解码 APNG。不过网上有很多APng的第三方库，仍是能够解决播放的问题。但以后的一个测试显示，APNG的压缩效率不高，一样的动图用FFMpeg生成的APNG的图片比Webp的图片大了将近1倍，最后咱们决定放弃APNG。

2、BPG

BGP是属于一个移动端比较冷门的格式，咱们在备选方案中也曾经考虑过。虽然BGP有着H.265的压缩编码，拥有很高的压缩比，可是效率是硬伤。在全部的格式比较中，解码速度基本只有别的格式的1/2到1/10，基本不能用到礼物这种须要及时显示的需求上，何况咱们App的CPU和GPU负载很高。

3、Gif

Gif在使用范围上很普遍，第三方库也不少，可是有一个致命的缺点，它一般只支持256色索引颜色，这致使它只能经过抖动、差值等方式模拟较多丰富的颜色；它的 Alpha 通道只有1bit，这意味着一个像素只能是彻底透明或者彻底不透明。

对于咱们Tiki礼物来讲，颜色很丰富，没有办法很好的显示。

4、WebP

WebP这个格式就是为了减小图片流量而生的，起初WebP并不支持动图这一种形式，直到后来在0.2.0的版本上加上了动图，又称animated WebP。一开始咱们也并无考虑使用WebP，首先没有很好的制做animated WebP工具，实现WebP这个编码的也只有Google自家实现，若是用命令行来实现的话，对设计师太不友好了。其次Android和iOS平台的第三方库来支持播放animated WebP的很少，对于平台的支持也是一个问题（以后iOS用YYWebImage，Android用Fresco）。

以后咱们综合各方考虑，仍是使用animated WebP。由于首先平台支持上，Android和iOS都有相应的解决方案。其次效率和压缩比上，animated Webp有一个比较好的权衡。再者animated WebP支持24bit的RGB色，能有很好的色彩空间。

接下来咱们就要考虑，如何用简单的方法，将设计师的输出的媒体格式转换成animated WebP。一开始咱们用FFMpeg封装，将视频转换成animated WebP。一开始仍是蛮成功的，可是后续测试发现Fresco对于这种补帧形式的animated WebP支持不是很好，会出现丢失色块的问题。在不能改动Fresco的前提下，继续研究WebP发现，WebP有提供webpmux和gif2webp两个库，gif2webp确定是不考虑的。webpmux是将多个webp直接压缩到一个web文件中，因此不存在补帧的问题。那么问题迎刃而解了，咱们直接将webmux和cwebp包进程序中，把设计师输出的PNG序列用cwebp先转成WebP静态序列，以后再利用webmux将WebP静态序列封装成一个animated WebP文件。这样在不很影响文件大小的状况下，就完成了animated WebP的产出。

如今这个生成WebP的工具已经开源了，地址是https://github.com/TinoGuo/AnimatedWebp。你们若是有兴趣能够去fork，star下那是最好的啦，有什么不足和问题请私信我。

详细的使用方法已贴到油管了，youtu.be/_UEmh1qkc3Q

引用:

zh.wikipedia.org/wiki/APNG

blog.ibireme.com/2015/11/02/…

迁移自个人简书