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

語言: CN / TW / HK

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

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

1.1 AI視覺應用-美顏SDK

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

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

AI_.gif

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前提條件

4 直播美顏SDK使用步驟

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

下載.png

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

下載2.png

  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的開發文件、技術支援,可訪問即構文件中心,有任何技術問題可聯絡我們專業技術支援。