Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebRTC Meetup Tokyo #13
OSSのSFU meidasoupを触ってみた
インフォコム株式会社
がねこまさし
@massie_g
1
自己紹介
• がねこまさし / @massie_g
• インフォコム株式会社で、技術調査チームに所属
• WebRTC入門2016を HTML5Experts.jpに執筆
– https://html5experts.jp/series/web...
今日のお題
• SFU : Selective forwarding Unit
• mediasoup : オープンソースのSFU モジュール
– Node.js用に開発
3
P2P と SFU:Selective Forwarding Unit
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
P2Pの場合
• サーバ不要 ◎
• ブラウザ側の
• CPU負荷:高 ×
• ネットワーク負荷:高 ×
4
ブラウ...
MCU と SFU
5
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
SFU
映像・音声
を分岐/配信
ブラウザ
A
ブラウザ
B
ブラウザ
D
ブラウザ
C
MCU
映像・音声
を合成
MCUの場合
• MCUサーバ必要 → CPU...
圧縮と暗号化
6
Browser
いらすとや http://www.irasutoya.com/
BrowserP2P
圧縮/エンコード
暗号化
通信 復号化
解凍/デコード
TURN Browser
TURN Browser
SFU
MCU
...
mediasoupとは?
• オープンソースのSFU
– サイト https://mediasoup.org/
– GitHub https://github.com/ibc/mediasoup/
• 独立したサーバーではなく、部品
– Ins...
mediasoupとは? (2)
• ミニマム … メディアのみ、かつSFUなのでコーデックは処理しない
• パワフル … 実体は C++ で記述、libuv 利用
– Node.js から起動された子プロセスで通信を担当
– Node.js ...
mediasoup サンプル Demo
9
• 複数人の双方向通信
– 映像/音声
– 見た目P2Pと変わらないけど…
• SFUサーバーを止めると、映像も停止
• ソースコード
– https://github.com/mganeko/med...
mediasoup のインストール
• 前提環境
– Node.js v4.0.0 以上
– Linux / Mac OS X ※Windowsは未サポート
– Python 2.x ※要注意
– make
– gcc & g++ または cl...
mediasoup のオブジェクト構造(1)
11
Server
Room
Room
Room
Peer
Peer
Peer Transport
Transport
RtpSender
RtpSender
RtpSender
RtpReceiv...
mediasoup のRoomの構造(推測)
12
Room
Peer
RtpReceiver
RtpSender
Browser Browser
Peer
RtpReceiver
RtpSender
Peer
Browser
RtpRecei...
mediasoupのプロセス
13
デフォルトは
コア数分
1つのRoom
5つのPeerの時
1つのRoomは
同じworkerに?
利用のイメージ
let server = mediasoup.Server();
let peer1;
let receiver1;
return server.createRoom(roomOptions)
.then( (room) => ...
mediasoup のオブジェクト構造(2)
15
Server
Room
Room
Room
Peer
Peer
Peer
RTCPeerConnection
・ 1つのRTCPeerConnectionと、1つのPeerが対応
→ Offe...
RTCPeerConenctionを使った流れ
16
Browser A
RTCPeerConnection
mediasoup
RTCPeerConnection A
Browser B
send offer SDP
send offer S...
RTCPeerConnectionの現状の制約
• 最初のOfferをリモートから(ブラウザから)受け取る必要がある
– Currently, the mediasoup implementation of RTCPeerConnection ...
mediasoup その他の制約
• mediasoupは NAT/Firewallの外に置く必要あり
– mediasoupはSTUN/TURNを必要としない環境に置く
• ブラウザが NAT/Firewallの中にあるケースはOK
– ブラ...
まとめ
• WebRTCの主戦場は P2P → MCU → SFU に
• 現在鋭意開発中の mediasoup は、今後も要注目
– SFUを組み込んだアプリケーションを自分でも作れるように
• もちろん、高機能、高安定性は商用製品が有力
•...
WebRTC もくもく会 2/6(月) 19:00~22:00
• https://connpass.com/event/47474/
• 最近WebRTC始めた方、これからWebRTCを深めていこうという方
• 「WebRTCのここがよかった...
Thank you!
21
Upcoming SlideShare
Loading in …5
×

WebRTC SFU mediasoup sample

3,123 views

Published on

WebRTC Meetup Tokyo 13の資料です。
オープンソースのWebRTC用SFUであるmeidasoupを触ってみた話
サンプルのソースコードはこちら https://github.com/mganeko/mediasoup_sample

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There are over 16,000 woodworking plans that comes with step-by-step instructions and detailed photos, Click here to take a look ■■■ http://tinyurl.com/y3hc8gpw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get access to 16,000 woodworking plans, Download 50 FREE Plans... ★★★ http://ishbv.com/tedsplans/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The #1 Woodworking Resource With Over 16,000 Plans, Download 50 FREE Plans... ♣♣♣ http://tinyurl.com/y3hc8gpw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ◆◆◆ http://tinyurl.com/y3hc8gpw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WebRTC SFU mediasoup sample

  1. 1. WebRTC Meetup Tokyo #13 OSSのSFU meidasoupを触ってみた インフォコム株式会社 がねこまさし @massie_g 1
  2. 2. 自己紹介 • がねこまさし / @massie_g • インフォコム株式会社で、技術調査チームに所属 • WebRTC入門2016を HTML5Experts.jpに執筆 – https://html5experts.jp/series/webrtc2016/ • WebRTC Meetup Tokyo スタッフ見習い中 2
  3. 3. 今日のお題 • SFU : Selective forwarding Unit • mediasoup : オープンソースのSFU モジュール – Node.js用に開発 3
  4. 4. P2P と SFU:Selective Forwarding Unit ブラウザ A ブラウザ B ブラウザ D ブラウザ C P2Pの場合 • サーバ不要 ◎ • ブラウザ側の • CPU負荷:高 × • ネットワーク負荷:高 × 4 ブラウザ A ブラウザ B ブラウザ D ブラウザ C SFU 映像・音声 を分岐/配信 SFUの場合 • SFUサーバ必要 → CPU負荷:低 ○ • ブラウザ側はCPU負荷:低め ○ • ブラウザ側はネットワーク負荷:中 △ 表示レイアウトの 自由度が高い ◎
  5. 5. MCU と SFU 5 ブラウザ A ブラウザ B ブラウザ D ブラウザ C SFU 映像・音声 を分岐/配信 ブラウザ A ブラウザ B ブラウザ D ブラウザ C MCU 映像・音声 を合成 MCUの場合 • MCUサーバ必要 → CPU負荷:激高 ×× • ブラウザ側はCPU/ネットワーク負荷:低 ◎ SFUの場合 • SFUサーバ必要 → CPU負荷:低 ○ • ブラウザ側はCPU負荷:低め ○ • ブラウザ側はネットワーク負荷:中 △ 表示レイアウトの 自由度が高い ◎
  6. 6. 圧縮と暗号化 6 Browser いらすとや http://www.irasutoya.com/ BrowserP2P 圧縮/エンコード 暗号化 通信 復号化 解凍/デコード TURN Browser TURN Browser SFU MCU Browser SFU Browser Browser MCU Browser
  7. 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. 8. mediasoupとは? (2) • ミニマム … メディアのみ、かつSFUなのでコーデックは処理しない • パワフル … 実体は C++ で記述、libuv 利用 – Node.js から起動された子プロセスで通信を担当 – Node.js とはプロセス間通信でやりとり • JavaScript API を提供 – WebRTC 1.0 … RTCPeerConnection – ORTC … Transport, RtpSender, RtpReceiver 8
  9. 9. mediasoup サンプル Demo 9 • 複数人の双方向通信 – 映像/音声 – 見た目P2Pと変わらないけど… • SFUサーバーを止めると、映像も停止 • ソースコード – https://github.com/mganeko/mediasoup_sample
  10. 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
  11. 11. mediasoup のオブジェクト構造(1) 11 Server Room Room Room Peer Peer Peer Transport Transport RtpSender RtpSender RtpSender RtpReceiver RtpReceiver 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-mux multi-stream
  12. 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
  13. 13. mediasoupのプロセス 13 デフォルトは コア数分 1つのRoom 5つのPeerの時 1つのRoomは 同じworkerに?
  14. 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. 15. mediasoup のオブジェクト構造(2) 15 Server Room Room Room Peer Peer Peer RTCPeerConnection ・ 1つのRTCPeerConnectionと、1つのPeerが対応 → Offer/Answerのやり取りで通信を確立できる RTCPeerConnection RTCPeerConnection
  16. 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. 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. 18. mediasoup その他の制約 • mediasoupは NAT/Firewallの外に置く必要あり – mediasoupはSTUN/TURNを必要としない環境に置く • ブラウザが NAT/Firewallの中にあるケースはOK – ブラウザがSTUN/TURNを利用するのはOK 18 mediasoup Browser STUN Browser TURN NAT Firewall
  19. 19. まとめ • WebRTCの主戦場は P2P → MCU → SFU に • 現在鋭意開発中の mediasoup は、今後も要注目 – SFUを組み込んだアプリケーションを自分でも作れるように • もちろん、高機能、高安定性は商用製品が有力 • 本日のプレゼン資料は SlideShareに – http://www.slideshare.net/mganeko/webrtc-sfu-mediasoup-sample • ソースコードは GitHubに – https://github.com/mganeko/mediasoup_sample 19
  20. 20. WebRTC もくもく会 2/6(月) 19:00~22:00 • https://connpass.com/event/47474/ • 最近WebRTC始めた方、これからWebRTCを深めていこうという方 • 「WebRTCのここがよかった」「ここが好きになった」「ここがひっかかりやす い」などの知見を知りたい方 • 基本は自分でやってみるスタイル ← 仲さん、がねこがサポートします – 初めての人には過去のハンズオンをやってみるのがお勧め! – http://qiita.com/yusuke84/items/de9f0f6d221acec6fc07 • ご参加お待ちしています! 20
  21. 21. Thank you! 21

×