まつまる どうも、まつまるです。今回は動画を１枚１枚の画像に変換してみます。今回はFFmpegを使って実装していきます。無事に実装できてみるとたいしたことないように見えるけど、個人的にはたいへんだった。
📱ギャラリーから動画を選択
📷選択した動画のFPSに合わせて画像に変換
📖ChangeNotifierProviderを使って画像を表示
注意点
・FlutterでFFmpegを使うとき、assetsのデータは使えない。
・動作確認しているのはiOSのみ。
・なぜかimage pickerがエミュレータで使えない
Githubにあげているので、必要であればクローンしてみてください。
Contribute to MatsumaruTsuyoshi/flutter_ffmpeg_video_to_image development by creating an account on 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パッケージを使うのが吉です。使い方は別記事に書いているので参考にしてください。
結論、fractionパッケージを使いましょう。 それでは順に説明していきす。 スポンサーリンク pubspec.yaml fileに追加 fraction: ^2.0.0 パッケージをインポート import R …
選択した動画のFPSに合わせて画像に変換
はい、ここが本丸です。先ほど取得した動画の情報をもとにフレーム数を指定して動画をスプリットします。
はい、ここまで来れば後は画像の保存先のリストをGridView.builderに渡してやれば画像を表示できます。データの受け渡し等々についてはGithubを見ていただければと思いますのでよろしくお願いします。
