まつまる どうも、まつまるです。今回はflutterで【動画を選択→動画のサムネイルを取得→サムネを表示】をやってみます。
完成イメージ↓
・右下のボタンをタップ
・カメラorギャラリー起動でvideoを撮影or選択
・動画のサムネ表示
※サムネイルって英語だと、thumbnailらしい。略すとサムネがthumb。わかりづら。
基本はvideo_thumbnailプラグインのExampleを参考にしています。ただ、コードの内容をシンプルにして理解しやすいように変更しました。
今回作成したコードはこちら↓
Flutter video thumbnail sample. Contribute to MatsumaruTsuyoshi/video_thumbnail_demo development by creating an account on GitHub.
順を追ってプログラムの説明をしていき、最後に全文表示します。
使用しているプラグイン
video_thumbnail
＜ videoをサムネ化
image_picker
＜ image/videoをピックアップ
ワークフロー
ざっくりこんな感じです。コードと下の図を交互に見ると理解しやすいと思います。
大きく分けると5つブロックがあります。まずは準備で4ブロック作成します。
準備編
ThumbnailRequestクラスは撮影or選択したvideoのパスを入れる箱です。
ThumbnailResultクラスは作成したサムネイル画像を入れる箱です。
getThumbnailでは引数でvideoのパスを受け取って、サムネイル画像を作成し、Completerに乗せて送り出します。
CompleterはFutureでデータを運ぶ役割を担っています。Unit8Listは画像を扱います。
GenThumbnailImageクラスを作成します。genThumbnailを呼び出してCompleterで運ばれたデータをsnapshotに代入します。
さて、これで準備できました。次は目に見える部分を組み立てていきます。
構成画面
DemoHomeクラスでは、ど真ん中にサムネ画像（_futureImage）を表示します。サムネ画像がnullだったらなにも表示されません。
右下のボタンを押せばカメラかギャラリーが起動して動画を撮影or選択できます。
GenThumbnailImageに動画のパスを渡し、サムネ画像が作成されて_futureImageに代入します。その後にsetStateで再ビルドしてサムネ画像が表示されます。
コード全体
全部まとめると完成です。
