FlutterでAgora Video SDKのデモを動かしてみる

Flutterで動画・音声ストリーミングできるSDKとして、Agoraが提供しているものが使えそうだったので試してみました。

Agoraのアカウント作成

サインアップと今回利用する用のproject作成を済ませておきました。

環境

自分の場合、Flutterのバージョンなどは下記の通りでした。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.4 19E287 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.50.1)
[✓] Connected device (1 available)

Flutterで使用するSDK＝パッケージ

AgoraのdownloadsからFlutter用のものを入手しようとしたら、当然ながらそれはFlutter packageでした。

agora_rtc_engine

このパッケージのGetting Startedに「このチュートリアルをチェックアウト」とあったのでこのレポジトリからzipをダウンロードしました。

チュートリアルを試してみる

デモアプリ（Agora-Flutter-Quickstart）をVS Codeで開きビルドしてみましたが、package取得の段階でエラー発生。

Running "flutter pub get" in Agora-Flutter-Quickstart-master...
Launching lib/main.dart on Android SDK built for x86 in debug mode...
lib/main.dart:1

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/xxxxx/xxxxx/Agora-Flutter-Quickstart-master/android/app/build.gradle' line: 24

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Minimum supported Gradle version is 5.4.1. Current version is 4.10.2. If using the gradle wrapper, try editing the distributionUrl in /Users/xxxxx/xxxxx/Agora-Flutter-Quickstart-master/android/gradle/wrapper/gradle-wrapper.properties to gradle-5.4.1-all.zip

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

このエラーを解決しにかかるか迷いましたが、新規プロジェクトにデモアプリのコードを持ってくる方が早い気がしたのでその方向を試しました。

新規プロジェクト作成からビルド成功まで

新規作成したFlutterプロジェクトに下記のような調整を加えました。

android/app/src/main/AndroidManifest.xml

agora_rtc_engineのページで指定されているpermissionの指定を追記しました。

<manifest>
    ...
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    
    <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.-->
    <uses-permission android:name="android.permission.BLUETOOTH" />
    ...
</manifest>

ちなみにiOS用の調整に関してはまだ試せてません。

pubspec.yaml

dependenciesに下記を追記

dependencies:
...
  agora_rtc_engine: ^3.1.3
  permission_handler: ^3.0.0

ファイルをセーブまたは $ flutter pub getでパッケージ取得。今回は前項のようなエラーは出ませんでした。

libディレクトリをコピー

ダウンロードしていたデモアプリのlibディレクトリをそのまま、新規作成したプロジェクトのlibディレクトリと差し替えました。

lib/src/utils/settings.dartを編集

APP_IDとTokenを、Agoraのconsole>projectから取得した、作成済みのprojectのものに置き換えました。

/// Define App ID and Token
const APP_ID = "xxxxx";
const Token = "xxxxx";

まとめ

以上の作業の上で動画ストリーミングのアプリのbuildが成功しました。Androidの実機とエミュレータにビルドしたアプリをインストールして、ホストとクライアントにしての動作確認も成功でした＾＾

やったことを思い出して書きましたが、抜けているものがあったら申し訳ありません。