HLS で streaming

8 12月
12月 8, 2016

VLC
HLS（HTTP Live Streaming）を調べています。動画配信用の技術なのですが，利用状況やブラウザ等の対応が下記のサイトにまとめられています。

HTTP Live Streamingで動画を配信してみる

まずは，ライブではないですが，配信用の画像を作成してみます（形式が限られている）。ffmpeg を利用しました。下記が ffmpeg のダウンロード先です。windows 版を利用しました。

Download FFmpeg

動画は下記のサイトを参考にして作成しました。

HLSの作り方

コマンドは下記のような感じです。

ffmpeg.exe -i ./work/Ora2.mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 10 -segment_list ./work/Ora2.m3u8 ./work/Ora2-%03d.ts

作成されたファイルです。Ora2.mp4 は元ファイルです。
20161208a

Ora2.m3u8 ファイルの中身は下記のようになっています。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXTINF:10.719033,
Ora2-000.ts
#EXTINF:4.337656,
Ora2-001.ts
#EXT-X-ENDLIST

順番に読み込む動画ファイルが記載されています。
これを配信するには、普通の Web サーバーで良いのですが、HTML は下記のようにソースとして .m3u8 ファイルを指定します。

<!DOCTYPE html>
<html lang="ja" >
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <title>Test for HTTP Live Streaming</title>
  </head>
  <body style="background-color:#FFFFFFF;">
     <P>HLS_Test: Video Bit Rate = 96k</p>
     <center>
        <video src="Ora2.m3u8" controls></video>
     </center>
  </body>
</html>

HLS 配信のため apache に、mime タイプ追加をします。下記等を参考にして作業しましたが、下記は ubuntu ではありません。

http://memorandum.yamasnet.com/archives/Post-3771.html

それで、適切かどうかはわからないのですが、ひとつは　/etc/mime.types に下記を追加して、

application/x-mpegURL				m3u8
video/MP2T					ts

もうひとつは、/etc/apache2/mods-available/mime.conf に

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

上記を追加しました。

この動画は、iOS の safari は対応していて（本来のターゲットですが）、PC では Mac の safari と windows10 の Edge でだけ再生できます。 windows７のブラウザでは今のところ再生できません。ただ、VLCプレイヤーは、HLS を直接再生可能です。冒頭の図が VLC プレイヤーで再生しているところです。VLC プレイヤーのサイトは下記です。
http://www.videolan.org/

接続先の指定は、下記のように m3u8 ファイルを指定します。
VLC_open_m3u8

このサイト（nginx-rtmp-moduleを使ってスマートフォンへの生放送配信を実験）にあるのですが、下記に引用すると

このENDがない場合は、stream003.tsが来る迄、待ち状態になり、何度もクライアント側は.m3u8ファイルにアクセス + 作成されたタイミングで再生します。

この END とは、m3u8 ファイルの最後の行（#EXT-X-ENDLIST）のことですが、そこでこの記述を試してみました。

最初に Ora2.m3u8 ファイルを、下記のようにしておきます。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXTINF:10.719033,
Ora2-000.ts

そうすると、Ora2-000.ts ファイルを読み込んだ後、再度 m3u8 ファイルを読みに行きます。動画は静止状態です。

20161208b

そこで、Ora2.m3u8 ファイルを下記のように変更します。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXTINF:10.719033,
Ora2-000.ts
#EXTINF:4.337656,
Ora2-001.ts

Ora2-001.ts が読み込まれ、再び再生が始まります。下図は、再生が再び停止して m3u8 ファイルの読み込みを繰り返しているタイミングでのキャプチャーです。

20161208c

最後に、#EXT-X-ENDLIST を書き足すと、再生が終了し動画のコントローラーが表示されました。