美顏SDK，即提供美顏特效功能的SDK開發套件，通俗來講就是直播、短影片中需要給使用者提供美顏、濾鏡、貼紙道具等能力時，自研成本大時間長，就找個第三方開發好的包，也就是美顏SDK，整合進你自己的平臺。叫做美顏SDK的這個包，通常包含了美顏，美型，濾鏡這些基礎功能，也有貼紙道具，美妝，甚至美體等功能，不同廠商提供的功能和效果也各不相同。

記錄下本次直播專案整合虹圖美顏SDK的步驟

虹圖美顏SDK提供的功能如下，但是我們只整合了幾種的美膚、美型、風格濾鏡、光影濾鏡幾個功能。

同時實現美顏預覽頁面設定引數，進入直播間直接開播的功能。

功能模組	功能描述
人像美顏	美膚（美白、磨皮、紅潤、清晰、亮度、去黑眼圈、去法令紋）
	美型（瘦臉、大眼、V臉、窄臉、瘦顴骨、瘦下頜骨、豐太陽穴、小頭、小臉、短臉、下巴、縮人中、髮際線、眼間距、開眼角、長鼻、瘦鼻、嘴型、微笑嘴唇等）
	風格濾鏡(提供不少於30款濾鏡)
	光影濾鏡功能（提供不少於15款光影濾鏡）
	特效濾鏡（畫面炫彩變幻效果，包括靈魂出竅、魔法鏡面、水面效果等效果）
	哈哈鏡（多種人臉變形哈哈鏡特效）
	美髮功能（多種髮色隨緣切換）
	美妝（包含眉毛、腮紅、眼影、眼線、睫毛、口紅、美瞳等美妝特效）
妝容推薦（多種不同風格的妝容搭配一鍵切換）	各類效果結合美妝的組合妝容效果
美體（包含長腿、瘦身兩種特效）	基於全身肢體關鍵點，實現長腿、瘦身效果
道具特效	貼紙+水印
	3D 特效
	手勢識別
	人像摳圖：綠幕摳圖 + AI摳圖

首先是跑通虹圖的示例工程

1.建立應用

登入到使用者中心控制檯，進入左側專案管理>人像人體SDK，單擊建立，在彈出的對話方塊中輸入您的應用名稱和包名，並單擊提交。

2.下載 HTEffectDemo 原始碼

在剛剛建立出的應用中，單擊配置進入專案配置頁面，單擊右側檔案中心裡的下載即可進入下載頁面。

3. 配置 HTEffectDemo 工程檔案

Android

下載完成後，進入 HTEffectDemo 工程，開啟 app 模組的 AndroidManifest 檔案，將 android:label 的值替換為您剛剛建立的應用名稱。

開啟 app 模組中的 build.gradle 檔案，將 applicationId 的值替換為您剛剛建立的包名。

全域性搜尋 initHTEffect 方法，將引數 YOUR_APP_ID 修改為建立應用時生成的APP ID。

iOS

下載完成後，開啟 HTEffectDemo 工程，將 Display Name 和 Bundle Identifier 分別替換為您剛剛建立的應用名稱和包名並回車確認。

全域性搜尋 initHTEffect 方法，將引數 YOUR_APP_ID 修改為建立應用時生成的APP ID。

4. 編譯執行

Android

使用 AndroidStudio （4.1及以上的版本）編譯執行 HTEffectDemo 工程即可。

iOS

使用 Xcode（11.0及以上的版本）開啟原始碼目錄下的 HTEffectDemo.xcworkspace 工程，編譯並執行 HTEffectDemo 工程即可。

跑通後就可以開始接入自己的工程了

iOS接入

1. 匯入工程

將下載好的 HTEffect.framework 庫檔案和 HTEffect.bundle 資源包放到您的專案資料夾下。

在 Xcode > General 中新增動態庫，確保 Embed 屬性設定為 Embed & Sign。

在 Xcode > Build Settings 中搜尋 bitcode ，將 Enable Bitcode 設定為 No。

在 Xcode > Info 中新增 App Transport Security Settings > Allow Arbitrary Loads 並設定為 YES。

2. 使用 HTUI （可選）

HTUI 是開源的，可根據專案需求選用。使用 HTUI 方法如下: 將 HTUI 資料夾新增到您的專案資料夾中，匯入 HTUIManager.h 並設定 HTUIManagerDelegate。

[[HTUIManager shareManager] loadToWindowDelegate:self];

3. 整合開發

3.1 初始化

HTEffect 的初始化函式呼叫一次即可生效。但由於 app 在第一次安裝的時候需要獲取網路許可權，此時呼叫初始化是無法成功的，所以推薦您在 AppDelegate 中呼叫 initHTEffect 並設定 HTEffectDelegate 回撥，待進入影片頁面時判斷初始化狀態，若失敗可再執行初始化方法，避免出現第一次安裝時初始化失敗。

// 線上鑑權初始化方法

[[HTEffect shareInstance] initHTEffect:@"YOUR_APP_ID" withDelegate:self];

// 離線鑑權初始化方法

[[HTEffect shareInstance] initHTEffect:@"YOUR_APP_ID"];

提示

注：專案執行後在控制檯搜尋 InitInfo，可檢視具體的版本資訊和初始化狀態。

3.2 新增 HTUI （可選）

如果需要使用 HTUI，您可以在 viewDidLoad 中新增以下方法：

[[HTUIManager shareManager] loadToWindowDelegate:self];

[self.view addSubview:[HTUIManager shareManager].defaultButton];

3.3 渲染步驟

定義一個 BOOL 變數 isRenderInit ，用來標誌渲染器的初始化狀態。根據獲取到的影片格式，採用對應的方法進行渲染：

Texture 紋理

首先呼叫 initTextureRenderer 初始化紋理渲染器，再呼叫渲染方法 processTexture。

/**

* 初始化紋理渲染器

*

* @param width 影像寬度

* @param height 影像高度

* @param rotation 影像是否需要旋轉，不需旋轉為CLOCKWISE_0

* @param isMirror 影像是否存在映象

* @param maxFaces 人臉檢測數目上限設定，推薦取值範圍為1~5

*

* @return 返回初始化結果，成功返回true，失敗返回false

*/

- (BOOL)initTextureRenderer:(int)width height:(int)height rotation:(HTRotationEnum)rotation isMirror:(BOOL)isMirror maxFaces:(int)maxFaces;

* 處理紋理資料輸入

*

* @param textureId 紋理ID

*/

- (GLuint)processTexture:(GLuint)textureId;

* 使用示例

*/

if (!_isRenderInit) {

[[HTEffect shareInstance] releaseTextureRenderer];

_isRenderInit = [[HTEffect shareInstance] initTextureRenderer:width height:height rotation:rotation isMirror:isMirror maxFaces:maxFaces];

}

[[HTEffect shareInstance] processTexture:textureId];

CVPixelBufferRef 影片幀

首先呼叫 initBufferRenderer 初始化buffer渲染器，再呼叫渲染方法 processBuffer。

/**

* 初始化buffer渲染器

*

* @param format 影像格式

* @param width 影像寬度

* @param height 影像高度

* @param rotation 影像是否需要旋轉，不需旋轉為CLOCKWISE_0

* @param isMirror 影像是否存在映象

* @param maxFaces 人臉檢測數目上限設定，推薦取值範圍為1~5

*

* @return 返回初始化結果，成功返回true，失敗返回false

*/

- (BOOL)initBufferRenderer:(HTFormatEnum)format width:(int)width height:(int)height rotation:(HTRotationEnum)rotation isMirror:(BOOL)isMirror maxFaces:(int)maxFaces;

* 處理buffer資料輸入

*

* @param buffer 影片幀資料

*/

- (void)processBuffer:(unsigned char *)buffer;

* 使用示例

*/

CVPixelBufferLockBaseAddress(pixelBuffer, 0);

unsigned char *buffer = (unsigned char *) CVPixelBufferGetBaseAddressOfPlane(pixelBuffer, 0);

if (!_isRenderInit) {

[[HTEffect shareInstance] releaseBufferRenderer];

_isRenderInit = [[HTEffect shareInstance] initBufferRenderer:format width:width height:height rotation:rotation isMirror:isMirror maxFaces:maxFaces];

}

[[HTEffect shareInstance] processBuffer:buffer];

CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);

3.4 銷燬

結束渲染時，需根據影片格式，呼叫對應的釋放方法，通常寫在 dealloc 方法裡:

/**

* 銷燬紋理渲染資源

*/

[[HTEffect shareInstance] releaseTextureRenderer];

/**

* 銷燬buffer渲染資源

*/

[[HTEffect shareInstance] releaseBufferRenderer];

#3.5 資原始檔

HTEffect 所有資源均支援放在使用者自己的伺服器，可使用以下方法進行設定：

/**

* 設定素材網路路徑

* 將素材儲存在自定義的網路儲存中的情況下，設定網路路徑

*

* @param url 素材網路路徑

*/

[[HTEffect shareInstance] setResourceUrl:url];

#3.6 人臉檢測功能

HTEffect 支援人臉檢測功能，可透過以下方法返回人臉數量：

int faceNumber = [[HTEffect shareInstance] isTracking];

安卓接入

1. 匯入工程

將 HTEffect.aar 檔案複製到 app 模組中的 libs 資料夾下，並在 app 模組的 build.gradle 檔案的 dependencies 中，增加如下依賴:

dependencies {

implementation files('libs/HTEffect.aar')

}

將 jniLibs 資料夾中，各個 ABI 對應的 libHTEffect.so 檔案，複製到對應目錄中。

將 assets 資原始檔複製到專案的對應目錄中。

2. 使用 HTUI （可選）

HTUI 是開源的，可根據專案需求選用。使用 HTUI 方法如下:

依賴我們的 htui 工程，使用我們提供的開源 UI 庫，將 htui 資料夾複製到工程根目錄下，在工程根目錄的 settings.gradle 檔案中，增加如下程式碼：

include(":htui")

在 app 模組中的 build.gradle 檔案的 dependencies 中，增加如下程式碼：

implementation project(':htui')

3. 整合開發

3.1 初始化

HTEffect 初始化函式程式中呼叫一次即可生效，建議您在 Application 建立的時候呼叫;如果渲染功能使用不頻繁，也可以在使用的時候呼叫，介面如下:

// 線上鑑權初始化方法

HTEffect.shareInstance().initHTEffect(context, "YOUR_APP_ID", new InitCallback() {

@Override public void onInitSuccess() {}

@Override public void onInitFailure() {}

});

// 離線鑑權初始化方法

HTEffect.shareInstance().initHTEffect(context,"YOUR_APP_ID");

提示

注：專案執行後在控制檯搜尋 InitInfo，可檢視具體的版本資訊和初始化狀態。

3.2 新增 HTUI （可選）

設定使用 htui 的 Activity 繼承或間接繼承 FragmentActivity，例如：

public class CameraActivity extends FragmentActivity {

//...

}

如果需要使用 htui，請呼叫 addcontentView 實現UI的新增，程式碼如下：

addContentView(

new HTPanelLayout(this).init(getSupportFragmentManager()),

new FrameLayout.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.MATCH_PARENT));

3.3 渲染步驟

定義布林變數 isRenderInit ，用來標誌渲染方法是否初始化完成，然後根據得到的影片幀格式的不同，使用對應的方法進行渲染：

GL_TEXTURE_EXTERNAL_OES 紋理格式，首先呼叫渲染初始化方法 initTextureOESRenderer，當返回 true 時初始化完成；然後呼叫渲染方法 processTextureOES，返回值為 GL_TEXTURE_EXTERNAL_OES 型別的紋理：

/**

* 紋理渲染初始化

*

* @param width 紋理寬度

* @param height 紋理高度

* @param rotation 紋理是否需要旋轉，不需旋轉為CLOCKWISE_0

* @param isMirror 紋理是否存在映象

* @param maxFaces 人臉檢測數目上限設定，推薦取值範圍為1~5

*/

public boolean initTextureOESRenderer(int width, int height, HTRotationEnum rotation, boolean isMirror, int maxFaces) ;

/**

* 渲染

*

* @param textureOES 紋理id

*/

public int processTextureOES(int textureOES);

/**

* 使用方法

*/

if (!isRenderInit) {

isRenderInit = HTEffect.shareInstance().initTextureOESRenderer(width, height, rotation, isMirror, maxFaces);

}

int textureId = HTEffect.shareInstance().processTextureOES(textureOES);

GL_TEXTURE_2D 紋理格式，首先呼叫渲染初始化方法 initTextureRenderer，當返回 true 時初始化完成；然後呼叫渲染方法 processTexture，返回值為 GL_TEXTURE_2D 型別的紋理：

/**

* 紋理渲染初始化

*

* @param width 紋理寬度

* @param height 紋理高度

* @param rotation 紋理是否需要旋轉，不需旋轉為CLOCKWISE_0

* @param isMirror 紋理是否存在映象

* @param maxFaces 人臉檢測數目上限設定，推薦取值範圍為1~5

*/

public boolean initTextureRenderer(int width, int height, HTRotationEnum rotation, boolean isMirror, int maxFaces) ;

/**

* 渲染

*

* @param texture2D 紋理id

*/

public int processTexture(int texture2D);

/**

* 使用方法

*/

if (!isRenderInit) {

isRenderInit = HTEffect.shareInstance().initTextureRenderer(width, height, rotation, isMirror, maxFaces);

}

int textureId = HTEffect.shareInstance().processTexture(texture2D);

byte[] 影片幀，首先呼叫渲染初始化方法 initBufferRenderer ，當返回 true 時初始化完成；然後呼叫渲染方法 processBuffer ：

/**

* 初始化buffer渲染器

*

* @param format 影像格式

* @param width 影像寬度

* @param height 影像高度

* @param rotation 影像是否需要旋轉，不需旋轉為CLOCKWISE_0

* @param isMirror 影像是否存在映象

* @param maxFaces 人臉檢測數目上限設定，推薦取值範圍為1~5

*

* @return 返回初始化結果，成功返回true，失敗返回false

*/

public boolean initBufferRenderer(HTFormatEnum format, int width, int height, HTRotationEnum rotation, boolean isMirror, int maxFaces);

/**

* 處理buffer資料輸入

*

* @param buffer 影片幀資料

*/

public void processBuffer(byte[] buffer);

/**

* 使用方法

*/

if (!isRenderInit) {

isRenderInit = HTEffect.shareInstance().initBufferRenderer(format,width, height, rotation, isMirror, maxFaces);

}

HTEffect.shareInstance().processBuffer(buffer);

3.4 銷燬

結束渲染時，為防止記憶體洩漏的發生，需根據影片幀格式的不同，呼叫對應的 destroy 方法釋放掉資源，呼叫位置通常在影片幀回撥介面的銷燬處，或者是 Activity ， Fragment 的生命週期結束處，同時將定義的布林變數 isRenderInit 置為 false:

/**

* 使用其中一個

*/

HTEffect.shareInstance().releaseTextureOESRenderer();

HTEffect.shareInstance().releaseTextureRenderer();

HTEffect.shareInstance().releaseBufferRenderer();

/*

* 將 bool 置為 false

*/

isRenderInit = false;

3.5 資原始檔

HTEffect 所有資源均支援放在使用者自己的伺服器,使用以下方法進行設定：

HTEffect.shareInstance().setResourceUrl(String url);

3.6 人臉檢測功能

HTEffect支援人臉檢測功能，可透過以下方法返回人臉數量

int faceNumber = HTEffect.shareInstance().isTracking();

總結

總而言之，使用虹圖美顏SDK還是比較簡單方便的，因為已經封裝好很多外層的邏輯了，只需要把button移到我們自己專案要的地方就可以了。也可以實現美顏的預設定頁面，預覽並設定好引數，儲存好後進入房間直接就是儲存過的美顏引數。

美顏SDK是什麼？虹圖美顏SDK對接開發指南

相關文章