Flutter で動画配信アプリ作る

Flutter, Programming

※2022/3/23 書きかけです。気が向いたら、更新します。

Flutter で動画配信アプリ作る

Tadas Petra さんという、FlutterやLive Streaming アプリを開発されている方が、FlutterでAgoraを使用してLive Streaming アプリ開発の解説をされていたので、実際にやってみました。

Clubhouseとか、Agoraを使っています。
https://www.clubhouse.com/

一応、作成したものは公開しています。

GitHub
https://github.com/ekusiadadus/flutter_streamer

今回は、個人的に躓いた箇所だけ備忘録としておいておきます。
実際に作りたい方は、YouTube見てください。

Agora準備

https://www.agora.io/en/

Agoraからプロジェクトを作成します。

この時、Tokenを使用するようにすると、YouTube動画通りにはいかないです。
Testing mode でやるとよいです。

ちなみに、Token 発行してもできます。

後で、詳しく書きますが、YouTubeではTokenとか直書きだったので、Flutteの勉強がてら環境変数に書き出しました。
.envファイルを作成して、

AGORA_ID=
AGORA_TOKEN=

みたいな感じで管理します。
Tokenを発行した場合は、participant.dart 等で、初期化する際、Tokenを引数に与えるとTokenありで作成できます。

環境変数

環境変数を取得する際ですが、utils/const.dart で、YouTubeでは直書きしていたのですが、git管理できなくなるので環境変数に書き出しました。

class EnvironmentConfig {
  static const agoraId = String.fromEnvironment(
    'AGORA_ID',
    defaultValue: 'AGORA_ID',
  );
  static const agoraChannelName = String.fromEnvironment(
    'AGORA_CHANNEL_NAME',
    defaultValue: 'test',
  );
  static const agoraToken =
      String.fromEnvironment('AGORA_TOKEN', defaultValue: 'test');
}

呼び出すときは、こんな感じで呼び出します。

class DirectorController extends StateNotifier<DirectorModel> {
  final Reader read;
  DirectorController(this.read) : super(DirectorModel());

  Future<void> _initialize() async {
    RtcEngine _engine = await RtcEngine.createWithContext(RtcEngineContext(EnvironmentConfig.agoraId));
    AgoraRtmClient _client = await AgoraRtmClient.createInstance(EnvironmentConfig.agoraId);
    state = DirectorModel(engine: _engine, client: _client);
  }

ちなみに、コード実行時は2つのやり方があります。

1. dartの機能を使う

dartの機能を使用して、環境変数を呼び出す際はこんな感じでコード実行します。

Flutter run --dart-define=AGORA_ID=[AgoraIDを入れる]

2. .envを使う

これは、実行前に環境変数としてシェルで読み込んでください。

ちなみに、VSCodeだとenvfileを読み込んでデバッグしてくれる用に、.vscode/launch.jsonをいじると楽です。

GitHub Actions

https://github.com/ekusiadadus/flutter_streamer/blob/master/.github/workflows/dart_lint.yml
https://github.com/ekusiadadus/flutter_streamer/runs/5653351636?check_suite_focus=true

YouTubeになかったので、CI環境をGitHubで作成しました。

flutter format

flutter をフォーマットするActionsです。
https://github.com/subosito/flutter-action

flutter format -l 120 --set-exit-if-changed .

flutter analyze

flutterの依存関係を、チェックしてくれます。
https://github.com/subosito/flutter-action

flutter analyze --fatal-infos --fatal-warnings .

flutter test

https://github.com/subosito/flutter-action

テストを実行してくれるCIですが、まだtest作成中です….
そのうち更新します。

flutter test --coverage --coverage-path=./coverage/lcov.info

プラットフォーム周り

jobs:
  build:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]

上でよさそう？

Search