WebRTC SFUの mediasoup を Raspberry pi 3 で動かしてみた話です。WebRTC Meetup Tokyo #16, WebRTC Meetup Osaka #1 向けの資料です

1. meidasoup on Raspberry Pi 3
WebRTC Meetup Tokyo #16 LT
WebRTC Meetup Osaka #1 LT
インフォコム株式会社
がねこまさし
@massie_g
2017.08.25
1

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

3. 今日のお題
• 前々回(#13)の復習
– SFU : Selective forwarding Unit
– mediasoup : オープンソースのSFU モジュール
• Raspberry Pi 3で動かしてみた
3

4. 前々回(#13)の復習
※使いまわし
4

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

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

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

8. mediasoupとは？
• オープンソースのSFU
– サイト https://mediasoup.org/
– GitHub https://github.com/ibc/mediasoup/ → https://github.com/versatica/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サーバーやシグナリングの仕組みは、自分で用意する必要あり
8

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

10. mediasoup サンプル
10
• ソースコード
– https://github.com/mganeko/mediasoup_sample
• 内容
– 複数人双方向
– 片方向配信（ちょっと手抜き）
– SSL対応版もあり

11. mediasoup のインストール
• 前提環境
– Node.js v4.8.0 以上
– Linux / Mac OS X ※Windowsは未サポート
– Python 2.x （ビルド時のみ）
• pyenv / virtualenv利用時は要注意。明示的なローカルPythonのバージョン指定が必要
• $ pyenv local 2.7.12
– make
– gcc & g++ または clang, with C++11
• インストール
– $ npm install mediasoup
• C++のコンパイルあり、数分から数十分でビルド→インストール完了
11

12. Raspberry Pi 3 で動かしてみた
12

13. Raspberry Pi 3
• 質問
– 知っていますか？
– 持っていますか？
• こんなやつです →
– ARMv8 - 4 Core, 1.2 GHz
– RAM 1GB
– 6000円ぐらい
13

14. mediasoupのビルドの準備
• OS: RASPBIAN JESSIE WITH PIXEL
– https://www.raspberrypi.org/downloads/raspbian/
• ビルドに必要な環境
– Python 2.x … Python 2.7.x
– make … GNU Make 4.0
– C/C++ … gcc version 4.9.2
14

15. mediasoupのビルド（含 サンプル）
# サンプルを含む、必要モジュールの取得とビルド
git clone https://github.com/mganeko/mediasoup_sample.git
npm install
# → 20分程度でビルド完了
# 実行
node mediasoup_sample_multi.js
# その後 PC/Mac から接続
15

16. デモ
• Raspberry Pi 3 で mediasoup のサンプル起動
• Mac のFirefox, Chromeから接続
– http://raspi3.local:3000/
– 双方向で繋がる
• mediasoupを停止すると、映像も停止
16

17. 動かしてみて
• CPU負荷 … 5人で25%程度
– 少人数なら使えそう
– CPUよりも先に、WiFiがいっぱいいっぱいに…
• 意外とちょくちょくP2Pが切れる
– oniceconnectionstatechange で disconnected
– → ちょっと待てば繋がる
17

18. ちょっとした工夫：madiasoup編
• Bandwidthを制限したら、ネットワーク負荷が軽くなる？
– mediasoupではmaxBitrate
// 500kbps に制限
let peerconnection = new RTCPeerConnection({
peer : peer,
usePlanB : planb,
maxBitrate: 500000
});
// → 制限は効いている。効果は良く分らない（やっぱり時々固まる）
18

19. ちょっとした工夫：Chrome編
• 今回 Raspberry Pi 3 のサーバは http:// ～
– Web / シグナリング / mediasoup
• Chromeでは、getUserMedia()できない
• → Webサーバーだけ、PC/Macのローカルに立てる
– HTMLを、ローカルにもコピーしておく
• ※WebSocketの接続先はRasberry Pi 3になるように修正
19

20. ちょっとした工夫：Chrome編
20
Rasberry Pi 3
WebSocket サーバー
mediasoup サーバー
PC / Mac
Web サーバー
Chrome
HTTP
(localhost)WebSocket
WebRTC
(UDP)
Web サーバー

21. ちょっとした工夫：ソフト編
• Raspberry Pi 3 のIPアドレスが分かるように
– DHCPで動的に取得している → コンソールが無いとIPアドレスが分からない
• avahi を導入 … Zeroconf 仕様の実装
– Mac で言う「Bonjour」のこと 。mDNSを利用 (5353/UDPのマルチキャスト）
– sudo apt-get install avahi-daemon
• ※OSセットアップ時にすでに導入されていた
• 参考 http://d.hatena.ne.jp/pasela/20131023/mdns
– ホスト名が「raspi3」なら → Macから 「raspi3.local」 で名前解決できる
• ping raspi3. local
• ssh raspi3.local
• http://raspi3.local:3000/ , ws://raspi3.local:3001/
21

22. ちょっとした工夫：ハード編
• IPアドレスが「ひと目」で分かるように
• Apple Pi ボードを利用
– トランジスタ技術 2016年8月号 ふろく（基盤のみ）
• http://bit-trade-one.co.jp/product/module/adcq1608p/
• 液晶、ボタン ← 今回使ったのはこれだけ
• D-Aコンバーター、温度/湿度/気圧センサー、赤外線リモコン
– 完成品も販売中 … 6000円程度
• http://eleshop.jp/shop/g/gG78311/
• ボタンの監視
– Python で記述、（割り込みではなく）1秒ごとのポーリング （手抜き）
– [IPアドレス表示]、[リブート]、[シャットダウン]
22

23. シャットダウン デモ
• Raspberry Pi 3 で mediasoupを起動
• PC/Mac から接続
• Raspberry Pi 3 / Apple Pi のボタンを押して
– シャットダウン
• 2 … 1 … 0 …
23

24. まとめ
• mediasoup は、LinuxであればARMでも動く
– Raspberry Pi 3 でも動く
– きっと、他のボードでも動く
– ※ CPUよりもネットワークの性能がボトルネックになる可能性あり
• 本日のプレゼン資料は SlideShareに
– https://www.slideshare.net/mganeko/webrtc-sfu-mediasoup-sample-update
• ソースコードは GitHubに
– https://github.com/mganeko/mediasoup_sample
24

25. Thank you!
25