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

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

Step 1. サービスの有効化

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

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

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

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

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

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 でダウンロードした tuilivekit コンポーネントを現在のプロジェクトへインポートします。

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

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

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

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

-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" を追加して、コンポーネントの設定を自身の設定で上書きします。

  // 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 が提供する機能を利用できます。

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 の Step 3 で取得した SecretKey を使用して、SDKAppID や UserID などの情報を暗号化し、UserSig を生成してください。UserSig は、現在のユーザが TRTC サービスを利用できるか確認するために使われるトークンです。Auxiliary Tools から一時的に使用できる UserSig を取得できます。詳細は UserSig をご参照ください。

Step5. tebeautykit の組み込み

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

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

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

  include ':tebeautykit'

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

ライセンスを申請して LicenseUrl と LicenseKey を取得してください。詳細は License ガイド をご参照ください。

通常、login プロセスと同じ箇所など、ビジネスロジックの初期化部分で、以下のコードを追加し、取得した Beauty Package ID、LicenseUrl、LicenseKey を置き換えて入力してください。

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

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

Step 7. ライブ配信の開始

上記ログインメソッドの呼び出しが成功後、VideoLiveKit の startLive メソッドを呼び出し、ルーム ID を指定すると、ライブ配信ページを開始できます。

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

Step 8. ライブ配信の視聴

同様にログインメソッドの呼び出しが成功後、VideoLiveKit の joinLive メソッドを呼び出し、ルーム ID を指定すると、視聴用のライブ配信ページへ参加できます。

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

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

アプリにフェイスフィルターやその他の特殊効果を組み込みたい場合は、こちら からお気軽にご連絡ください。