RのWeb制作

Webサービス制作のための技術情報を。データ分析(Python、機械学習コンペ他)や自作野球ゲームMeisyoのこと中心。

モバイル制作 Flutter

【Flutter】動画配信アプリの作成(2022年版・無料)

投稿日:2022年4月10日 更新日:

はじめに

とあるきっかけから動画撮影・個別配信アプリを作りたいなということでいろいろなサイトで調べていました。

が・・・配信アプリ作成がうまく行かない。

例)

  1. ローカルネットワークでライブ配信する(2020年11月11日)
  2. 【完全無料】Flutterを使って簡易ライブ配信アプリを構築する(2021.03.14に公開)

サーバー構築はubuntu上にlibnginx-mod-rtmpを使えば簡単にできますし、サーバーがあれば配信自体はOBS Studioでできます。

配信アプリだけエラーが出て、なぜかうまく行かない(理由がわからない)を解決していきましょう!

準備

上記の例にある記事を参考に、サーバー側はローカルネットワークでライブ配信する(2020年11月11日)、アプリ側を【完全無料】Flutterを使って簡易ライブ配信アプリを構築する(2021.03.14に公開)で実装してみてください。

すべての作業を完了させ、アプリを実行させるとエラーが出てしまうと思います。そこからスタートです。

以下のパッケージをpub getします。それぞれのpackage page()で必要な設定を行うことを忘れないでください。

dependencies:
  flutter:
    sdk: flutter
  # camera
  camera: ^0.9.4+19 # カメラ
  camera_with_rtmp: ^0.3.2 # 配信(RTMP)用
  path_provider: ^2.0.9 # パスを通す
  # video
  video_player: ^2.3.0 # 動画確認用
  wakelock: ^0.6.1+2 # 動画撮影中に画面をOFFにしない

camera_with_rtmpにエラーが出る場合はhttps://githubhot.com/repo/pinkfish/flutter_rtmppublisher/issues/36をご覧ください。

コードの作成

ベースとなるコードの取得

flutter_rtmppublisher/example/main.dartのコードをコピペし、lib/main.dartの中身をすべて書き換えます。

Null Safety対応を行う

ベースコードは下記の通り記載されていて、内部の変数がNull Safetyに対応していません。

  CameraController controller;
  String imagePath;
  String videoPath;
  String url;

そのため、下記のように変更を行います。

  CameraController? controller;
  String? imagePath;
  String? videoPath;
  String? url;

その他のコードにも対応していない部分が複数存在するので、対応します。

Null Safety対応のパッケージを取得する

まずは、lib/rtmp_publisherディレクトリを作成します。

続いて、そのディレクトリにflutter_rtmppublisher内のファイルをコピーします。

※こんな感じでディレクトリとファイルが存在しているようにします。

lib/main.dartの下記importを、

import 'package:camera_with_rtmp/camera.dart';

下記のように変更します。自分のパッケージ名については、適宜変更ください。

import 'package:自分のパッケージ名/rtmp_publisher/camera.dart';

上手くできたと思います。

配信の確認方法

アプリ上での再生はfijkplayer、PC上での再生はVLCなどをお使いください

再生はvideo_player(や派生したパッケージ)で可能とされていますが、試してみてうまくいったのはfijkplayerパッケージのみでした。

まとめ

今回は動画配信アプリを作ってみました。それを通じて、パッケージの利用やパッケージの改善方法を知ることができたと思います。

うまく行かなかった原因は、Flutterのコーディングルールに2021年後半に大きな内容変更があったようで、後方互換性がなくなっていました。(ツライ…)

疑問点などがあればコメントをお願いいたします。それでは!

-モバイル制作, Flutter

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

ゲームアプリ運営の分析ノウハウ vol.2 新規登録者編

はじめに アプリ開発者によくある悩み・・・登録者がゲームを続けてくれません!!。 続けてくれないをより細かく言うと、(1)コンテンツを一通りプレイしてもらいたいのか、(2)毎日プレイしてほしいのかによ …

【Flutter】ToDoアプリの作成

StatefullWidgetの状態管理、データの受け渡し、デバイスへのToDoリスト保存の解説がなかったので例となるアプリを作成しました。 こちらのアプリを応用すれば、大体のアプリが作れるのではない …

Xcode13以降で起こる「info.plistが見えない」「作成できない」不具合に対応する

なぜかinfo.plistが見えない問題があるので、備忘として書き残しておく。 (1)プロジェクトのxcodeprojectファイルをXcodeで開く (2)該当Project選択 (3)TARGET …

ゲームアプリ運営の分析ノウハウ vol.1 概要編

はじめに 以前から、Twitterなどでこんな悩みを見聞きしていました。 「ゲームアプリを運営する際に、どのような視点で、どのような指標を分析すべきかわからない」というものです。今回はそちらのお悩みに …

「1人で遊べる最もシンプルな脳活ゲーム NEXT CARD」制作しました

皆さま、お疲れ様です( ^o^) だいぶ更新間隔が空きましたが、いかがお過ごしでしょうか。 ゲーム紹介 今回はMeisyoとは異なる別の制作物を作っていました。 珍しくトランプカードゲームです。 1人 …