ライブ配信サーバー完全に理解した

ライブ配信サーバー完全に理解した @mainyaa

Who • @mainyaa • Kazuyuki Mori • フロントエンドからバックエンドから機械学習までやる系エンジニア • D.Node所属

ライブ配信の技術

世はまさに、大配信時代！ • スパチャ投げたことありますか？ • Youtube Liveの台頭によってストリーマーが注目を集めている ◦ ストリーマーになりたいけどなれない。。。

世はまさに、大配信時代！ • 僕らには技術があった ◦ DevToolsを使ってTwitch.tvをみると、どうやら.m3u8とか.tsというファイルを使っているみたい ◦ ググってみるとHLSというのを使っている

HLSとは • HTTPを経由した低遅延の動画配信の規格 • HLS(HTTP Live Streaming)はデファクトスタンダード ◦ 他にはMPEG-DASHという標準規格もある →今回はHLSについて話します！

HLSとは • Appleが作った規格(RFC8216) • HTTP/HTTPSで動画を配信できる • 主要なOSに対応している ◦ iOSはHLSにしか対応していない

HLSとは • アダプティブストリーミングに対応 ◦ 視聴者の帯域幅に合わせて動的に画質を変える機能 ◦ モバイルで嬉しい • ３～６秒の遅延がある ◦
遅延＝配信から視聴までのラグ ◦ 快適なコミュニケーションにはちょっとつらい

HLSの仕組み

HLSの仕組み（配信側） • 動画をセグメント(tsファイル)に分割する。各セグメントの長さは約10秒 • ビデオセグメントのURLと順序は、プレイリスト(m3u8ファイル) に記述される • プレイリストとビデオセグメントは、ストリーミングサーバーで HTTPで配信される
high.m3u8 .ts .ts .ts .ts .ts .ts プレイリスト 10秒で分割されたビデオセグメント

ストリーミングサーバー (Origin) （次のページに続く）メディアサーバー配信ソフトウェアエンコーダーセグメンテーターセグメントファイル .ts インデックスファイル
.m3u8

HLSの仕組み（視聴側） • HLS準拠のプレイヤーはm3u8ファイルをダウンロードし、ビットレートを選択し、動画を再生する • プレイヤーは、定期的にm3u8ファイルをポーリングし、新しい動画を再生する

ストリーミングサーバー (Origin) セグメントファイル .ts インデックスファイル .m3u8 CDN

HLSの嬉しいところ • HTTPで通信するためセキュリティでブロックされない • HTTPサーバーを使っているためスケールが簡単にでき、 CDNで突発アクセスにも備えられる • 視聴者が増えてもメディアサーバーへの負荷が変わらない • アダプティブストリーミングで複数のビットレートで配信でき
る • DevToolで簡単に中身を見られる

HLSの嬉しくないところ • 使えるエンコードが決まっている ◦ H.264かH.265のみ • DRMがApple FairPlayのみ対応 • iOSがMPEG-DASHに対応しない

アダプティブストリーミング

アダプティブストリーミングとは • ビットレートが異なる複数のストリームを配信することで、ブラウザが自分の帯域に合わせて自動的に画質を調整してくれる仕組み • マスターm3u8を作り、そこからビットレートが違う子m3u8を参照する

index.m3u8 high.m3u8 medium.m3u8 low.m3u8 高ビットレート中ビットレート低ビットレートメディアサーバー

高ビットレート中ビットレート低ビットレートストリーミングサーバーブラウザ再生状態配信

HLSのファイルを見る

HTMLのサンプル <!DOCTYPE html> <html> <head><title>HTTP Live Streaming Example</title></head> <body> <video
src="/v1/playlist/index.m3u8" width="400" height="300" controls></video> </body> </html>

インデックスm3u8のサンプル #EXTM3U #EXT-X-MEDIA:TYPE=VIDEO,GROUP-ID="chunked",NAME="936p60 (source)",AUTOSELECT=YES,DEFAULT=YES #EXT-X-STREAM-INF:BANDWIDTH=9004654,RESOLUTION=1664x936,CODECS="avc1.64002A,mp4a.40.2",VIDEO="ch unked",FRAME-RATE=60.000 https://example.com/v1/playlist/1.m3u8 #EXT-X-MEDIA:TYPE=VIDEO,GROUP-ID="720p60",NAME="720p60",AUTOSELECT=YES,DEFAULT=YES #EXT-X-STREAM-INF:BANDWIDTH=3422999,RESOLUTION=1280x720,CODECS="avc1.4D401F,mp4a.40.2",VIDEO="72 0p60",FRAME-RATE=60.000
https://example.com/v1/playlist/2.m3u8 #EXT-X-MEDIA:TYPE=VIDEO,GROUP-ID="360p30",NAME="360p",AUTOSELECT=YES,DEFAULT=YES #EXT-X-STREAM-INF:BANDWIDTH=630000,RESOLUTION=640x360,CODECS="avc1.4D401F,mp4a.40.2",VIDEO="360p 30",FRAME-RATE=30.000 https://example.com/v1/playlist/4.m3u8

メディアm3u8のサンプル #EXTM3U #EXT-X-TARGETDURATION:10 #EXT-X-VERSION:3 #EXT-X-MEDIA-SEQUENCE:100 #EXT-X-PLAYLIST-TYPE:VOD #EXTINF:9.97663, media-100.ts #EXTINF:9.97663, media-101.ts
#EXT-X-ENDLIST

HLSサーバーを立てる

HLSサーバーを立てる • alfg/nginx-rtmp ◦ このDockerイメージを使うと一瞬でHLSサーバーを立ち上げられる ◦ nginxとnginx-rtmp-moduleとffmpegを使用している

HLSサーバーを立てるエンコード OBS ブラウザ(HLS.js) 配信ストリーミング

HLSサーバーを立てる Dockerイメージをpullして実行する docker pull alfg/nginx-rtmp docker run -it -p 1935:1935
-p 8080:80 --rm alfg/nginx-rtmp

配信する • OBSを起動する  • 右下の「コントロール」欄で「設定」＞「配信」を選択  • サービス：「カスタム...」  ◦ サーバー：rtmp://localhost:1935/stream  ◦
ストリームキー： hello  • 「配信開始」を押す 

配信を見る • ブラウザでHLS.js Playerを開き、  • 「http://localhost:8080/live/hello.m3u8」を入力します  • 「Apply」ボタンを押すと下に配信中の動画が流れます 

まとめ

まとめ • DRMがいらないならHLSで十分 • HLSの仕組みは意外と簡単 • Dockerイメージのnginx-rtmpを使うとお手軽にサーバーを作れる

Thanks you!

ライブ配信サーバー完全に理解した

ライブ配信サーバー完全に理解した

Kazuyuki Mori

More Decks by Kazuyuki Mori

Other Decks in Technology

Featured

Transcript