WebRTC Meetup Tokyo #13 OSS の SFU meidasoup のののののの のののののののののの のののののの @massie_g 1
WebRTC Meetup Tokyo #13OSS の SFU meidasoup を触ってみた
インフォコム株式会社がねこまさし@massie_g
1
自己紹介• がねこまさし / @massie_g
• インフォコム株式会社で、技術調査チームに所属• WebRTC 入門 2016 を HTML5Experts.jp に執筆
– https://html5experts.jp/series/webrtc2016/
• WebRTC Meetup Tokyo スタッフ見習い中
2
今日のお題• SFU : Selective forwarding Unit
• mediasoup : オープンソースの SFU モジュール– Node.js 用に開発
3
P2P と SFU:Selective Forwarding Unit
ブラウザA
ブラウザB
ブラウザD
ブラウザC
P2P の場合• サーバ不要 ◎• ブラウザ側の
• CPU 負荷:高 ו ネットワーク負荷:高 ×
4
ブラウザA
ブラウザB
ブラウザD
ブラウザC
SFU映像・音声を分岐 / 配信
SFU の場合• SFU サーバ必要 → CPU 負荷:低 ○• ブラウザ側は CPU 負荷:低め ○• ブラウザ側はネットワーク負荷:中 △
表示レイアウトの自由度が高い ◎
MCU と SFU
5
ブラウザA
ブラウザB
ブラウザD
ブラウザC
SFU映像・音声を分岐 / 配信
ブラウザA
ブラウザB
ブラウザD
ブラウザC
MCU
映像・音声を合成
MCU の場合• MCU サーバ必要 → CPU 負荷:激高 ×ו ブラウザ側は CPU/ ネットワーク負荷:低 ◎
SFU の場合• SFU サーバ必要 → CPU 負荷:低 ○• ブラウザ側は CPU 負荷:低め ○• ブラウザ側はネットワーク負荷:中 △
表示レイアウトの自由度が高い ◎
圧縮と暗号化
6
Browser
いらすとや http://www.irasutoya.com/
BrowserP2P
圧縮 / エンコード
暗号化 通信 復号化
解凍 / デコード
TURN Browser TURN Browser
SFU
MCU
Browser SFU Browser
Browser MCU Browser
mediasoup とは?• オープンソースの SFU
– サイト https://mediasoup.org/
– GitHub https://github.com/ibc/mediasoup/
• 独立したサーバーではなく、部品– Instead of creating yet another opinionated server, mediasoup is a Node.js module
which can be integrated into a larger application or made standalone with just a few
lines of JavaScript.
– 「他のアプリに組み込める」• Node.js 用モジュールとして提供
– Web サーバーやシグナリングの仕組みは、自分で用意する必要あり7
mediasoup とは? (2)
• ミニマム … メディアのみ、かつ SFU なのでコーデックは処理しない
• パワフル … 実体は C++ で記述、 libuv 利用– Node.js から起動された子プロセスで通信を担当– Node.js とはプロセス間通信でやりとり
• JavaScript API を提供– WebRTC 1.0 … RTCPeerConnection
– ORTC … Transport, RtpSender, RtpReceiver
8
mediasoup サンプル Demo
9
• 複数人の双方向通信– 映像 / 音声– 見た目 P2P と変わらないけど…
• SFU サーバーを止めると、映像も停止• ソースコード– https://github.com/mganeko/mediasoup_sample
mediasoup のインストール• 前提環境
– Node.js v4.0.0 以上– Linux / Mac OS X ※ Windows は未サポート– Python 2.x ※要注意– make
– gcc & g++ または clang with C++11
• インストール– $ npm install mediasoup
• C++ のコンパイルあり、数分から数十分でビルド→インストール完了10
mediasoup のオブジェクト構造 (1)
11
Server
RoomRoom
Room
PeerPeer
Peer TransportTransport
RtpSenderRtpSender
RtpSender
RtpReceiverRtpReceiver
RtpReceiver・ 1 つの Server に複数の Room・ 1 つの Room に複数の Peer
・ 1 つの Peer に複数の RtpSender・ 1 つの Peer に複数の RtpReceiver・ 1 つの Peer に複数の Transport
MediaTrack に対応 (video/audio)
MediaTrack に対応 (video/audio)
通信ポートに対応(UDP/TCP)
1 つの Transport を・複数の RtpSender・複数の RtpReceiverで利用可能BUNDLE, rtcp-muxmulti-stream
mediasoup の Room の構造(推測)
12
RoomPeer
RtpReceiver
RtpSenderBrowser Browser
Peer
RtpReceiver
RtpSender
Peer
Browser
RtpReceiver RtpSender
RtpSender RtpSender
RtpSender
Room 内の media の流れは自動に組み立てられる(らしい)Tr
ansp
ort Transport
Transport
mediasoup のプロセス
13
デフォルトはコア数分
1 つの Room5 つの Peer の時
1 つの Room は同じ workerに?
利用のイメージlet server = mediasoup.Server();let peer1;let receiver1;return server.createRoom(roomOptions).then( (room) => { peer1 = room.Peer('alice'); return peer.setCapabilities(peerCapabilities);}).then(() => { return peer.createTransport({ tcp: false });}).then((transport) => { rtpReceiver1 = peer1.RtpReceiver('audio', transport);})
14
• 順番に自分でオブジェクトを組み立てる• Promise ベース• RtpSender は自分で明示的には生成しない
• 自動に生成され、イベントで渡される
※ まだ良く分かっていません…
mediasoup のオブジェクト構造 (2)
15
Server
RoomRoom
Room
PeerPeer
Peer
RTCPeerConnection
・ 1 つの RTCPeerConnection と、 1 つの Peer が対応→ Offer/Answer のやり取りで通信を確立できる
RTCPeerConnectionRTCPeerConnection
RTCPeerConenctionを使った流れ
16
Browser A
RTCPeerConnection
mediasoup
RTCPeerConnection A
Browser B
send offer SDP
send offer SDP
send answer SDP
send answer SDP
onnegotiationneeded() 発火onnegotiationneeded() 発火
RTCPeerConnection B RTCPeerConnection
send answer SDP
onaddstream() / ontrack() 発火
send offer SDP send offer SDP
send answer SDP
onaddstream() / ontrack() 発火
createOffer()
createAnswer()
createOffer()
createAnswer()
createOffer()
createAnswer()
createOffer()
createAnswer()
RTCPeerConnection の現状の制約• 最初の Offer をリモートから(ブラウザから)受け取る必要がある
– Currently, the mediasoup implementation of RTCPeerConnection requires that the initial
offer comes from the remote endpoint,
• その後、 onnegotiationneeded() 発火後に Offer を生成させる
• 通信確立後、リモート側での Offer 再生成には対応していない– リモート側での stream / track 追加、削除には対応していない
• Chrome が採用している Plan B には暫定的な対応
17
あくまで RTCPeerConnection の制限( mediasoup の実力の 10% ??)Transport, RtpReceiver, SDP を自分で組み立てれば、できる(はず)
mediasoup その他の制約• mediasoup は NAT/Firewall の外に置く必要あり
– mediasoup は STUN/TURN を必要としない環境に置く• ブラウザが NAT/Firewall の中にあるケースは OK
– ブラウザが STUN/TURN を利用するのは OK
18
mediasoup
BrowserSTUN
Browser TURN
NAT
Firewall
まとめ• WebRTC の主戦場は P2P → MCU → SFU に• 現在鋭意開発中の mediasoup は、今後も要注目
– SFU を組み込んだアプリケーションを自分でも作れるように• もちろん、高機能、高安定性は商用製品が有力• 本日のプレゼン資料は SlideShare に
– http://www.slideshare.net/mganeko/webrtc-sfu-mediasoup-sample
• ソースコードは GitHub に– https://github.com/mganeko/mediasoup_sample 19
WebRTC もくもく会 2/6(月 ) 19:00~ 22:00
• https://connpass.com/event/47474/
• 最近WebRTC始めた方、これから WebRTC を深めていこうという方• 「 WebRTC のここがよかった」「ここが好きになった」「ここがひっ
かかりやすい」などの知見を知りたい方• 基本は自分でやってみるスタイル ← 仲さん、がねこがサポートしま
す– 初めての人には過去のハンズオンをやってみるのがお勧め!– http://qiita.com/yusuke84/items/de9f0f6d221acec6fc07
• ご参加お待ちしています!20
Thank you!
21