![ちょっとした工夫：ハード編
• 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](https://image.slidesharecdn.com/webrtcmediasouponraspberrypi3-170824045828/85/WebRTC-mediasoup-on-raspberrypi3-22-320.jpg)
WebRTC mediasoup on raspberrypi3
- 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
- 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