視頻直播之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/…

遷移自個人簡書