如何快速實現直播美顏功能 - 接入美顏SDK詳解

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第3天，點選檢視活動詳情

1 音視訊SDK和直播美顏SDK-使用導讀

1.1 AI視覺應用-美顏SDK

實時音視訊是 ZEGO 的一款實時音視訊互動服務產品，開發者可通過其靈活易用的 API，構建音視訊應用。同時，ZEGO 的另一款產品——AI視覺，基於領先的 AI 演算法，提供美顏、美體、美妝、貼紙等功能。將二者進行搭配使用，能夠輕鬆實現音視訊互動和美顏的結合，基於美顏SDK可以打造實時美顏應用-直播美顏。

音視訊與美顏兩者搭配使用，可廣泛應用於娛樂直播、遊戲直播、視訊會議等直播美顏場景中。

1.2 實時音視訊SDK,直播美顏SDK 概念解釋

• ZegoExpress SDK：ZEGO 實時音視訊 SDK，提供基礎的實時音視訊功能，包括直播推拉流、直播連麥等，以下使用 Express SDK 簡寫表示。
• ZegoEffects SDK：ZEGO AI視覺 美顏SDK，提供多項智慧影象渲染和演算法能力，包括智慧美顏、AR 特效、影象分割等，以下使用 Effects SDK 簡寫表示。

2 直播美顏SDK示例原始碼

為方便開發者實現音視訊和美顏SDK二者的搭配使用，ZEGO 提供了示例程式碼，請聯絡 ZEGO 商務人員獲取，獲取連結：(http://www.zego.im/cluesCollect)；

近期有開發規劃的開發者可上即構官網檢視，恰逢即構七週年全線音視訊產品1折的優惠，也可以聯絡商務獲取RTC產品優惠。

3 整合直播美顏SDK前提條件

• 已在專案中整合 Effects SDK，詳情請參考“AI視覺”的 快速開始 - 整合。
• 已獲取到 Effects SDK 唯一的鑑權檔案，詳情請參考“AI視覺”的 快速開始 - 線上鑑權。
• 已在專案中整合 ZEGO Express SDK，實現基本的實時音視訊功能，詳情請參考 快速開始 - 整合 和 快速開始 - 實現視訊通話。
• 已在 ZEGO 控制檯 建立專案，並申請有效的 AppID 和 AppSign，詳情請參考 控制檯 - 專案管理 中的“專案資訊”。

4 直播美顏SDK使用步驟

ZEGO Effects SDK 和 Express SDK 搭配使用，對直播視訊資料進行實時 AI 視覺處理的原理，如下圖：

通過以上流程，具體的直播美顏功能實現步驟，如下圖：

1. 初始化 ZEGO Effects SDK 和 Express SDK，初始化在時序上沒有限制。
2. 獲取視訊原始資料，可通過 Express SDK 的 自定義視訊採集 或 自定義視訊前處理 兩種方式獲取。
3. 將採集到的視訊原始資料，傳遞給 ZEGO Effects SDK，進行 AI 視覺美顏處理。
4. 將處理完的資料傳遞給 Express SDK，進行推流。如果在推拉流過程中需要調整 AI 視覺美顏效果，可使用 Effects SDK 的相關功能進行實時更改。
5. 遠端使用者通過 Express SDK 拉取處理後的資料進行播放。

4.1 初始化 音視訊SDK 和 直播美顏SDK - Effects/Express SDK

對於兩個 SDK 的初始化，不做時序上的限制，以下步驟中以“先初始化 Effects SDK，再初始化 Express SDK”為例。

4.1.1 初始化直播美顏SDK Effects SDK

1. 匯入 Effects 直播美顏SDK的模型和資源。

   在使用 Effects SDK 的 AI 美顏相關功能時，必須先匯入 AI 美顏 模型和資源。

   ```java // 傳入人臉識別模型的絕對路徑。人臉檢測、大眼、瘦臉功能均須匯入 ArrayList aiResources = new ArrayList<>(); aiResources.add("sdcard/xxx/xxxxx/FaceDetectionModel.model"); aiResources.add("sdcard/xxx/xxxxx/SegmentationModel.model");

   // 傳入資源的絕對路徑 aiResources.add("sdcard/xxx/xxxxx/CommonResources.bundle"); aiResources.add("sdcard/xxx/xxxxx/PendantResources.bundle"); aiResources.add("sdcard/xxx/xxxxx/FaceWhiteningResources.bundle"); ...

   // 傳入資源或模型的路徑列表，必須在 create 之前呼叫 ZegoEffects.setResources(aiResources); ```

直播美顏SDK Effects SDK 支援的所有資源和模型請參考“AI視覺”的 快速開始 - 匯入資源和模型。

1. 建立 直播美顏 Effects 物件。傳入在 3 前提條件 中獲取到的鑑權檔案，建立 直播美顏 Effects 物件。

   java // 鑑權內容請以實際獲取的檔案為準 ZegoEffects effects = ZegoEffects.create("ABCDEFG", getApplication());

2. 初始化 直播美顏 Effects 物件。

   呼叫 initEnv 介面初始化 Effects 物件，需要傳入待處理視訊影象資料的寬高。

   以處理 1280 × 720 的視訊影象為例：

   java // 初始化 Effects 物件，傳入當前待處理的原始影象寬高，需要在自定義視訊前處理回撥的onStar裡初始化，express 為後面創造的Express引擎物件 express.setCustomVideoProcessHandler(new IZegoCustomVideoProcessHandler() { public void onStart(ZegoPublishChannel channel) { effects.initEnv(720, 1280); //SDK1.4.7後可以不呼叫此介面，若要呼叫，請先開啟預覽再開啟攝像頭 } }

4.1.2 初始化 直播美顏SDK Express SDK

呼叫 createEngine 介面，初始化 直播美顏SDK Express SDK。

```java /* 定義 SDK 引擎物件 / ZegoExpressEngine express;

ZegoEngineProfile profile = new ZegoEngineProfile(); / 請通過官網註冊獲取，格式為 123456789L */ profile.appID = appID; /請通過官網註冊獲取，格式為："0123456789012345678901234567890123456789012345678901234567890123"（共64個字元）/ profile.appSign = appSign; / 通用場景接入 / profile.scenario = ZegoScenario.GENERAL; / 設定app的application 物件 / profile.application = getApplication(); /* 建立引擎 / express = ZegoExpressEngine.createEngine(profile, null); ```

4.2 獲取音視訊原始資料

Express SDK 可通過“自定義視訊採集”和“自定義視訊前處理”兩種方式獲取視訊原始資料。

“自定義視訊前處理”是由 Express SDK 內部採集視訊資料，原始視訊資料通過回撥獲取；“自定義視訊採集”則是由開發者自行採集視訊資料，並提供給 Express SDK。

兩種獲取方式的區別如下，開發者可根據實際情況按需選擇。

獲取資料方式	視訊資料採集方式	優勢
自定義視訊前處理	SDK 內部採集。	極簡搭配使用 Express SDK 和 Effects SDK，開發者無需管理裝置輸入源，僅需對 Express SDK 丟擲來的原始資料進行操作，然後傳回 Express SDK 即可。
自定義視訊採集	開發者自行採集。	在進行多廠家對接時，業務實現更加靈活，同時效能優化的空間更大。

• 方式一：音視訊進階-自定義視訊前處理

  以獲取 GL_TEXTURE_2D 型別的原始視訊資料為例。

  開發者通過呼叫 enableCustomVideoProcessing 介面，開啟自定義視訊前處理；開啟後，Express SDK 內部會採集視訊資料；採集完成後，可以通過 onCapturedUnprocessedTextureData 回撥介面，獲取採集到的視訊原始資料。

  ```java ZegoCustomVideoProcessConfig config = new ZegoCustomVideoProcessConfig(); // 選擇 GL_TEXTURE_2D 型別視訊幀資料 config.bufferType = ZegoVideoBufferType.GL_TEXTURE_2D;

  // 開啟自定義前處理 express.enableCustomVideoProcessing(true, config, ZegoPublishChannel.MAIN); ```

  具體的原理可參考“實時音視訊”的 視訊進階 - 自定義視訊前處理。

• 方式二：自定義視訊採集

  自定義視訊採集，主要依賴開發者自行採集視訊資料，具體方式請參考“實時音視訊”的 視訊進階 - 自定義視訊採集。

4.3 進行 AI 視覺美顏處理

獲取到視訊原始資料後，把資料傳遞給 Effects SDK，開始對視訊進行 AI 視覺（例如：美顏、美妝、背景分割等）處理。

• 方式一：音視訊進階-自定義視訊前處理

  在 onCapturedUnprocessedTextureData 回撥中，獲取到視訊原始資料後，呼叫 Effects SDK 的相關介面，進行 AI 視覺處理，並將處理後的資料，返回給 Express SDK。

  ```java // 自定義前處理為示例 // 回撥方法獲取原始資料 // 回撥處理 // Effect初始化反初始化在Express視訊前處理開始停止回撥裡 express.setCustomVideoProcessHandler(new IZegoCustomVideoProcessHandler() { @Override public void onStart(ZegoPublishChannel channel) { effects.initEnv(720, 1280); }

  @Override
  public void onStop(ZegoPublishChannel channel) {
      effects.uninitEnv();     //一定要反初始化，否則會造成記憶體洩露
  }
  
  // Receive texture from ZegoExpressEngine
  @Override
  public void onCapturedUnprocessedTextureData(int textureID, int width, int height, long referenceTimeMillisecond, ZegoPublishChannel channel) {
  
      ZegoEffectsVideoFrameParam param = new ZegoEffectsVideoFrameParam();
      param.format = ZegoEffectsVideoFrameFormat.RGBA32;
      param.width = width;
      param.height = height;
  
      // Process buffer by ZegoEffects
      int processedTextureID = effects.processTexture(textureID, param);
  
      // Send processed texture to ZegoExpressEngine
      express.sendCustomVideoProcessedTextureData(processedTextureID, width, height, referenceTimeMillisecond);
  }
  

  } ```

• 方式二：音視訊進階-自定義視訊採集

  在開發者自定義的回撥介面中（可參考 視訊進階 - 自定義視訊採集 中的 “4.3 向 SDK 傳送視訊幀資料”），呼叫 Effects SDK 的相關介面，進行 AI 視覺處理，並將處理後的資料，返回給 Express SDK。

使用直播美顏SDK Effects SDK 實時調整 AI美顏 效果

在推拉流過程中，如果需要調整 AI 視覺的效果，可使用 Effects SDK 進行實時調整。

以“美白”功能為例，開發者可以呼叫 enableWhiten 介面開啟美白功能，並呼叫 setWhitenParam 介面設定美白的程度。

```java // 開啟美白功能 effects.enableWhiten(true);

// 設定美白強度，範圍 [0, 100]，預設為 50 ZegoEffectsWhitenParam param = new ZegoEffectsWhitenParam(); param.intensity = 100; effects.setWhitenParam(param); ```

4.4 推流處理後的資料

經由 直播美顏SDK Effects SDK 處理完成後，將處理後的資料，返回給音視訊SDK Express SDK。

音視訊SDK Express SDK 呼叫 startPublishingStream 介面，傳入處理後的資料流 streamID，開始推流，傳送給雲伺服器。

java /** 開始推流 */ express.startPublishingStream("streamID");

4.5 拉取處理後的直播音視訊資料播放

音視訊SDK Express SDK 開始推流後，遠端使用者可以呼叫 startPlayingStream介面，傳入處理後的資料流 streamID，拉取視訊資料，進行播放。

java /** * 開始拉流，設定遠端拉流渲染檢視，檢視模式採用 SDK 預設的模式，等比縮放填充整個 View * 如下 play_view 為 UI 介面上的 SurfaceView/TextureView/SurfaceTexture 物件 */ express.startPlayingStream("streamID", new ZegoCanvas(play_view));

至此，開發者就可以完整地實現在推拉流音視訊的同時，實時調整 AI 視覺美顏效果。

5 獲取更多直播美顏SDK幫助

獲取本文直播美顏SDK的開發文件、技術支援，可訪問即構文件中心，有任何技術問題可聯絡我們專業技術支援。