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
ImageFlux Live Streamingについて
Search
ImageFlux
September 25, 2018
Technology
0
32k
ImageFlux Live Streamingについて
ImageFlux
September 25, 2018
Tweet
Share
More Decks by ImageFlux
See All by ImageFlux
ImageFluxについて / CAMPHOR- 2021-12-18
imageflux
0
610
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
imageflux
1
3.3k
Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on
imageflux
2
18k
最高の購入体験を実現するための画像ダイナミックチューニング / ImageFlux meetup - Guest session #1
imageflux
3
18k
ImageFlux Live Streamingでサービス開発に集中する / ImageFlux meetup #2 - Guest Session #3
imageflux
0
5.8k
ImageFlux Updates 2018
imageflux
2
1.4k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
11k
Other Decks in Technology
See All in Technology
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
330
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
Lambda management with ecspresso and Terraform
ijin
2
130
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
11
2.7k
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
It's Worth the Effort
3n
185
28k
GitHub's CSS Performance
jonrohan
1031
460k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Embracing the Ebb and Flow
colly
86
4.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Side Projects
sachag
455
43k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Practical Orchestrator
shlominoach
190
11k
Transcript
ImageFlux Live Streaming pixiv Inc. Isamu Mogi 2018.9.25
• 自己紹介 • ImageFlux Live Streamingの概要 • ImageFlux Live Streamingによるライブ配信のやり方
• ImageFlux Live Streamingの変換処理の詳細 • デモ 2 目次
3 自己紹介 • 茂木 勇 • ピクシブ株式会社 ImageFlux事業部 エンジニア •
インターネット上では saturday06 という名前で活動 しています ◦ https://twitter.com/saturday06 ◦ https://github.com/saturday06 茂木 勇 エンジニア
4 ライブ動画配信を高速で実現するクラウドサービス Live Streaming
• モバイル含む、Webブラウザからプラグイン不要でライブ動画配信を開始 • HLS形式でブラウザ、アプリに配信 • hls.js, ExoPlayerなど一般的なHLSクライアントで再生可能 • 好きな解像度/品質にスケーリングして配信 •
WebRTCとHLSを組み合わせることで、低遅延と大規模配信を両立 5 ImageFlux Live Streaming
6 ImageFlux Live Streamingの概要図 配信者 視聴者 ImageFlux Live Streaming •
WebRTCで受け取った動画をHLSに変換して配信 ◦ WebRTC:非常に低遅延かつ、ブラウザからプラグインなしで動画配信可能 ◦ HLS:遅延が多めである代わりに、大規模配信が可能 ▪ iOSアプリに対して動画配信をする場合はこの形式を用いる必要がある WebRTC HLS
7 ImageFlux Live Streamingの概要図 配信者 視聴者 ImageFlux Live Streaming WebRTC
HLS この部分は、 WebRTC SFU Sora を用いて実現しています (後のセッションで株式会社時雨堂の@voluntasさんから解説あると思います)
1. 配信者のリクエストに応じて、配信チャンネル作成 APIを実行し、チャンネルIDと視聴URL を取得。 2. 配信者は 1. で得たチャンネルIDとSoraサーバーのURLを、SoraのSDKに渡すことで配信 を開始 3.
視聴者は 1. で得た視聴URLをHLSプレイヤーに渡すことで視聴を開始 8 配信のやり方
$ curl -H "Content-Type: application/json" \ -H "X-Sora-Target: ImageFlux_20180905.CreateChannel" \
-H "Authorization: Bearer $ACCESS_TOKEN" \ -XPOST -d ' { "hls": [ { "video": { "width": 640, "height": 480, "fps": 30, "bps": 1000000 }, "audio": { "bps": 64000 } } ] }' https://live-api.alpha.imageflux.jp/ 9 配信チャンネルを作るAPI
$ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ 10
配信チャンネルを作るAPI
$ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {
"channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 11 配信チャンネルを作るAPI
$ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {
"channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 12 配信チャンネルを作るAPI(配信側) 配信者は、この情報を SoraのSDKに渡して配信を開始する
$ curl ... -XPOST -d '{ ... }' https://live-api.alpha.imageflux.jp/ {
"channel_id": "<channel_id>", "sora_url": "ws://example.com:5000/signaling", "playlist_url": "https://example.com/hls/XXXX/XXXXXXXX.m3u8" } 13 配信チャンネルを作るAPI(視聴側) 視聴者はこのURLをHLS動画プレイヤーで再生
14 後ほどデモを行います!
- ImageFlux Live Streamingで用 いられているものと同様の構成 で、ライブ配信を実現 - 加えて、WebRTC SFU Soraとの
連携により、複数人同時配信・配 信者同士のリアルタイムコミュニ ケーションを実現 15 事例:pixiv Sketch LIVE
16 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
17 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• WebRTC SFU Soraが配信者とWebRTC通信を確立し、暗号化された通信を復号化する • 復号化により得たRTPストリームを後段へ流す ◦ これらの動作を、 WebRTC SFU
SoraのRTP転送機能を用いて実現している 18 変換(1/7) WebRTCの復号化
19 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• 前段から流れてきたRTPから、Opus音声を取り出す。 • 音声は、RTPパケットひとつにつきデフォルトで 20msづつ含まれるので、それを拾って次 段の音声トランスコーダーに流す。 20 変換(2/7) Opus音声の取り出し •
仕様書に沿ってOpus Payloadを拾って後段に流す
21 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• 前段から流れてきたRTPから、H.264映像を取り出す。 • 映像は、音声とは違い分割して送られてくることがあるため注意して復元 ◦ STAP-A形式: 一つのパケットに複数の動画フレームが存在する形式 ◦ FU-A形式: 複数のパケットから一つのフレームを作る方式
• 復元したら、次段の動画トランスコーダーに流す 22 変換(3/7) H.264映像の取り出し
• 例:STAP-A形式: 一つのパケットに複数の動画フレームが存在する形式 23 変換(3/7) H.264映像の取り出し
24 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• RTPでは音声と映像のタイムスタンプはそれぞれ違うランダムな時刻を開始時刻とする仕 様になっているため、RTPの受信側はそれをよしなに同期する必要がある ◦ 一般的にはRTCPというプロトコルと連携して同期を行うが、技術的な制約でいまのと ころその方式が使えない • 映像、音声各々のパケットのタイムスタンプと実際の受信時刻を見ながらタイムスタンプ、 フレームを次段の処理に流す。 •
映像が飛ぶのよりも音声が飛ぶほうが不快度が高いため、可能な限り音声のタイムスタン プはそのままにして映像のタイムスタンプを調整するようにする。 25 変換(4/7) 映像と音声の同期
26 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• 適切にバッファリングし、パケットが遅延しても再生が途切れなくなるようにする • 本システムでは、例えば500msまでの遅延を許容する場合「処理中のフレームのタイムス タンプを500ms未来のものであるとする」という方式を用いる。 ◦ 遅れずに来たパケットは、500ms遅延させてからから次に流す ◦ 100ms遅れて来たパケットは、400ms遅延させてから次に流す ◦
500ms遅れて来たパケットは、そのまま次に流す • Secure Reliable Transport プロトコルなどで用いられている方式 27 変換(5/7) バッファリング
• パケットの到達状況をみてバッファリング量を決める ◦ バッファリング量を増やすとパケットの遅延に強くなるが、再生の遅延が増える ◦ バッファリング量を減らすとパケットの遅延に弱くなるが、再生の遅延が減る 28 変換(5/7) バッファリング
29 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• RTPで送られてくる映像と音声を、APIで指定されたサイズやビットレートに変換を行う。 ◦ 映像はNVIDIA Tesla GPUに搭載されているNVENC/NVDECを利用して変換 ▪ 専用ハードウェアのため高速な変換を行うことができる ▪ ただ、大量にあるCUDAコアが丸々余っているので有効活用したい
... ◦ 音声はCPUで、libopusとlibmp3lameを使って変換 ▪ 音声はOpusからmp3へフォーマットの変換も行う 30 変換(6/7) トランスコード
31 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
• HLSとして動画を配信するため、動画ファイルを指定されたサイズに分割する • ただし、現行設定のmp3ファイルの音声の最小単位は24msのため、HLSのセグメントサイ ズは必ずしもAPIで指定されたサイズにならないことがある。 ◦ 例えばHLSのセグメントサイズを1秒とした場合、24msで割り切れないため実際には 984msか、1008msの動画ファイルができてしまう • 上記のセグメントサイズの平均が
APIで指定された値にできるだけ近づくように工夫をして いる。 • 最後に、出力された動画ファイルを HLSのプレイリストに追記する。 32 変換(7/7) HLSセグメント化
33 WebRTC から HLSへの変換 配信者 視聴者 1. WebRTCの復号化 2. Opus音声の取り出し
3. H.264映像の取り出し 4. 音声と映像の同期 5. バッファリング 6. トランスコード 7. HLSセグメント化
デモ 34
• モバイル含む、Webブラウザからプラグイン不要でライブ配信を開始 • HLS形式でブラウザ、アプリに配信 • hls.js, ExoPlayerなど一般的なHLSクライアントで再生可能 • 好きな解像度/品質にスケーリングして配信 •
WebRTCとHLSを組み合わせることで、低遅延と大規模配信を両立 35 ImageFlux Live Streaming まとめ