一、背景介紹
1. VAP（Video Animation Player）是直播中臺(tái)使用的一個(gè)視頻動(dòng)畫(huà)特效SDK，可以通過(guò)制作Alpha通道分離的視頻素材，再在客戶端上通過(guò)OpenGL ES重新實(shí)現(xiàn)Alpha通道和RGB通道的混合，從而實(shí)現(xiàn)在端上播放帶透明通道的視頻。
已經(jīng)接入的app
image
同原理實(shí)現(xiàn)也用在其他app
抖音、西瓜視頻、今日頭條、愛(ài)奇藝、比心等
2. 方案對(duì)比
目前較常見(jiàn)的動(dòng)畫(huà)實(shí)現(xiàn)方案有幀動(dòng)畫(huà)、gif/webp、lottie/SVGA，對(duì)于復(fù)雜動(dòng)畫(huà)特效的實(shí)現(xiàn)做個(gè)簡(jiǎn)單對(duì)比
| 方案 | 文件大小 | 解碼方式 | 特效支持 | 應(yīng)用表現(xiàn) |
|---|---|---|---|---|
| Lottie/SVGA | 無(wú)法導(dǎo)出 | 軟解 | 部分復(fù)雜特效不支持 | 繪制耗時(shí),內(nèi)存抖動(dòng) |
| gif/webp | 4.6M | 軟解 | 只支持8位色彩 | 文件資源消耗大 |
| apng | 10.6M | 軟解 | 全支持 | 資源消耗大 |
| vap | 1.5M | 硬解碼 | 全支持 | 性能好,復(fù)雜動(dòng)畫(huà)支持好 |
3. 運(yùn)行效果
image
4. 本文主要內(nèi)容
主要介紹VAP如何實(shí)現(xiàn)，從MediaCodec視頻解碼到OpenGL ES 渲染RGB及Alpha通道，最后輸出到TextureView上。
二、VAP實(shí)現(xiàn)架構(gòu)
1. 需要的技術(shù)
- OpenGL ES: 創(chuàng)建紋理，及繪制工作
- TextureView: Android UI組件，持有SurfaceTexture，監(jiān)聽(tīng)SurfaceTexture的size變化，做顯示區(qū)域更新
- SurfaceTexture: 持有OpenGL ES創(chuàng)建的紋理，監(jiān)聽(tīng)解碼后的幀數(shù)據(jù)做幀更新，并通知OpenGL ES繪制
- MediaCodec: 解碼，把解碼后的數(shù)據(jù)綁定到SurfaceTexture
2. 實(shí)現(xiàn)流程圖
image
image
3. 整體工作流程
為了方便查看各個(gè)類的職責(zé)及順序執(zhí)行的流程，這里用泳道圖:
image
image
三、其他
完結(jié)，撒花??
