ライブ配信 サーバー 完全に理解した @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のサンプル HTTP Live Streaming Example

インデックス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!