HLS(HTTP Live Streaming)がどういうものなのか色々読んでみたもの実際やってみた方が面白いし勉強になると思ったので、細かいことは置いておいて、実際にやってみたときのメモです。
環境
- Vagrant 1.9.7
- CentoOS 7.3.1611
- Apache 2.4.6
- FFmpeg 2.6.8
準備
apacheインストールと自動起動設定
sudo yum install -y httpd httpd-devel
sudo systemctl start httpd
sudo systemctl enable httpd
mp4ファイルをHLS配信ができるよう変換する
HLS配信するには.m3u8と.tsファイルという２種類のファイルが必要となります。
HLS配信はクライアントが最初に.m3u8ファイルを読み込み、そこに記載された.tsファイルを順次読み込んで再生していくという仕組みになっています。
FFmpegをインストール
mp4を変換する方法はいろいろあるみたいですが、今回はFFmpegを使います。
sudo yum -y install epel-release
sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm
sudo yum -y install ffmpeg
FFmpegでmp4ファイルを変換する
-
/var/www/html/のオーナを変える。
sudo chown vagrant:vagrant /var/www/html/
/var/www/htmlにmp4ファイルをアップロードする。mp4ファイルを変換する。
cd /var/www/html
ffmpeg -i input.mp4 -vcodec libx264 -acodec libfaac output.m3u8
変換が正常に行くとoutput.m3u8というファイルとoutput0.ts～output?.tsというファイルが作成される。
output.m3u8の中身は下記みたいになっています。
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:9
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:8.333333,
output0.ts
#EXTINF:8.333333,
output1.ts
#EXTINF:4.066667,
output2.ts
#EXTINF:4.200000,
output3.ts
#EXTINF:3.200000,
output4.ts
#EXT-X-ENDLIST
再生用ページを作成する（その１）
注意：HLS配信にネイティブで対応しているブラウザでしか再生できません。
（ChromeやFirefox等でも再生する方法は次項）
vi play.html
<!DOCTYPE html>
<html>
<body>
<video width="640" height="360" src="output.m3u8" controls />
</body>
</html>
HLS配信にネイティブで対応していないブラウザでも再生できるようにする
前項までの作業でEdgeやSafariでは再生できますが、HLS配信にネイティブで対応していないChromeやFirefox等ではまだ再生できません。再生できるようにするにはvideo.jsというライブラリを利用します。
video.jsを導入する
video.jsとプラグイン（videojs-contrib-hls、videojs-contrib-media-sources）を導入する。
下記リンク先からダウンロードし/var/www/html/static/jsと/var/www/html/static/cssにアップロードする。
video.min.js, video-js.min.css v6.2.7
videojs-contrib-media-sources.min.js v4.5.2
videojs-contrib-hls.min.js v5.11.0
下記のように配置する。
|--output1.ts
|-- ・
|-- ・
|-- ・
|--output.m3u8
|--play.html
|--static
|--css
| |--video-js.min.css
|--js
|--videojs-contrib-hls.min.js
|--videojs-contrib-media-sources.min.js
|--video.min.js
再生用ページを作成する（その２）
vi play.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Video.js Sample</title>
<link href="static/css/video-js.min.css" rel="stylesheet">
<script src="static/js/video.min.js"></script>
<script src="static/js/videojs-contrib-media-sources.min.js"></script>
<script src="static/js/videojs-contrib-hls.min.js"></script>
</head>
<body>
<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
width="640" height="360" data-setup="{}">
<source src="output.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>