WebRTC Meetup Tokyo 13の資料です。 オープンソースのWebRTC用SFUであるmeidasoupを触ってみた話 サンプルのソースコードはこちら https://github.com/mganeko/mediasoup_sample

1. WebRTC Meetup Tokyo #13
OSSのSFU meidasoupを触ってみた
インフォコム株式会社
がねこまさし
@massie_g
1

2. 自己紹介
• がねこまさし / @massie_g
• インフォコム株式会社で、技術調査チームに所属
• WebRTC入門2016を HTML5Experts.jpに執筆
– https://html5experts.jp/series/webrtc2016/
• WebRTC Meetup Tokyo スタッフ見習い中
2

3. 今日のお題
• SFU : Selective forwarding Unit
• mediasoup : オープンソースのSFU モジュール
– Node.js用に開発
3

4. P2P と SFU:Selective Forwarding Unit
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
P2Pの場合
• サーバ不要 ◎
• ブラウザ側の
• CPU負荷：高 ×
• ネットワーク負荷：高 ×
4
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
SFU
映像・音声
を分岐/配信
SFUの場合
• SFUサーバ必要 → CPU負荷：低 ○
• ブラウザ側はCPU負荷：低め ○
• ブラウザ側はネットワーク負荷：中 △
表示レイアウトの
自由度が高い ◎

5. MCU と SFU
5
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
SFU
映像・音声
を分岐/配信
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
MCU
映像・音声
を合成
MCUの場合
• MCUサーバ必要 → CPU負荷：激高 ××
• ブラウザ側はCPU/ネットワーク負荷：低 ◎
SFUの場合
• SFUサーバ必要 → CPU負荷：低 ○
• ブラウザ側はCPU負荷：低め ○
• ブラウザ側はネットワーク負荷：中 △
表示レイアウトの
自由度が高い ◎

6. 圧縮と暗号化
6
Browser
いらすとや http://www.irasutoya.com/
BrowserP2P
圧縮/エンコード
暗号化
通信 復号化
解凍/デコード
TURN Browser
TURN Browser
SFU
MCU
Browser SFU Browser
Browser MCU Browser

7. 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

8. mediasoupとは？ (2)
• ミニマム … メディアのみ、かつSFUなのでコーデックは処理しない
• パワフル … 実体は C++ で記述、libuv 利用
– Node.js から起動された子プロセスで通信を担当
– Node.js とはプロセス間通信でやりとり
• JavaScript API を提供
– WebRTC 1.0 … RTCPeerConnection
– ORTC … Transport, RtpSender, RtpReceiver
8

9. mediasoup サンプル Demo
9
• 複数人の双方向通信
– 映像/音声
– 見た目P2Pと変わらないけど…
• SFUサーバーを止めると、映像も停止
• ソースコード
– https://github.com/mganeko/mediasoup_sample

10. 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

11. mediasoup のオブジェクト構造(1)
11
Server
Room
Room
Room
Peer
Peer
Peer Transport
Transport
RtpSender
RtpSender
RtpSender
RtpReceiver
RtpReceiver
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-mux
multi-stream

12. mediasoup のRoomの構造（推測）
12
Room
Peer
RtpReceiver
RtpSender
Browser Browser
Peer
RtpReceiver
RtpSender
Peer
Browser
RtpReceiver RtpSender
RtpSender RtpSender
RtpSender
Room内のmediaの
流れは自動に組み
立てられる（らしい）
Transport
Transport
Transport

13. mediasoupのプロセス
13
デフォルトは
コア数分
1つのRoom
5つのPeerの時
1つのRoomは
同じworkerに？

14. 利用のイメージ
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は自分で明示的には生成しない
• 自動に生成され、イベントで渡される
※まだ良く分かっ
ていません…

15. mediasoup のオブジェクト構造(2)
15
Server
Room
Room
Room
Peer
Peer
Peer
RTCPeerConnection
・ 1つのRTCPeerConnectionと、1つのPeerが対応
→ Offer/Answerのやり取りで通信を確立できる
RTCPeerConnection
RTCPeerConnection

16. 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()

17. 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 を自分で組み立てれば、できる（はず）

18. mediasoup その他の制約
• mediasoupは NAT/Firewallの外に置く必要あり
– mediasoupはSTUN/TURNを必要としない環境に置く
• ブラウザが NAT/Firewallの中にあるケースはOK
– ブラウザがSTUN/TURNを利用するのはOK
18
mediasoup
Browser
STUN
Browser TURN
NAT
Firewall

19. まとめ
• WebRTCの主戦場は P2P → MCU → SFU に
• 現在鋭意開発中の mediasoup は、今後も要注目
– SFUを組み込んだアプリケーションを自分でも作れるように
• もちろん、高機能、高安定性は商用製品が有力
• 本日のプレゼン資料は SlideShareに
– http://www.slideshare.net/mganeko/webrtc-sfu-mediasoup-sample
• ソースコードは GitHubに
– https://github.com/mganeko/mediasoup_sample 19

20. WebRTC もくもく会 2/6(月) 19:00～22:00
• https://connpass.com/event/47474/
• 最近WebRTC始めた方、これからWebRTCを深めていこうという方
• 「WebRTCのここがよかった」「ここが好きになった」「ここがひっかかりやす
い」などの知見を知りたい方
• 基本は自分でやってみるスタイル ← 仲さん、がねこがサポートします
– 初めての人には過去のハンズオンをやってみるのがお勧め！
– http://qiita.com/yusuke84/items/de9f0f6d221acec6fc07
• ご参加お待ちしています！
20

21. Thank you!
21