HTTP Live StreamingをFFmpegで作成する
iOSで端末で動画をストリーミング再生させるべく、
HTTP Live Streamingを作成してみた。
HTTP Live Streaming(HLS)は動画ファイルを約10秒程度の短時間に分割しMPEG-TSコンテナに入れたものをひたすら生成しつつm3u8形式のリストファイルにそのファイルを逐次追加していくことで、HTTPのみで擬似的にLive Streamingを実現する方法です。
Appleが提唱したらしく、iOSが最も安定して再生できるのですが一応Androidでも対応します。 (手元のNexus7で試した所、Androidだとシークが出来なくなる) http://qiita.com/joker1007/items/def9d58ddb00fafc936d
作成するには、FFmpegを使うのが楽、とのことで、FFmpegをインストール。
新しめのFFmpegには分割するためのsegmenterも入っているようなので、FFmpegを入れるだけでOK。
インストール環境は、Mac OS X 10.8.5
以下のページを参考にしてインストールした。
Mac OS XでFFmpegのインストールとWebM動画の作り方
インストールには、Homebrewを使用。
必要なプラグインをbrewを使用して入れていく。
(以下は1行)
brew install automake celt faac fdk-aac git lame libass libtool
libvorbis libvpx libvo-aacenc opencore-amr openjpeg opus sdl
schroedinger shtool speex texi2html theora wget x264 xvid yasm
Xcodeが最新版でないとWarningが出るので、アップデートしておく。
(すでにインストール済みのものがある場合もwarningが出る。)
で、FFmpegをオプションつきでインストールする。
(以下も1行)
brew install ffmpeg
--with-fdk-aac --with-libvo-aacenc
--with-libvorbis --with-libvpx --with-openjpeg
--with-theora --with-opencore-amr
これで準備は完了。
以下を参考に変換、分割作業。
HTML5のvideoタグで利用するmp4の動画を作る時のTips
(以下は1行)
ffmpeg -i test.mp4 -vcodec libx264
-b:v 768k -s 640x360 -acodec libfaac
-b:a 96k -ar 44100 -flags +loop-global_heade
-map 0 -bsf h264_mp4toannexb -f segment
-segment_format mpegts -segment_time 10
-segment_list index.m3u8 test%03d.ts
オプションの説明
| コマンド | 値 | 説明 |
|---|---|---|
| -i | test.mp4 | 入力ファイル |
| -vcodec | libx264 | ビデオコーデック。h264 |
| -b:v | 768k | ビデオビットレート |
| -acodec | libfaac | オーディオ・コーデック。AAC |
| -b:a | 96k | オーディオビットレート |
| -ar | 44100 | オーディオサンプリングレート |
| -flags | +loop-global_header | |
| -map | 0 | |
| -bsf | h264_mp4toannexb ※1 | ビデオフィルター |
| -f | segment | コマンドの指定 |
| -segment_format | mpegts | 分割フォーマット |
| -segment_time | 10 | 分割秒数 |
| -segment_list | index.m3u8 | リストファイル |
最後に出力ファイル名を記述。%03dは３桁の連番。
-flagsと-mapは詳細不明。
※1 mpegts形式にする場合、必要なフィルターのよう。
h264_mp4toannexb :
Convert an H.264 bitstream from length prefixed mode to start code prefixed mode (as defined in the Annex B of the ITU-T H.264 specification).
This is required by some streaming formats, typically the MPEG-2 transport stream format (“mpegts”).
http://www.ffmpeg.org/ffmpeg-bitstream-filters.html
HTMLにはこの場合、index.m3u8を読みこめば表示出来る。
<video controls poster="hoge.jpg" preload="none" onclick="this.play();" width="640" height="320" id="stageVideo">
<source src="index.m3u8">
<img src="hoge.jpg" alt="代替" width="640" height="320" />
</video>
参考サイト：
HTTP Live Streaming覚え書き
HTTP Live Streamingの概要(PDF)
ffmpegで動画から画像を切り出す
[Mac] ffmpegをコンパイル
HTTP Live Streamingを使ったサーバ構築
HTML5のvideoタグで利用するmp4の動画を作る時のTips
