スマホのスライドショーアプリを作りたい。その時のアーキテクチャ検討のメモ。サクッと作るにはどうしよう。まかない飯に最適なアーキテクチャはなんだろう。
その１：普通のスライドショーアプリ
- アプリが起動してる間はスリープしない
- フォルダじゃなくてファイルを選択するだけのアプリ
- PhoneGapで作れればいい？
- コマンド多くてむしろ面倒
- Monacaがいいかとも思ったけどむしろ被せ物がおおい
- onsen UIが邪魔
- Googleのチュートリアルにしたがって、Windows上のAndroidSDKだけで作る方がシンプル（Bashに依存しない）
その２：ブラウザ上のVideoタグで作れないか
- jpegを3コマのmp4に変換してそれをvideoタグに変換
- もしくはjpegをmp4に変換してm3u8でプレイリスト化
- あとはvideoタグで再生スピードを変えるだけ
- ブラウザの機能がしっかりしていれば、別画面でも再生できる
- 変更先の動画形式は（mp4,m4v,webm）のいずれか（軽さややりやすさで）
- ブラウザ上でやるならffmpeg-wasmを使うか
- https://gigazine.net/news/20201109-ffmpeg-wasm/
- デモはすでに動作してなかったので、大人しくサーバーサイドでやるか https://zenn.dev/sugar/articles/ce971201435814b0350c
ffmpegで静止画を動画に変換してみよう
原点回帰
ffmpeg -loop 1 -y -i n225.jpg -vcodec libvpx -pix_fmt yuv420p -t 5 -r 1 n225.webm
-
-loop 1 -y -i n225.jpgこの静止画だけをループする - `
以下のように -crf 18 でクオリティの高いオプションを設定すればよい．-crf 0 でロスレスエンコード
$ ffmpeg -r 30 -i %4d.png -vcodec libx264 -pix_fmt yuv420p -crf 18 output.mp4
ミニマムの動画変換（30fps）
ffmpeg -r 30 -i jpeg/kazuha1.jpg output.mp4
これだとすぐ終わる。
フレームレートを変えてみる。
ffmpeg -r 0.1 -i jpeg/kazuha1.jpg output.mp4
これでもすぐ終わってしまう。フレームレートではなく動画の尺自体を指定しないとだめかも。
ffmpeg -r 1 -t 10 -i jpeg/kazuha1.jpg output.mp4
これでもすぐに終わってしまう。
ループをしていすることで一つのファイルになった
ffmpeg -r 1 -t 10 -loop 1 -y -i jpeg/kazuha1.jpg output.mp4
これで初めて10秒の動画が完成
次にスライドショー的に複数のファイルを指定してみる
ffmpeg -r 1 -t 10 -loop 1 -y -i jpeg/kazuha%1d.jpg output2.mp4
これだと1秒おきに変わる。
フレームレートを買えてみる。
ffmpeg -r 0.5 -t 10 -loop 1 -y -i jpeg/kazuha%1d.jpg output2.mp4
これでも1秒おきに変わる
ffmpeg -r 1 -t 10 -loop 1 -y -i jpeg/kazuha%1d.jpg -r 60 output2.mp4
出力のフレームレートを変えることで、もうちょっとゆっくり変わるようになった。
ただ、ここのコントロールは難しそうなので、jpegの個数とmp4の個数は一致させる方が良さそう。
ffpmegで動画を結合させるという案もあるが、縦横比が同じファイルでないとffmpegの動画結合機能は使えない。
スライドショーという使い方をする限り、縦横比の違う画像が入ってくることも考慮する必要がある。
次はm3u8ファイルで各動画をプレイリストにする。
まずjpegを10秒の動画に変換
ffmpeg -r 1 -t 10 -loop 1 -y -i jpeg/kazuha1.jpg kazuha1.mp4
ffmpeg -r 1 -t 10 -loop 1 -y -i jpeg/kazuha2.jpg kazuha2.mp4
次にこの2つの動画をプレイリストにする。
#EXTM3U
file://wsl.localhost/Ubuntu-20.04/root/work/jpeg2mp4/kazuha1.mp4
file://wsl.localhost/Ubuntu-20.04/root/work/jpeg2mp4/kazuha2.mp4
m3u8は非常にシンプルで、ファイル名を絶対パスで並べるだけ。
この方法でVCLプレイヤーでは再生できた。
次にブラウザでm3u8を再生する方法
一旦素のvideoタグで当てはめてみる。
<video src="./te01.m3u8">
これが機能しなかった。
あれこれ調べても、直接m3u8ファイルを再生している例が見当たらない
ビデオが終わったことのイベントは認識できるから次の動画に切り替えるというJSをかけばいいか
その３：壁紙変更アプリ
- 定期的にロック画面の壁紙を変更するだけのアプリ
- 壁紙に設定されている画像のファイル名を変更するだけってのはどうだろう
- もしくは壁紙に設定されている画像のファイル名に定期的にコピーする
- これならadbシェルでできないかな
- termux+cronでできると嬉しい
根本的な課題
スマホをスリープさせないというためにはどうしたらいいかということがいずれも考慮されてない。その点ではいずれも不合格。