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を組み込んだアプリケーションを自分でも作れるように ? もちろん、高機能、高安定性は商用製品が有力 ? 本日のプレゼン資料は 狠狠撸Shareに – 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