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

概要

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

詳細

1. ffmpegのインストール

% sudo apt-get install ffmpeg

2. mp4ファイルの用意 (手持ちのデータを利用する!)

3. 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

4. apacheのmime type追加

mine typeに以下を追加します

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

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

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

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

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

/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
 < 略>

6. 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>
---

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

MP4Boxを使った、MPEG-DASHの場合

% cd work
% cp DOKOKA/happy.mp4 ./

% ffmpeg -i happy.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

% vi index.html
<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
<style>
  video {
    width: 640px;
    height: 360px;
  }
</style>
<div>
  <video data-dashjs-player="" autoplay="" src="http://URL:8999/test.mpd" controls=""></video>
</div>
 % python -m SimpleHTTPServer 8999

http://URL:8999/index.html にアクセス。WindowsなChromeからもみえるようになった!・・・が、途中でとまっちゃう。URLの所は、適宜HTTPServerを起動したホストのIPや自ホストなら、localhostなどと書き換えてください。

参考

MEGA-DASHサンプル

OMSにpkg_add入っていなかった場合の導入方法

最初に。結局容量が足りず、手順までできたのだが、実施に至っておりませーんヽ(´ー`)ノ

手順概要

  1. OSのbaseファイルをダウンロードする
  2. ダウンロードしたファイルを展開する
  3. /usr/sbin/pkg_* をOMS持っていく
  4. /usr/lib/以下のいくつかのライブラリを持っていく
  5. パーミションとsymlinkを設定する

手順詳細

シリアルで接続する際は、UNIXならOS標準のcuコマンドがいいかも。

   pkg_add
 sudo cu -e -s115200 -l /dev/ttyUSB0
  1. ftp://ftp.plathome.co.jp/pub/OMS400/0.4-RELEASE-20130207/mipsel-oms400.ipv6/binary の
    base.tgz をダウンロードする
  2. 展開する
  3. 以下のファイルをFTPで持っていく
  4.    pkg_add
       pkg_admin
       pkg_create
       pkg_delete
       pkg_info
    
  5. usr/lib以下のファイルをOMSの/usr/lib以下に持っていく
  6.    libcrypto.so.0.9.8
       libarchive.so.2.8.4
       libbz2.so.1.0.6
       liblzma.so.5.0.4
    
  7. 以下の通りパーミションとsymlinkを設定する
   chmod 555 libcrypto.so.0.9.8 libarchive.so.2.8.4 libbz2.so.1.0.6 liblzma.so.5.0.4
   ln -s /usr/lib/libcrypto.so.0.9.8 /usr/lib/libcrypto.so.0
   ln -s /usr/lib/libarchive.so.2.8.4 /usr/lib/libarchive.so.2
   ln -s /usr/lib/libbz2.so.1.0.6 /usr/lib/libz.so.1
   ln -s /usr/lib/liblzma.so.5.0.4 /usr/lib/liblzma.so.5

< 参考>
うーん。sortコマンドも入れとかないといけないかもナー

# pkg_add ftp://ftp.plathome.co.jp/pub/ssdlinux/packages/0.4-LATEST/mipsel/binary/squid-2.6.21.tgz
pkg_add: Warning: package `squid-2.6.21' was built for a platform:
pkg_add: Linux/mipsel 2.6.16 (pkg) vs. Linux/mipsel 2.6.12 (this host)
./+USERGROUP: line 246: /usr/bin/sort: No such file or directory
./+USERGROUP: line 279: /usr/bin/sort: No such file or directory
./+USERGROUP: line 380: /usr/bin/sort: No such file or directory
./+USERGROUP: line 410: /usr/bin/sort: No such file or directory
./+DIRS: line 92: /usr/bin/sort: No such file or directory
./+DIRS: line 180: /usr/bin/sort: No such file or directory
./+FILES: line 112: /usr/bin/sort: No such file or directory
./+FILES: line 224: /usr/bin/sort: No such file or directory
./+DIRS: line 206: /usr/bin/sort: No such file or directory
./+DIRS: line 281: /usr/bin/sort: No such file or directory
./+FILES: line 266: /usr/bin/sort: No such file or directory
./+FILES: line 349: /usr/bin/sort: No such file or directory
===========================================================================
$NetBSD$

You DO need running nameservice to start and run squid-2.6.21.

Please note that to use the diskd storage method, you'll likely have to
change SYSV-IPC parameters in the kernel config file (see
http://wiki.squid-cache.org/SquidFaq/DiskDaemon for details)

And please read some documents at /usr/pkg/share/doc/squid.

===========================================================================

# pkg_info
squid-2.6.21        Post-Harvest_cached WWW proxy cache and accelerator

# ls /usr/pkg/sbin/squid
/usr/pkg/sbin/squid

# ldd /usr/pkg/sbin/squid
/usr/pkg/sbin/squid: /lib/libc.so.6: version `GLIBC_2.3.4' not found (required by /usr/pkg/sbin/squid)
        libcrypt.so.1 => /lib/libcrypt.so.1 (0x2ab03000)
        libssl.so.0 => not found
        libcrypto.so.0 => /usr/lib/libcrypto.so.0 (0x2ab70000)
        librt.so.1 => /lib/librt.so.1 (0x2ad18000)
        libpthread.so.0 => /lib/libpthread.so.0 (0x2ad6b000)
        libm.so.6 => /lib/libm.so.6 (0x2ae00000)
        libnsl.so.1 => /lib/libnsl.so.1 (0x2aec2000)
        libc.so.6 => /lib/libc.so.6 (0x2af1b000)
        libdl.so.2 => /lib/libdl.so.2 (0x2b0e9000)
        /lib/ld.so.1 => /lib/ld.so.1 (0x2aaa8000)

あっちゃー。libsslインストールしないとだわー

# pkg_add ftp://ftp.plathome.co.jp/pub/ssdlinux/packages/0.4-LATEST/mipsel/binary/openssl-0.9.8k.tgz
# ln -s /usr/pkg/lib/libssl.so.0.9.8 /usr/lib/libssl.so.0

ん??? 0.9.8k?!もう更新されていない・・・うーむ。クロスコンパイルまでする元気はありませーんヽ(´ー`)ノ

# /usr/pkg/sbin/squid --help
/usr/pkg/sbin/squid: /lib/libc.so.6: version `GLIBC_2.3.4' not found (required by /usr/pkg/sbin/squid)

うひ。base.tgz の /usr/lib/libstdc++.so.6.0.8 を取ってきて symlinkしないとイケナイかも。きっつー
と、持って行こうとしたが、容量オーバーで断念。。。

OpenMicroServerの再セットアップ


↑ここ参考に、CFサイズ変更してみようかな。。。