More Related Content Similar to WebRTC SFU mediasoup sample (20) 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負荷：低め ○
• ブラウザ側はネットワーク負荷：中 △
表示レイアウトの
自由度が高い ◎
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
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は自分で明示的には生成しない
• 自動に生成され、イベントで渡される
※まだ良く分かっ
ていません…
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
