SlideShare a Scribd company logo
1 of 21
Download to read offline
SFUの話
tnoho
自己紹介
tnoho
• 某通信会社 新卒入社3年目
• Web会議システムMCUサーバ担当
• Androidエンジニア → Javaエンジニア
• 趣味は電子工作
WebRTCは Native Client / SFU / MCU を比較的よく調べています。
まあ、間も開いたのでおさらいから…
WebRTCは…
• リアルタイム通信をブラウザで行う技術です
• Javascriptで利用でき、映像はVideoタグから出せます
ブラウザで映像・音声通話ができるなんてすばらしい!
この技術を使った新しいサービスを作ろう!
あれ?5人くらいしかつなげなくない?
問題の原因はP2Pであるゆえの通信量と負荷
• WebRTCは標準で1人当たり2Mbps
• 4人でつなげば6Mbps必要
• 動画エンコードに暗号化と処理が高負荷
WebRTCを利用したサービスを作ると必ずぶつかる問題 A
C D
B
モバイル端末には特に辛い。この問題を解決するのが SFU / MCU
MCU (Multi-point Control Unit)
サーバーサイドで映像加工を行う仕組み
• メリット
• PeerConnectionは一本でよい
• サーバーでデコードするため異種接続可
• 自動応答や動画再生も可能
• デメリット
• 画質の劣化が発生する
• サーバー負荷が非常に高い
• Videoが結合されて送られるため、
参加者ごとに別枠表示や拡大は難しい
MCU
A B C D
A B C D
デコード
エンコード
結合
A B
C D
A B C D
1フレームに
4人を収める
A B
C D
A B
C D
A B
C D
A B
C D
SFU (Selective Forwarding Unit)
サーバーが配信を代行する仕組み
• メリット
• クライアントはSFUにだけ、映像を送ればよい
• サーバー負荷がMCUに比べ非常に低い
• 個別の映像で来るため、Videoタグを分けて
自由なレイアウトが可能
• デメリット
• デコードの数は変わらず端末負荷がある
• 仕組みとして複雑なため、実装も複雑になる
MCU
A
C D
B
SFU
A
B C D
分配のみ
A A A
WebRTC接続方式の種類(まとめ)
SFU (Selective Forwarding Unit)
クライアントはサーバと通信する。上りは一本で良くなる
すべての通信がサーバを経由するためサーバの通信速度がネックになる
実装に高い理解を要する非常に難しいアーキテクチャ
表示人数分デコードするためモバイルでは多人数では負荷が高い
P2P (WebRTC自体はこれが前提)
もっとも高解像度で自由度も高い
全員と送受信するため通信量とクライアント負荷が大きい
モバイルの場合は少人数でも非常に負荷が高くなる
MCU (Multi-point Control Unit)
映像/音声をサーバで合成する。録画再生も行うこともできる
参加人数が増えても負荷や通信量が増えない(モバイルでも多人数可)
レイアウトの自由度が失われる
サーバに負荷が集中するため、そこがネックになる(高スペック要)
SFU (Selective Forwarding Unit)
P2P (WebRTC自体はこれが前提)
MCU (Multi-point Control Unit)
クライアント サーバ
クライアント サーバ
クライアント サーバ
わかりやすく書くと
商用 SFU 商用 MCU
OSS MCUOSS SFU
WebRTC SFU / MCUの代表例
このあたりはSIP向けなら
イロイロあります
前置きが長くなりましたが、今回はSFUの話…
SFU (Selective Forwarding Unit)
サーバーが配信を代行する仕組み
SFU
A
B C D
PeerConnectionは
SFUとクライアント間で張る
A A A
SFUは
配信しかしない
クライアントは
配信者の映像を
受け取る
配信のみの場合はHLS (Http Live Streaming) が存在する
SFUの抱える問題点
WebRTCは通信状況や端末負荷に応じて細かく制御されている
複数人と繋いだ場合は、一番状況の悪い人に合わせざるを得ない
⇒結果、映像音声品質が悪化する (どこで切り捨てるかはSFU次第)
SFU
A
B C D
A A A
A
B
A
解像度下げてよ
パケットかけたよ
キーフレーム送って
転送だけだと全員からくるRTCP Feedback
映像品質低下を避ける技術
SFU
A B
C D
送信者 有線
WiFi携帯
SFU
A B
C D
送信者 有線
WiFi携帯
赤い電車が走ってきた。
駅のホームに。
汽笛をならして。
赤い電車が走ってきた。
駅のホームに。
汽笛をならして。
赤い電車が走ってきた。
駅のホームに。
赤い電車が走ってきた。
simulcast SVC
送信者が複数サイズの映像をSFUに送る
→送信者の負荷が高い
送信者がSVCコーデック映像をSFUに送る
→特許技術
SFUが受信相手の状況を把握して、送るパケットを変えるしかない
MultiStream(MultiTrack)
複数の映像音声を一本のPeerConnectionに入れる機能
SFU
A B
C D
SFU
A B
C D
張ってあるConnectionにメディアを追加するため、接続処理が不要
MultiStreamなし MultiStreamあり
しかし、MultiStreamの実装が難しい
今のところブラウザで挙動差異があるし、SDPも読めないといけないし…
Javascriptだけならともかく、ネイティブでまでこれをやるのは若干憂鬱…
ユーザー
PeerConnection
<video>
ユーザー
<video> <video>
ユーザー ユーザー
<video><video>
MultiStreamなし MultiStreamあり
ユーザー単位の括りではなくなる
SDP
PeerConnection
jvb-module
部屋管理
Jitsi Video Bridgeをnodeで動かす
Jitsi Video Bridge (SFU)
node
jvb module
Socket.IO
Browser
RESTful (Colibri)
WebSocket
作った
SDP解析
Colibri生成
SDP生成
Colibri解析
SSRC-ユーザー紐づけ
JVBはXMPPサーバとセットで動かす前提 ⇒ Socket.IOにしたかった
インターフェイス
新規参加者
ダミーSDP Offer
参加者ブラウザ側処理
SDP Answer解析
ssrc-user紐づけ
Colibri生成
Jvb側処理
Colibri解析
SDP生成
全員にSDP Offer
全員ブラウザ側処理
新規ストリーム追加完了
Jitsi video bridgeのソースコード読んで作りました…
JVBの自主メンテはおすすめしません…
まとめ
SFU が入ってくるとWebRTCはもっと難しい
SDKで簡単に利用したい!
端末
SFU/MCUの力を借りれば
非力なハードウェアでも配信することが可能になる
端末
動画エンコーダー(圧縮)
暗号化 暗号化 暗号化
B C D
通信帯域
SFU/MCU
動画エンコーダー(圧縮)
ハードウェアが代行
暗号化 暗号化 暗号化
B C D
復号
暗号化
ハードウェアエンコーダー対応
WebRTC Native Library (ChromeのWebRTC部分) では
かなり対応が進んでいる(意図しなくても使えている)
• iOS ⇒ H.264 HW Encoderに対応
• Android ⇒ 端末依存(H.264, VP8に対応)
• RaspberryPi ⇒ H.264 HW Encoder 搭載!が対応はしていない
⇒というわけで、自分で書いて対応させてみた!(っていう話をどこかでしたい
これらを使えば、電池の寿命を延ばすことができる
EOF

More Related Content

What's hot

ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けモノビット エンジン
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたmganeko
 
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版WebRTCの技術解説 公開版
WebRTCの技術解説 公開版Contest Ntt-west
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~UnityTechnologiesJapan002
 
C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用するC++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する祐司 伊藤
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup samplemganeko
 
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術Yoshiaki Sugimoto
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-Yusuke Naka
 
コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線Motonori Shindo
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホンYou_Kinjoh
 
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!Yusuke Naka
 
WebRTC multitrack / multistream
WebRTC multitrack / multistreamWebRTC multitrack / multistream
WebRTC multitrack / multistreammganeko
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編infinite_loop
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねmganeko
 
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装tnoho
 
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例Naoya Kishimoto
 
C言語なWebSocketの遊び方。
C言語なWebSocketの遊び方。C言語なWebSocketの遊び方。
C言語なWebSocketの遊び方。Masahiko Hashimoto
 
ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術Yusuke Goto
 
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 tnoho
 

What's hot (20)

ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
 
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
 
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
 
C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用するC++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
 
HTTP/2 入門
HTTP/2 入門HTTP/2 入門
HTTP/2 入門
 
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
 
コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホン
 
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
 
WebRTC multitrack / multistream
WebRTC multitrack / multistreamWebRTC multitrack / multistream
WebRTC multitrack / multistream
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
 
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
 
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
 
C言語なWebSocketの遊び方。
C言語なWebSocketの遊び方。C言語なWebSocketの遊び方。
C言語なWebSocketの遊び方。
 
ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術
 
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
 

Similar to SFUの話

ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るKensaku Komatsu
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装Yuta Suzuki
 
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞Ryosuke Otsuya
 
we are javascript LTの資料4
we are javascript LTの資料4we are javascript LTの資料4
we are javascript LTの資料4Yuuta Moriyama
 
Infocom webrtc conference japan
Infocom webrtc conference japanInfocom webrtc conference japan
Infocom webrtc conference japanmganeko
 
websocket-survery
websocket-surverywebsocket-survery
websocket-surveryhogemaru_
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたNishoMatsusita
 
レポート
レポートレポート
レポートxin song
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )Kensaku Komatsu
 
レポート
レポートレポート
レポートxin song
 
Webrtc最新動向
Webrtc最新動向Webrtc最新動向
Webrtc最新動向Yusuke Naka
 
WebRTCについて
WebRTCについてWebRTCについて
WebRTCについてBeMarble
 
はじめてのWeb of Things
はじめてのWeb of ThingsはじめてのWeb of Things
はじめてのWeb of ThingsSaki Homma
 
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9Shintaro Tanaka
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまでMasataka Suzuki
 

Similar to SFUの話 (20)

ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
 
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞
 
8th jan 2013_wotconf
8th jan 2013_wotconf8th jan 2013_wotconf
8th jan 2013_wotconf
 
we are javascript LTの資料4
we are javascript LTの資料4we are javascript LTの資料4
we are javascript LTの資料4
 
Infocom webrtc conference japan
Infocom webrtc conference japanInfocom webrtc conference japan
Infocom webrtc conference japan
 
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボットWebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
 
WebRTC の紹介
WebRTC の紹介WebRTC の紹介
WebRTC の紹介
 
5jCup WebRTC賞
5jCup WebRTC賞5jCup WebRTC賞
5jCup WebRTC賞
 
websocket-survery
websocket-surverywebsocket-survery
websocket-survery
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
Web rtcの使い方
Web rtcの使い方Web rtcの使い方
Web rtcの使い方
 
レポート
レポートレポート
レポート
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
 
レポート
レポートレポート
レポート
 
Webrtc最新動向
Webrtc最新動向Webrtc最新動向
Webrtc最新動向
 
WebRTCについて
WebRTCについてWebRTCについて
WebRTCについて
 
はじめてのWeb of Things
はじめてのWeb of ThingsはじめてのWeb of Things
はじめてのWeb of Things
 
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9
MistCDNの概要 / Technical Session - WebRTC Meetup Tokyo #9
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
 

SFUの話