KAROUSHI -Japanese Engineer Blog-

コボルドからドラゴンへ -Kobold to Dragon-

システムエンジニアのブログです。サイト名は「雑魚キャラからボスキャラへレベルアップしたい!」という思いを込めて命名しました。自分はやっとリザードマンになったくらいです。

HLS + FFmpeg + nginx on EC2でストリーミング動画配信サービスを構築する

今回は最近動画配信技術として注目されているHLSを使ってストリーミング動画配信サービスを構築します。
EC2上にnginxを使ってWebサーバを公開し、video.jsで動画プレイヤーを作りサンプルmp4をm3u8で分割して配信します。

単語がわからない方は前回の記事にまとめているのでこちらをどうぞ。
HLS, H.264, エンコード, コーデック, ファイル形式(知識編) - KAROUSHI -Japanese Engineer Blog-

目次

HLS + FFmpeg + nginx on EC2でストリーミング動画配信サービスを構築する

EC2の作成

まずはEC2が必要です。手順はこちらを参考にして実施してください。
EC2でAmazonnLinuxを5分で作成 - KAROUSHI -Japanese Engineer Blog-

FFmpegのインストール

EC2の準備ができたらログインして早速FFmpegをインストールしていきましょう。
FFmpegを使ってmp4をm3u8形式に直してストリーミング動画配信を行います。

まずは必要なパッケージをインストールします。

$ sudo yum install -y vim git

gitからshをcloneしてきて実行します。
このshはFFmpegとそれに必要なライブラリをコンパイルする手順を実行します。
実行完了までかなりかかるので待ちましょう。エラーがでなければOKです。

$ git clone https://gist.github.com/b920763fb15e2f487ad363fbb2e61ad9.git
$ chmod +x b920763fb15e2f487ad363fbb2e61ad9/ffmpeg_install.sh
$ ./b920763fb15e2f487ad363fbb2e61ad9/ffmpeg_install.sh

nginxのインストール

nginxをインストールしてWebサーバを立てましょう。Apacheに慣れている方ならそれでもいいですが、最近は徐々にnginxに移行してきているようです。またnginxはコンフィグがjson形式なのでApacheと比べると格段に設定が容易です。処
理も速いし。

$ sudo yum install nginx -y

ドキュメントルートのディレクトリが作成されていることを確認します。

$ ll /usr/share/nginx/html

nginxを起動します。

$ sudo service nginx start
Starting nginx:                                            [  OK  ]

nginxを自動的に起動します。

$ sudo chkconfig nginx on

node.js, npmのインストール

yumでnode.jsとnpmをインストールします。

$ sudo yum install epel-release
$ sudo yum install nodejs npm --enablerepo=epel -y

バージョンを確認する。

$ npm -v
1.3.6
$ node -v
v0.10.46

※node.jsのバージョンが古いため最新のnode.jsを使いたい場合は以下を実施する。
以下サイトを参照
Amazon Linuxに Node.js と npm を入れる - Qiita

参考:
centos + node.js + npm + nvm インストール - Qiita

Video.jsのインストール

まずはnginxのドキュメントルートにcssとjsを格納するディレクトリを作成します。

$ sudo mkdir -p /usr/share/nginx/html/css/
$ sudo mkdir -p /usr/share/nginx/html/js/

npmでvideo.jsをインストールしましょう。

$ npm install --save-dev video.js

インストールが完了したらドキュメントルートにjsやcss等を移動します。

$ sudo cp node_modules/video.js/dist/video.min.js /usr/share/nginx/html/js/
$ sudo cp node_modules/video.js/dist/video-js.swf /usr/share/nginx/html/js/
$ sudo cp node_modules/video.js/dist/video-js.min.css /usr/share/nginx/html/css/
$ sudo cp -rp node_modules/video.js/dist/font/ /usr/share/nginx/html/

他にも必要なパッケージをnpmでインストールして同様にドキュメントルートへ移動させます。

$ npm i videojs-contrib-media-sources
$ cd  node_modules/videojs-contrib-media-sources
$ npm i
$ npm run build
$ sudo cp -p dist/videojs-contrib-media-sources.min.js /usr/share/nginx/html/js/

こちらも同様。

$ cd ~
$ git clone https://github.com/videojs/videojs-contrib-hls
$ cd videojs-contrib-hls
$ npm i
$ npm run build
$ sudo cp -p dist/videojs-contrib-hls.min.js /usr/share/nginx/html/js/

HTMLを/usr/share/nginx/htmlに配置します。
※[IP Addresses]の部分はEC2のパブリックIPに変更すること。

$ cd /usr/share/nginx/html
$ sudo vim video.html


gistf1fb9a79b6f1206d88d5ca9dac9a7a3a


wgetでストリーミング動画配信のテスト用としてmp4の動画をダウンロードします。

$ wget http://www.gomplayer.jp/img/sample/mp4_h264_aac.mp4

ようやく準備が整いました。mp4⇒m3u8へFFmpegコマンドで変換します。動画サイズによって変換は多少時間がかかります。

$ ffmpeg -i mp4_h264_aac.mp4 -vcodec libx264 -s 1280x720 -b:a 256k -f segment -segment_format mpegts -segment_time 10 -segment_list sample.m3u8 sample_%04d.ts

完了したらドキュメントルートに配置します。

$ sudo cp -p sample* /usr/share/nginx/html/

ブラウザでストリーミング動画の視聴

Windows10ならMicrosoftのEdgeブラウザを起動し以下のURLでアクセスしてみましょう。
ビデオ再生画面が表示され自動でバッファ読み込みを開始します。準備ができたら再生ボタンを押してみてください。
※[IP Addresses]の部分はEC2のパブリックIPに変更すること。
http://[IP Address]/video.html
f:id:jainders:20161103000358j:plain

動画は無事見れましたか?
以上で終わりです。