KEMBAR78
WebRTC mediasoup on raspberrypi3 | PPTX
meidasoup on Raspberry Pi 3
WebRTC Meetup Tokyo #16 LT
WebRTC Meetup Osaka #1 LT
インフォコム株式会社
がねこまさし
@massie_g
2017.08.25
1
自己紹介
• がねこまさし / @massie_g
• インフォコム(株)の技術調査チームに所属
• WebRTC Meetup Tokyo スタッフ
• WebRTC Begginers Tokyo スタッフ
• WebRTC入門2016を HTML5Experts.jpに執筆
– https://html5experts.jp/series/webrtc2016/
2
今日のお題
• 前々回(#13)の復習
– SFU : Selective forwarding Unit
– mediasoup : オープンソースのSFU モジュール
• Raspberry Pi 3で動かしてみた
3
前々回(#13)の復習
※使いまわし
4
P2P と SFU:Selective Forwarding Unit
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
P2Pの場合
• サーバ不要 ◎
• ブラウザ側の
• CPU負荷:高 ×
• ネットワーク負荷:高 ×
5
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
SFU
映像・音声
を分岐/配信
SFUの場合
• SFUサーバ必要 → CPU負荷:低 ○
• ブラウザ側はCPU負荷:低め ○
• ブラウザ側はネットワーク負荷:中 △
表示レイアウトの
自由度が高い ◎
MCU と SFU
6
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
SFU
映像・音声
を分岐/配信
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
MCU
映像・音声
を合成
MCUの場合
• MCUサーバ必要 → CPU負荷:激高 ××
• ブラウザ側はCPU/ネットワーク負荷:低 ◎
SFUの場合
• SFUサーバ必要 → CPU負荷:低 ○
• ブラウザ側はCPU負荷:低め ○
• ブラウザ側はネットワーク負荷:中 △
表示レイアウトの
自由度が高い ◎
圧縮と暗号化
7
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/ → 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
mediasoupとは? (2)
• ミニマム … メディアのみ、かつSFUなのでコーデックは処理しない
• パワフル … 実体は C++ で記述、libuv 利用
– Node.js から起動された子プロセスで通信を担当
– Node.js とはプロセス間通信でやりとり
• JavaScript API を提供
– WebRTC 1.0 … RTCPeerConnection, promise利用
– ORTC … Transport, RtpSender, RtpReceiver
9
mediasoup サンプル
10
• ソースコード
– https://github.com/mganeko/mediasoup_sample
• 内容
– 複数人双方向
– 片方向配信(ちょっと手抜き)
– SSL対応版もあり
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
Raspberry Pi 3 で動かしてみた
12
Raspberry Pi 3
• 質問
– 知っていますか?
– 持っていますか?
• こんなやつです →
– ARMv8 - 4 Core, 1.2 GHz
– RAM 1GB
– 6000円ぐらい
13
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
mediasoupのビルド(含 サンプル)
# サンプルを含む、必要モジュールの取得とビルド
git clone https://github.com/mganeko/mediasoup_sample.git
npm install
# → 20分程度でビルド完了
# 実行
node mediasoup_sample_multi.js
# その後 PC/Mac から接続
15
デモ
• Raspberry Pi 3 で mediasoup のサンプル起動
• Mac のFirefox, Chromeから接続
– http://raspi3.local:3000/
– 双方向で繋がる
• mediasoupを停止すると、映像も停止
16
動かしてみて
• CPU負荷 … 5人で25%程度
– 少人数なら使えそう
– CPUよりも先に、WiFiがいっぱいいっぱいに…
• 意外とちょくちょくP2Pが切れる
– oniceconnectionstatechange で disconnected
– → ちょっと待てば繋がる
17
ちょっとした工夫:madiasoup編
• Bandwidthを制限したら、ネットワーク負荷が軽くなる?
– mediasoupではmaxBitrate
// 500kbps に制限
let peerconnection = new RTCPeerConnection({
peer : peer,
usePlanB : planb,
maxBitrate: 500000
});
// → 制限は効いている。効果は良く分らない(やっぱり時々固まる)
18
ちょっとした工夫:Chrome編
• 今回 Raspberry Pi 3 のサーバは http:// ~
– Web / シグナリング / mediasoup
• Chromeでは、getUserMedia()できない
• → Webサーバーだけ、PC/Macのローカルに立てる
– HTMLを、ローカルにもコピーしておく
• ※WebSocketの接続先はRasberry Pi 3になるように修正
19
ちょっとした工夫:Chrome編
20
Rasberry Pi 3
WebSocket サーバー
mediasoup サーバー
PC / Mac
Web サーバー
Chrome
HTTP
(localhost)WebSocket
WebRTC
(UDP)
Web サーバー
ちょっとした工夫:ソフト編
• 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
ちょっとした工夫:ハード編
• 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
シャットダウン デモ
• Raspberry Pi 3 で mediasoupを起動
• PC/Mac から接続
• Raspberry Pi 3 / Apple Pi のボタンを押して
– シャットダウン
• 2 … 1 … 0 …
23
まとめ
• 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
Thank you!
25

WebRTC mediasoup on raspberrypi3

  • 1.
    meidasoup on RaspberryPi 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.
  • 5.
    P2P と SFU:SelectiveForwarding 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.
  • 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: RASPBIANJESSIE 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のビルド(含 サンプル) # サンプルを含む、必要モジュールの取得とビルド gitclone https://github.com/mganeko/mediasoup_sample.git npm install # → 20分程度でビルド完了 # 実行 node mediasoup_sample_multi.js # その後 PC/Mac から接続 15
  • 16.
    デモ • Raspberry Pi3 で 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編 • 今回 RaspberryPi 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 Pi3 の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アドレスが「ひと目」で分かるように • ApplePi ボードを利用 – トランジスタ技術 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.
    シャットダウン デモ • RaspberryPi 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.