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