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

"エンジニア達の「〇〇完全に理解した」Talk　#29" で発表したLT
https://easy2.connpass.com/event/247539/

Transcript

1. ライブ配信 サーバー 完全に理解した @mainyaa
2. Who • @mainyaa • Kazuyuki Mori • フロントエンドからバックエンドから機械学習までやる系エンジニア • D.Node所属
3. ライブ配信の技術
4. 世はまさに、大配信時代！ • スパチャ投げたことありますか？ • Youtube Liveの台頭によってストリー マーが注目を集めている ◦ ストリーマーになりたいけどなれな い。。。
5. 世はまさに、大配信時代！ • 僕らには技術があった ◦ DevToolsを使ってTwitch.tvをみると、ど うやら.m3u8とか.tsというファイルを使っ ているみたい ◦ ググってみるとHLSというのを使っている
6. HLSとは • HTTPを経由した低遅延の動画配信の規格 • HLS(HTTP Live Streaming)はデファクトスタンダード ◦ 他にはMPEG-DASHという標準規格もある →今回はHLSについて話します！
7. HLSとは • Appleが作った規格(RFC8216) • HTTP/HTTPSで動画を配信できる • 主要なOSに対応している ◦ iOSはHLSにしか対応していない
8. HLSとは • アダプティブストリーミングに対応 ◦ 視聴者の帯域幅に合わせて動的に画質を変える機能 ◦ モバイルで嬉しい • ３～６秒の遅延がある ◦ 遅延＝配信から視聴までのラグ ◦ 快適なコミュニケーションにはちょっとつらい
9. HLSの仕組み
10. HLSの仕組み（配信側） • 動画をセグメント(tsファイル)に分割する。各セグメントの長さ は約10秒 • ビデオセグメントのURLと順序は、プレイリスト(m3u8ファイル) に記述される • プレイリストとビデオセグメントは、ストリーミングサーバーで HTTPで配信される high.m3u8 .ts .ts .ts .ts .ts .ts プレイリスト 10秒で分割されたビデオセグメント
11. ストリーミングサーバー (Origin) （次のページに続く） メディアサーバー 配信ソフトウェア エンコーダー セグメンテーター セグメントファイル .ts インデックスファイル .m3u8
12. HLSの仕組み（視聴側） • HLS準拠のプレイヤーはm3u8ファイルをダウンロードし、 ビットレートを選択し、動画を再生する • プレイヤーは、定期的にm3u8ファイルをポーリングし、新し い動画を再生する
13. ストリーミングサーバー (Origin) セグメントファイル .ts インデックスファイル .m3u8 CDN
14. HLSの嬉しいところ • HTTPで通信するためセキュリティでブロックされない • HTTPサーバーを使っているためスケールが簡単にでき、 CDNで突発アクセスにも備えられる • 視聴者が増えてもメディアサーバーへの負荷が変わらない • アダプティブストリーミングで複数のビットレートで配信でき る • DevToolで簡単に中身を見られる
15. HLSの嬉しくないところ • 使えるエンコードが決まっている ◦ H.264かH.265のみ • DRMがApple FairPlayのみ対応 • iOSがMPEG-DASHに対応しない
16. アダプティブストリーミング
17. アダプティブストリーミングとは • ビットレートが異なる複数のストリームを配信することで、ブ ラウザが自分の帯域に合わせて自動的に画質を調整してく れる仕組み • マスターm3u8を作り、そこからビットレートが違う子m3u8を 参照する
18. index.m3u8 high.m3u8 medium.m3u8 low.m3u8 高ビットレート 中ビットレート 低ビットレート メディアサーバー
19. 高ビットレート 中ビットレート 低ビットレート ストリーミング サーバー ブラウザ 再生状態 配信
20. HLSのファイルを見る
21. 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>
22. インデックス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
23. メディア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
24. HLSサーバーを立てる
25. HLSサーバーを立てる • alfg/nginx-rtmp ◦ このDockerイメージを使うと一瞬でHLSサーバーを立ち 上げられる ◦ nginxとnginx-rtmp-moduleとffmpegを使用している
26. HLSサーバーを立てる エンコード OBS ブラウザ(HLS.js) 配信 ストリーミング
27. HLSサーバーを立てる Dockerイメージをpullして実行する docker pull alfg/nginx-rtmp docker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp
28. 配信する • OBSを起動する
 • 右下の「コントロール」欄で「設定」＞「配信」を選択
 • サービス：「カスタム...」
 ◦ サーバー：rtmp://localhost:1935/stream
 ◦ ストリームキー： hello
 • 「配信開始」を押す

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

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