WebRTC SFU 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
- 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
- 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