JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　動画ファイルから静止画を切り出すサンプル　解説

 

もしかしたら、なんかデジャブ？な人もいるかもしれません。
それもそのはず、動作サンプルで使ったViewのアウトラインは、
以前、「jQuery/JavaScript編　No009：dropzone.jsを使ったファイルのアップロード」でご紹介した、
サンプルページをほぼそのままパクったものです。
違うのは、投入できるファイルのタイプと、最大サイズぐらい。
後は、dropzoneの共通ライブラリで実装しているので、
ここでは、viewの詳しい解説は割愛します。
詳しく理解したい方は、
【jQuery/JavaScript編　No009：dropzone.jsを使ったファイルのアップロード】
を復習してください。
それでは、dropzoneの解説は省略して、
JavaCV(OpenCVのJava版ラッパー)を使ったプログラムの解説です。
今回は、JavaCVプラグインが必要になるため
先ず、pom.xml に以下の定義を追加します。
　<!-- https://mvnrepository.com/artifact/org.bytedeco/javacv-platform -->
　<dependency>
　　<groupId>org.bytedeco</groupId>
　　<artifactId>javacv-platform</artifactId>
　　<version>1.4.4</version>
　</dependency>

（※）2019年2月時点の最新のプラグインバージョンです。
１）コントローラ
src/main/java/jp/dip/arimodoki/cntl/VideoSlice.java

・videofileuploadview()　メソッド
　アップロード用初期画面(videosliceview.html)を表示するだけのハンドラメソッドです。

・videoupload()　メソッド
　Viewの「アップロード」ボタンがクリックされたときに実行されるメソッドです。
　Viewから送信された動画ファイル情報をFormVideoSlice Beanで受け取り、
　処理結果の静止画ストリームをBase64エンコードしたものを、そのままView(sliceresult.html)に返却します。
　Base64エンコード形式の画像表示方法については、
　【HTML編　No002：Base64形式の画像データ(jpeg/gif/png)を表示する方法】
　で解説していますので、こちらも参考にしてみてください。
２）フォームBean
データを受け取るフォームBeanクラスです。
src/main/java/jp/dip/arimodoki/model/FormVideoSlice.java

Viewから送信された動画ファイル情報(uploadfile)と、
処理結果の静止画像をBase64変換してViewに返却するための結果情報(base64Jpg)プロパティを持つフォームBeanです。
よく見るとプロパティだけで、Accesor(setter/getter)がありませんが、
lombokを使っているため、Accesorは省略されています。
詳しくは、【応用の森 Eclipse編　No001：LombokでAccesor(setter/getter)を自動生成する】で復習してね。
３）ビジネスロジック
今回のサンプルの心臓部。JavaCVを使った動画から静止画像を切り出すロジックです。
src/main/java/jp/dip/arimodoki/cntl/BlVideoSlice.java

そんなに難しいロジックでもなく、見てもらえればわかると思うので、
詳しい説明は省きますが、
ミソとしては、FFmpegFrameGrabberクラスと、Java2DFrameConverterぐらいですかね。
　あと、ネット上で散見されるサンプルページでは、動画ファイル／画像ファイルのI/Oで説明されていますが、
このサンプルページでは、ファイルI/Oは使わずに、InputStream/OutputStreamで実装しています。

 
４）View(HTML)
まず、アップロード画面のHTMLです。
WebContent/videosliceview.html
が、、、
以前のdzuploadview.html のほぼ丸パクですが、一応載せておきます。
結果View。
これもほぼ、dropzoneの時の結果view(dropresult.html)のほぼ丸パクりです。
WebContent/sliceresult.html
その他、細々とした JavaScriptとか、スタイルシートとかは、
「jQuery/JavaScript編　No009：dropzone.jsを使ったファイルのアップロード」
で使用したものを、そのまま流用しているので、そちらを参考にしてください。
動画ファイルから静止画を切り出すサンプル  動画ファイルから静止画を切り出すサンプル　解説
HOME