直播特效的實現原理與難點

本文源自 RTC 開發者社區，歡迎訪問 RTC 開發者社區，與更多開發者交流實時音視頻技術、互動直播開發經驗，參與更多技術活動。

在這個顏值即正義的時代，不管是經過 Web 仍是移動端發起直播，美顏與特效已是不少直播平臺的標配功能。更有甚者，已經開始嘗試將AR融入產品，增長更多能夠吸引用戶的體驗。不過要在直播中實現以上任何一個功能，都會對開發者的技術棧提出了進一步的要求。不管是在Web端基於 WebRTC 進行視頻通話或在線教育的產品，仍是 Android、iOS 上作直播。本文將簡要梳理實現特效的原理，以及其中須要注意的難點。

直播特效的實現原理

直播的具體流程，包括：採集、前處理、編碼、傳輸、解碼、後處理、播放。一般狀況下，咱們會在攝像頭採集到視頻圖像後，開始對其進行特效處理，也就是在前處理的過程當中進行。

實現直播特效的流程以下：

• 採集:視頻的採集源主要有三種：攝像頭採集、屏幕錄製和從視頻文件推流。直播中常見的是經過攝像頭採集的圖像。以Android爲例，因爲須要進行圖像的二次處理（濾鏡、特效），因此使用 SurfaceTexture來處理圖像流，給採集到的圖像增添特效、濾鏡等。SurfaceTexture 是一個紋理，能夠想象成一個 View 的中間件。Camera 把視頻採集的內容交給 SurfaceTexture，SurfaceTexture 進行美顏處理，而後把內容交給 SurfaceView，渲染出來。

• 前處理：對採集到的圖像進行處理：好比經過均值模糊、高斯模糊和中值濾波等去噪算法，給原始視頻進行「磨皮」；或者利用 GPUImage 庫，增長濾鏡；又或者是利用 ARCore、ARKit 等工具，爲視頻添加實時的 AR 特效。

• 在完成圖像的處理後，按照合適碼率、格式進行編碼。

• 最後，推流到 CDN。

要實現美顏效果，不管是基於 WebRTC 的移動端仍是Web端，均可以經過 GPUImage 來實現。若是是基於 WebRTC 與 React Native、GPUImage 相結合便可，不過須要修改 react-native-webrtc 的源碼。

開發中的難點

在直播中實現特效、濾鏡，甚至AR特效的例子，咱們能夠在網上找到不少，咱們也曾分享過基於 ARCore、ARKit 來實現。不過其中有不少須要開發者注意的難點。

1、缺少可擴展性、靈活性

若是經過 WebRTC 來進行開發，WebRTC 提供的渲染器是基於 GLSurfaceView 的 View 組件。與SurfaceView 相比，它沒有動畫或者變形特效，由於 GLSurfaceView 是窗口 (window)的一部分。 所以，若是想往其餘地方繪製，或者獲取視頻數據，就會比較麻煩。

2、須要大量修改源碼

經過 WebRTC 的 Native API 是沒法獲取攝像頭數據的，若是要作美顏，須要作大量改動，好比上述提到的修改 react-native-webrtc 源碼，也只是其中一部分工做。另外可能還須要調整 WebRTC 源碼，並非拿來即用，這就要求開發者要熟悉 WebRTC。

3、性能與功耗問題

性能與功耗問題在 Android 平臺上比較明顯。一般狀況下，對圖像進行處理時，咱們能夠選擇輸入 YUV 數據，讓 CPU 進行圖像處理，而後交給軟件/硬件編碼器進行編碼。但這樣作會產生較高的 CPU 佔用率，功耗隨之增長，App 響應速度受到影響。因此咱們須要儘可能使用 GPU 來完成圖形處理，更多地利用硬件性能。

在編碼上也存在相同問題。軟件編碼的優勢是靈活度高，可是缺點是功耗高，影響性能。硬件編碼則相對速度更快、功耗更低，是更優的選擇。但它的問題在於，能作的優化和參數調整，取決於硬件廠商開放的接口。並且硬件編碼在部分 Android 手機上的兼容性也存在問題。

4、硬件兼容性問題

WebRTC 等自研方案還須要考慮硬件的兼容性問題。iOS 設備相對簡單，可是在 Android 設備上，不一樣芯片、系統版本等因素，存在兼容問題。

Agora SDK 2.1版：實現直播特效更靈活

相對於這種自研來說，聲網Agora SDK 將採集和渲染開放，開發者能夠更靈活的處理視頻數據。以下圖綠色部分所示，處理權限開放給開發者，帶來更大的靈活性與擴展性。

Capture（採集）：聲網Agora SDK 支持自定義的視頻源類型，能夠方便利用咱們提供的輔助類構建 camera 視頻源，或者屏幕共享視頻源，或者文件視頻源等。

添加特效：Agora SDK 的新接口直接利用 Android 系統組件Surface Texture 處理，並傳遞給 GPU，最後經過Agora SDK 硬件編碼器進行視頻編碼。整條鏈路上最大限度發揮硬件性能，不通過內存拷貝，不只能夠得到更好的性能與功耗表現，避免影響 App 響應速度，也無需擔憂硬件編解碼問題。

Renderer（渲染）：聲網Agora SDK 開放了視頻渲染器的接口，用戶能夠靈活的根據現有的業務，向 Android 標準的 SurfaceView，TextureView組件上或者是自定義的 View 組件上渲染。

開放新功能帶來的差別

升級2.1版以前：

在2.1以前的版本中，開發者須要經過 pushExternalVideoSource 接口，以共享Texture id 的方式來實現特效、美顏等功能，即須要傳入texture 所在的 EGL Context，以及Texture 的id。

升級2.1以後：

經過2.1版的自定義視頻源、自定義渲染器兩個新功能，能更靈活地實現想要的效果。經過它們，開發者可使用原有的共享 texture id 的方式，也能夠利用系統組件，如 SurfaceTexture 或者 Surface 來傳遞 texture。例如，TextureSource 類封裝了 SurfaceTexture 對象，開發者能夠利用它建立出 EglSurface，美顏處理後獲得紋理數據，直接繪製到 EglSurface 上便可。

這兩個功能給了咱們在視頻、圖像渲染方面提供更開放的想象空間，能夠在直播中實現更多場景，好比咱們此前結合 ARCore、ARKit 實現的 AR 場景，再好比相似抖音跳舞機的遊戲也能放到直播中。

在 Agora SDK 2.1 中，咱們爲自定義視頻源與自定義渲染器增長了多個新接口，點擊這裏瞭解更多詳情與接口調用方法。