UUUMエンジニアブログ

UUUMのエンジニアによる技術ブログです

HTTP Live Streamingを試してみた

エンジニアのタナカです。

ライブ配信というとReal Time Streaming Protocol(RTSP)が有名ですが、 AbemaTVやFresh!といった最近のサービスでは、HTTP Live Streaming(HLS)というHTTPベースのプロトコルでライブ配信 を行っています。

従来のRTSPでは、転送プロトコルにUDPを使用することが多く、配信には専用のサーバーが必要でした。
ところが今回紹介するHLSならば、転送プロトコルにHTTPを使用し、ApacheやNginxといった一般的なサーバーを使って動画配信できるようになります。
また、HTTPベースなのでCDNも利用可能で、同時接続数を増やすのも容易なようです。

HTTP Live Streamingについては、こちらのサイトがわかりやすいので、ぜひ見てみてください。

did2memo.net

今回は、このHLSを使用してライブ配信の実験をしてみました。

概要

以下の要領でライブ配信が行えることを確認したいと思います。

  • リアルタイムの映像とエンコーダーに、動画ビュアーのVLCを利用する
  • エンコードされたものをHTTP Live Streaming ToolsでHLS形式に変換する
  • 変換されたものをApacheで配信する

環境

  • OS: Mac OSX/10.11.6（バージョンアップしなければ・・）
  • エンコーダー: VLC Player/2.2.6
  • HLSコンバーター: HTTP Live Streaming Tools（Apple Developer からダウンロード可能）
  • Webサーバー: Apache/2.4.18

実行コマンド

/Applications/VLC.app/Contents/MacOS/VLC -vv screen:// --intf=rc --sout="#transcode{vcodec=h264,samplerate=44100,vb=800,fps=25,acodec=mp4a,ab=128,height=480,width=640,scale=1}:standard{access=file,mux=ts,dst='-'}" | mediastreamsegmenter -f /Library/WebServer/Documents/stream -s 3 -t 30 -p

VLCにはデスクトップをキャプチャー、エンコードする機能があるのでそちらを利用しています。
エンコード結果をHTTP Live Streaming Toolsのコマンドmediastreamsegmenterに渡しています。
ファイルの出力先にはApacheのDocumentsディレクトリを指定しました。

実行結果

ファイル一覧

Library/WebServer/Documents/stream% ls -l
total 3256
-rw-r--r--  1 tanaka  wheel   213944 10 18 18:28 fileSequence0.ts
-rw-r--r--  1 tanaka  wheel  1309232 10 18 18:29 fileSequence1.ts
-rw-r--r--  1 tanaka  wheel   135168 10 18 18:29 fileSequence2.ts
-rw-r--r--  1 tanaka  wheel      151 10 18 18:28 prog_index.m3u8
/Library/WebServer/Documents/stream%

指定したディレクトリ下にこのようなファイルが出力されます。

.m3u8ファイル

#EXTM3U
#EXT-X-TARGETDURATION:30
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:EVENT
#EXTINF:29.96593,       
fileSequence1.ts
#EXTINF:14.40000,       
fileSequence2.ts
#EXT-X-ENDLIST

このファイルがプレイリストです。 必要な動画ファイル（.ts）が複数指定されていて、対応ブラウザで開くと順番に動画ファイルが再生されます。 EXT-X-TARGETDURATION:30で30秒毎にプレイリストが更新されることが表されています。

Safariで確認

このファイルをApache経由で配信し、Safariで開くとこのように動画が再生されます。

f:id:tnuuu:20171018184200g:plain

まとめ

専用サーバーが必要だった時代に比べて、ライブ配信もだいぶ手軽に行えるようになりました。 ただし、対応ブラウザに注意が必要です。
PCのIEやChromeの場合はそのままでは再生できず、video.jsのようなライブラリが必要です。
スマホならSafariでもChromeでも再生可能です。

www.wantedly.com