HTML5のVIDEOタグを使ったストリーミング(HLS)

概要

ffmpegのインストール
mp4ファイルの用意
m3u8リスト ts分割
apacheのmime type追加
ファイルの配置とm3u8の編集
HTMLページを作成してアクセスしてみる

詳細

ffmpegのインストール

sudo apt-get install ffmpeg

1	sudo apt-get install ffmpeg

mp4ファイルの用意

手持ちのデータを利用する！

m3u8リスト ts分割

分割前のファイルを happy.mp4 とします。
分割後のリストファイルを stream.m3u8 分割ファイルを stream000.ts とします。(000の所は001,002,…と増えていきます)

mkdir stream
ffmpeg -i happy.mp4 -acodec copy -vcodec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_format mpegts -segment_time 30 -segment_list stream.m3u8 -segment_list_flags -cache stream/stream%03d.ts

1 2	mkdir stream ffmpeg -i happy.mp4 -acodec copy -vcodec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_format mpegts -segment_time 30 -segment_list stream.m3u8 -segment_list_flags -cache stream/stream%03d.ts

apacheのmime type追加

mine typeに以下を追加します

AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts

1 2	AddType application/x-mpegURL .m3u8 AddType video/MP2T .ts

ubuntuのdefaultに追加する場合

vi /etc/apache2/sites-enabled/000-default.conf
---
AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts
---

sudo /etc/init.d/apache reload

vi /etc/apache2/sites-enabled/000-default.conf

---

AddType application/x-mpegURL .m3u8

AddType video/MP2T .ts

---

sudo /etc/init.d/apache reload

nginxの場合 mime.typesに以下を追加

types {
    application/x-mpegURL                 m3u8;
    video/MP2T                            ts;
 < 略>

types {

application/x-mpegURL m3u8;

video/MP2T ts;

< 略>

ファイルの配置とm3u8の編集

DocumentRootから以下の通りファイルを配置します。

/var/www/html/                    ... DocumentRoot
              stream.m3u8
              stream/             ... ファイルが多いので1階層下げた
                    stream000.ts
                    stream001.ts
                    ...

/var/www/html/ ... DocumentRoot

stream.m3u8

stream/ ... ファイルが多いので1階層下げた

stream000.ts

stream001.ts

...

stream.m3u8リストの中身をパスに合わせて編集します。相対パスでもいけると思います。

vi /var/www/html/stream.m3u8
---
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:13
#EXTINF:12.053711,
/stream/stream000.ts
#EXTINF:7.966289,
/stream/stream001.ts
 < 略>

vi /var/www/html/stream.m3u8

---

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-MEDIA-SEQUENCE:0

#EXT-X-ALLOW-CACHE:NO

#EXT-X-TARGETDURATION:13

#EXTINF:12.053711,

/stream/stream000.ts

#EXTINF:7.966289,

/stream/stream001.ts

< 略>

HTMLページを作成してアクセスしてみる

vi /var/www/html/index.html
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>HTTP Live Streaming Test</title>
  </head>
  <body>
      <h1>HTTP Live Streaming Test</h1>
      <video width="640" height="360" src="stream.m3u8" preload="none" onclick="this.play()" controls />
  </body>
</html>
---

vi /var/www/html/index.html

---

<!DOCTYPE html>

<head>

<title>HTTP Live Streaming Test</title>

</head>

<body>

<h1>HTTP Live Streaming Test</h1>

</body>

</html>

---

http://URL/index.html

再生されましたか？

H.264

ffmpeg -i orange.mp4 -map 0 -f ssegment -vcodec libx264 -acodec aac -strict experimental -segment_list stream.m3u8 -segment_time 10 stream%03d.ts

1	ffmpeg -i orange.mp4 -map 0 -f ssegment -vcodec libx264 -acodec aac -strict experimental -segment_list stream.m3u8 -segment_time 10 stream%03d.ts

MP4Boxを使った、MPEG-DASH

cd work
cp DOKOKA/testSource.mp4 ./

ffmpeg -i testSource.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -b:v 500k -strict -2 output_500k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 1000k output_1000k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 4000k output_4000k.mp4

sudo apt-get install gpac       # MP4Boxが入ったパッケージ

MP4Box -dash 1500 -profile live -out test.mpd output_500k.mp4#video:id=video_500k output_500k.mp4#audio:id=audio output_4000k.mp4#video:id=video_4000k output_1000k.mp4#video:id=video_1000k

python -m SimpleHTTPServer 8999

wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

vi index.html
---
< !doctype html>
<html>
  <head>
    <script type="text/javascript" src="dash.all-1.2.0.js"></script>
  </head>
  <body>
    <h1>MPEG-DASH sample</h1>
    <div>
      <video id="videoPlayer" controls="true"></video>
    </div>
    <script>
      (function() {
        var url = "http://URL:8999/test.mpd";
        var context = new Dash.di.DashContext();
        var player = new MediaPlayer(context);
        player.startup();
        player.attachView(document.querySelector("#videoPlayer"));
        player.attachSource(url);
      })();
    </script>
  </body>
</html>
--- 

python -m SimpleHTTPServer 8999

cd work

cp DOKOKA/testSource.mp4 ./

ffmpeg -i testSource.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -b:v 500k -strict -2 output_500k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 1000k output_1000k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 4000k output_4000k.mp4

sudo apt-get install gpac # MP4Boxが入ったパッケージ

MP4Box -dash 1500 -profile live -out test.mpd output_500k.mp4#video:id=video_500k output_500k.mp4#audio:id=audio output_4000k.mp4#video:id=video_4000k output_1000k.mp4#video:id=video_1000k

python -m SimpleHTTPServer 8999

wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

vi index.html

---

< !doctype html>

<html>

<head>

</head>

<body>

<h1>MPEG-DASH sample</h1>

<div>

</div>

(function() {

var url = "http://URL:8999/test.mpd";

var context = new Dash.di.DashContext();

var player = new MediaPlayer(context);

player.startup();

player.attachView(document.querySelector("#videoPlayer"));

player.attachSource(url);

})();

</script>

</body>

</html>

---

python -m SimpleHTTPServer 8999

http://URL:8999/index.html

WindowsなChromeからもみえるようになった！・・・が、途中でとまっちゃう。