Androidライブ配信アプリにビューティエフェクトを追加する方法

以前、ライブ配信アプリの構築方法やビューティ機能の実装方法についてご紹介しました。本チュートリアルでは、Androidライブ配信アプリにビューティエフェクトを追加する方法を解説します。まずはライブ配信アプリを構築し、続いて [Tencent Effects Beauty](https://trtc.io/document/60216?platform=android&product=beautyar) SDK を組み込みます。Tencent RTC SDK には包括的な UI が標準搭載されており、短時間で高画質かつリアルタイムな配信環境を手軽に構築できます。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957687/3edb013a-9b20-43c5-ae98-be9f28848263.png)


## **Step 1. サービスの有効化**

Tencent Cloud のオーディオ＆ビデオサービスを使用する前に、コンソールにアクセスしてアプリケーションのサービスを有効化する必要があります。詳しい手順については、[**Activate the service**](https://trtc.io/document/60033#) をご確認ください。

## **Step 2: TUILiveKit コンポーネントのダウンロード**

[Github](https://github.com/tencentyun/TUILiveRoom) からリポジトリをクローン／ダウンロードし、Android ディレクトリ内にある TUILiveKit サブディレクトリを、現在のプロジェクトにおける app と同じ階層へコピーします。下記の図のようになります。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957687/79550cb6-69b8-4216-80fb-f62c78d6c2d7.png)


## **Step 3: プロジェクトの設定**

プロジェクトのルートディレクトリにある `settings.gradle.kts (または settings.gradle)` ファイルに、下記のように jitpack リポジトリの URL を追加してください。これはギフト再生のための SVG アニメーションライブラリ（SVGAPlayer）をダウンロードするために必要です。

```kotlin
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()

        // Add the jitpack repository URL
        maven { url = uri("https://jitpack.io") }
    }
}
```

続いて同じくプロジェクトのルートディレクトリにある `settings.gradle.kts (または settings.gradle)` ファイルに、以下のコードを追加し、[Step 2](https://trtc.io/document/60037#step2) でダウンロードした tuilivekit コンポーネントを現在のプロジェクトへインポートします。

```kotlin
include(":tuilivekit:livekit")
include(":tuilivekit:component:barrage")
```

次に、app ディレクトリ内の `build.gradle.kts (または build.gradle)` ファイルを見つけて、以下のコードを追加します。これは、追加されたばかりの tuilivekit コンポーネントへの依存関係をアプリに宣言するための設定です。

```kotlin
api(project(":tuilivekit:livekit"))
```

SDK の内部で Java のリフレクション機能が使用されているため、SDK に含まれる一部のクラスは難読化（obfuscation）の除外リストに登録しておく必要があります。以下のコードを `proguard-rules.pro` ファイルに追加してください。

```kotlin
-keep class com.tencent.** { *; }
-keep class com.trtc.uikit.livekit.livestreamcore.** { *; }
-keep class com.trtc.uikit.livekit.component.gift.store.model.** { *; }
-keep class com.squareup.wire.** { *; }
-keep class com.opensource.svgaplayer.proto.** { *; }

-keep class com.tcmediax.** { *; }
-keep class com.tencent.** { *; }
-keep class com.tencent.xmagic.** { *; }
-keep class androidx.exifinterface.** {*;}
-keep class com.google.gson.** { *;}
# Tencent Effect SDK - beauty
-keep class com.tencent.xmagic.** { *;}
-keep class org.light.** { *;}
-keep class org.libpag.** { *;}
-keep class org.extra.** { *;}
-keep class com.gyailib.**{ *;}
-keep class com.tencent.cloud.iai.lib.** { *;}
-keep class com.tencent.beacon.** { *;}
-keep class com.tencent.qimei.** { *;}
-keep class androidx.exifinterface.** { *;}
```

最後に、app ディレクトリ内の `AndroidManifest.xml` ファイルを開き、application ノードに tools:replace="android:allowBackup" および android:allowBackup="false" を追加して、コンポーネントの設定を自身の設定で上書きします。

```xml
  // app/src/main/AndroidManifest.xml
  
  <application
    ...
  
    // Add the following configuration to override the settings in the dependent SDK
    android:allowBackup="false"
    tools:replace="android:allowBackup">
```

## **Step 4. ログイン処理**

以下のコードをプロジェクトに追加し、TUICore の関連インターフェイスを呼び出して TUI コンポーネントのログイン処理を行います。ログインに成功して初めて TUILiveKit が提供する機能を利用できます。

```kotlin
TUILogin.login(applicationContext,
    1400000001,     // Please replace with the SDKAppID obtained in step one
    "denny",        // Please replace with your UserID
    "xxxxxxxxxxx",  // You can calculate a UserSig in the console and fill it in here
    object : TUICallback() {
        override fun onSuccess() {
            Log.i(TAG, "login success")
        }

        override fun onError(errorCode: Int, errorMessage: String) {
            Log.e(TAG, "login failed, errorCode: $errorCode msg:$errorMessage")
        }
    })
```

[Step One](https://trtc.io/document/60037#step-1.-activate-the-service) の Step 3 で取得した SecretKey を使用して、SDKAppID や UserID などの情報を暗号化し、UserSig を生成してください。UserSig は、現在のユーザが TRTC サービスを利用できるか確認するために使われるトークンです。[Auxiliary Tools](https://trtc.io/login?s_url=https://console.trtc.io/usersig) から一時的に使用できる UserSig を取得できます。詳細は [UserSig](https://trtc.io/document/35166?lang=en&pg=) をご参照ください。

## Step5. tebeautykit の組み込み

高機能なビューティエフェクトを利用するために Tencent Effects Beauty を活用します。

プロジェクトに、`Android/tebeautykit` フォルダをコピーし、app フォルダと同じ階層に配置してください。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957687/037ed362-6a70-40f1-870f-be94c145603b.png)


プロジェクトの `settings.gradle` ファイルを開き、下記のコードを追加します:

```kotlin
  include ':tebeautykit'
```

## **Step 6: ライセンス認証 & ビューティリソースの設定**

ライセンスを申請して `LicenseUrl` と `LicenseKey` を取得してください。詳細は [License ガイド](https://trtc.io/document/60219?platform=flutter&product=beautyar) をご参照ください。

通常、[login](https://trtc.io/document/60037#step4) プロセスと同じ箇所など、ビジネスロジックの初期化部分で、以下のコードを追加し、取得した `Beauty Package ID`、`LicenseUrl`、`LicenseKey` を置き換えて入力してください。

```kotlin
TEBeautySettings.getInstance().initBeautySettings(context, 
                                       S1_07,         // Replace S1_07 with the beauty package number you purchased.
                                       "LicenseUrl",  // Replace with your LicenseUrl
                                       "LicenseKey"); // Replace with youLicenseKey
```

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957687/fcb82805-6524-4f84-bf70-2a76ddad127d.png)


ここまでの手順を完了すると、高度なビューティエフェクトが利用可能になります。

## Step 7. ライブ配信の開始

上記ログインメソッドの呼び出しが成功後、[VideoLiveKit](https://trtc.io/document/66146#) の [startLive](https://trtc.io/document/66146#c6f79ba4-2dc1-4d65-82b3-e52d3ef28f2f) メソッドを呼び出し、ルーム ID を指定すると、ライブ配信ページを開始できます。

```kotlin
import com.trtc.uikit.livekit.VideoLiveKit
VideoLiveKit.createInstance(applicationContext).startLive("roomId")
```

## **Step 8. ライブ配信の視聴**

同様にログインメソッドの呼び出しが成功後、[VideoLiveKit](https://trtc.io/document/66146#) の [joinLive](https://trtc.io/document/66146#34d62c35-ff96-4250-be5a-a518ed341a5d) メソッドを呼び出し、ルーム ID を指定すると、視聴用のライブ配信ページへ参加できます。

```kotlin
import com.trtc.uikit.livekit.VideoLiveKit
VideoLiveKit.createInstance(applicationContext).joinLive("roomId")
```

私の名前は Susie です。ライター兼メディアサービス・プロダクトマネージャーとして働いており、世界中のスタートアップ企業と協力して SDK と API を使ったリアルタイムコミュニケーションソリューションを構築しています。

アプリにフェイスフィルターやその他の特殊効果を組み込みたい場合は、[**こちら**](https://sc-rp.tencentcloud.com:8106/t/RA) からお気軽にご連絡ください。