Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ライブ配信サーバー完全に理解した
Search
Kazuyuki Mori
May 26, 2022
Technology
2
700
ライブ配信サーバー完全に理解した
"エンジニア達の「〇〇完全に理解した」Talk #29" で発表したLT
https://easy2.connpass.com/event/247539/
Kazuyuki Mori
May 26, 2022
Tweet
Share
More Decks by Kazuyuki Mori
See All by Kazuyuki Mori
BitMech 探索的 トレーディングシステム fin-py study #1
mainyaa
0
38
GoPiGo2で遊んでみた
mainyaa
0
26
Electron(旧atom shell)基礎+入門
mainyaa
0
34
Docker基礎+Docker0.9/0.10概要
mainyaa
0
23
Docker基礎+docker0.9, 0.10概要
mainyaa
0
46
Other Decks in Technology
See All in Technology
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
880
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
270
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
150
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
140
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.1k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
360
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.5k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
440
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
The Cult of Friendly URLs
andyhume
78
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
Statistics for Hackers
jakevdp
797
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Practical Orchestrator
shlominoach
186
10k
What's in a price? How to price your products and services
michaelherold
244
12k
Git: the NoSQL Database
bkeepers
PRO
427
65k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
ライブ配信 サーバー 完全に理解した @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とは • アダプティブストリーミングに対応 ◦ 視聴者の帯域幅に合わせて動的に画質を変える機能 ◦ モバイルで嬉しい • 3~6秒の遅延がある ◦
遅延=配信から視聴までのラグ ◦ 快適なコミュニケーションにはちょっとつらい
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!