まつまるまつまる

どうも、まつまるです。今回は動画を1枚1枚の画像に変換してみます。今回はFFmpegを使って実装していきます。無事に実装できてみるとたいしたことないように見えるけど、個人的にはたいへんだった。


アプリのワークフロー
📱ギャラリーから動画を選択
📷選択した動画のFPSに合わせて画像に変換
📖ChangeNotifierProviderを使って画像を表示

注意点
・FlutterでFFmpegを使うとき、assetsのデータは使えない。
・動作確認しているのはiOSのみ。
・なぜかimage pickerがエミュレータで使えない

Githubにあげているので、必要であればクローンしてみてください。

flutterでFFmpeg使っている文献ってほとんどないので参考になれば幸いです。

かなり雑に説明していきますので、Githubと併用しながら見るのがおすすめです!!

スポンサーリンク

使っているパッケージ

image_picker: ^0.6.7+22

flutter_ffmpeg: ^0.3.1

path_provider: ^2.0.0-nullsafety.1

provider: ^5.0.0

fraction: ^2.0.0

intl: ^0.17.0

ギャラリーから動画を選択

スマホから動画を選択するためにimage_pickerを使います。

ios/Runner/info.plistに以下のおまじないを追加しておきましょう。(iOSのみ)

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>

スポンサーリンク

画像を保存するディレクトリの作成

path_providerを使って、画像を一時保存する場所を作っておきます。

動画の詳細情報を取得しよう

公式サイトを見ながらやっていきました。FFprobeを使えば、infoに色々情報がのっているのでデバックしながら欲しいデータを抽出していきました。最終的に欲しいのは動画をスプリットする画像の数です。そのために動画の時間とFPSを取得して、出力する画像のフレーム数を計算しています。

参考にしたのはこちらです。

if (info.getAllProperties()[‘streams’][0][‘r_frame_rate’] == ‘0/0’)をわざわざやっているのは、動画によってFPSが‘0/0’になっていたりするので追加しています。

分数を扱うにはfractionパッケージを使うのが吉です。使い方は別記事に書いているので参考にしてください。

スポンサーリンク

選択した動画のFPSに合わせて画像に変換

はい、ここが本丸です。先ほど取得した動画の情報をもとにフレーム数を指定して動画をスプリットします。

はい、ここまで来れば後は画像の保存先のリストをGridView.builderに渡してやれば画像を表示できます。データの受け渡し等々についてはGithubを見ていただければと思いますのでよろしくお願いします。