WebRTC Conference Japan 2016の エンジニア向けハンズオンセッション 「WebRTC Boot Camp」の事前公開版。 WebRTC Conference Japan 2016 http://webrtcconference.jp/ WebRTC Boot Camp http://webrtcconference.jp/session/#session_9

1. WebRTC
Boot Camp
WebRTC Conference Japan
http://webrtcconference.jp/
2016/02/16 17
2016/02/17
金城 雄
NTTアドバンステクノロジ
Twitter @youkinjoh
GitHub @youkinjoh
SlideShare @You_Kinjoh
事前公開版

2. Boot
Camp

4. WebRTCとは
ブラウザでビデオチャットを
するための仕様。
テキストやバイナリも送信可能。
ブラウザ間をP2Pで接続。

5. ビデオチャットを
実現するために必要な機能
マイク・カメラへのアクセス
IPアドレスとPortの取得
IPアドレスとPort情報の交換
音声・映像コーデック情報の交換
UDP(暗号化含む)
NAT越え
メディア制御(ジッタ・パケロス制御含む)
etc.

6. ビデオチャットを
実現するために必要な機能
マイク・カメラへのアクセス
IPアドレスとPortの取得
IPアドレスとPort情報の交換
音声・映像コーデック情報の交換
UDP(暗号化含む)
NAT越え
メディア制御(ジッタ・パケロス制御含む)
etc.
盛り沢山

7. ビデオチャットを
実現するために必要な機能
マイク・カメラへのアクセス
IPアドレスとPortの取得
IPアドレスとPort情報の交換
音声・映像コーデック情報の交換
UDP(暗号化含む)
NAT越え
メディア制御(ジッタ・パケロス制御含む)
etc.
これらの多くを
Wrap

8. ビデオチャットを
実現するために必要な機能
マイク・カメラへのアクセス
IPアドレスとPortの取得
IPアドレスとPort情報の交換
音声・映像コーデック情報の交換
UDP(暗号化含む)
NAT越え
メディア制御(ジッタ・パケロス制御含む)
etc.
バッドノウハウ
いっぱい

9. 最低限
知らないといけないこと
Media Capture and Streams
WebRTC 1.0: Real-time
Communication Between
Browsers
signaling

10. 最低限
知らないといけないこと
Media Capture and Streams
WebRTC 1.0: Real-time
Communication Between
Browsers
signaling
今日はこのふたつを
三分間クッキング
方式でやりつつ...
こちらを手動で行う
ところまでを
実践する予定です。

11. 主な2つの仕様
Media Capture and Streams
ブラウザからカメラやマイクの
メディアストリームを取得するための仕様
WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザをP2Pで接続し
通信を行うための仕様

12. カメラやマイクに
ブラウザからアクセス

13. Media Capture and Streams
ブラウザからマイクやカメラにアクセス
再生するにはVideo/Audio要素との連
携が必要
メソッド名がgetUserMediaのためgetUserMediaと
呼ばれることが多い
略してgUMと記述されることもある

14. JavaScript
<audio />
<video />
g
etU
serM
ed
ia
M
ed
iaS
tream
M
ed
iaS
tream
取得 再生/表示

15. ブラウザとブラウザの
接続(P2P)

16. WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザをP2Pで接続
IPアドレス/Port番号取得
P2Pの為にはシグナリングが必要(後述)
IP/Port・音声・映像コーデック etc.
etc.
PeerConnectionと呼ばれることもある

17. SignalingSTUN
Global IPと
Port番号を取得
NAT NAT

18. WebRTC 1.0: Real-time
Communication Between
Browsers
キーワード
SDP
音声・映像コーデック等
ICE Candidate
経路候補
IPアドレス/Port番号

19. アドレス(等)の交換

20. シグナリング
(signaling)
P2P接続の前に交換が必要な情報
音声や映像のコーデック(符号化形式)等
IPアドレス/Port番号
その手段は仕様では定められていない
WebSocketが使われることが多い
呼制御と呼ばれることも...

21. SignalingSTUN
IP/Port等を
Signalingサーバを
介して交換
NAT NAT

22. その他

23. NAT越え
越えられるかな?
この俺を!

24. NAT越え
NAT : ルータ等のネットワーク機器
別々のLAN配下のブラウザは
直接通信できない
WebRTCにはNAT越えの手段が用意さ
れている(が、それなりに隠匿されている)
理解していないと開発ツライ

25. SignalingSTUN
NATが邪魔で
直接通信できない
NAT NAT

26. SignalingSTUN
NAT NAT
UDP
ホールパンチング

27. 更なる発展のために

28. キーワード
シグナリング関連
SDP / ICE Candidate
NAT越え関連
STUN / TURN / ICE / UDPホールパンチング
配信関連
SFU / MCU / SVC
テキスト・バイナリ通信関連
DataChannel / SCTP

29. WebRTCの仕様は
まさに今、移行期
getUserMediaの仕様が変わる
Promiseを知る必要がある
ORTCの仕様が取り込まれる
もっと事細かな制御が可能になる
つまりもっと複雑になる
ここでは触れません

30. くじけないための
参考資料

31. 参考資料
書籍
ハイパフォーマンス ブラウザネットワーキン
グ̶̶ネットワークアプリケーションのため
のパフォーマンス最適化
http://www.oreilly.co.jp/books/
9784873116761/
WebRTC ブラウザベースのP2P技術
http://www.ric.co.jp/book/
contents/book_958.html
初級
WebRTCの技術解説 第二版 公開版 完全版
http://www.slideshare.net/
nttwestcon/20140805-technical-
description-of-webrtc-second-
edition-public-edition-full-version
getUserMedia
http://www.slideshare.net/
yusukenaka52/getusermedia
IP電話の次に起こるパラダイムシフト
WebRTC への挑戦
http://www.ntt.co.jp/journal/1508/
files/jn201508036.pdf
中級
WebRTCのICEについて知る
http://www.slideshare.net/
iwashi86/webrtcice
WebRTCの裏側にあるNATの話 - A talk
on NAT behind WebRTC
http://www.slideshare.net/
iwashi86/webrtcnat-a-talk-on-nat-
behind-webrtc
SDP for WebRTC - From Basics to
Maniacs -
http://www.slideshare.net/
iwashi86/20150311-web-
rtcmeetup7sdp
TrickleICEとは - WebRTCの要素技術 -
http://iwashi.co/2014/05/13/
trickleice/
WebRTC スタックコトハジメ
https://gist.github.com/voluntas/
6fcece7f424607c957d5
上級
WebRTC is secure, or not secure?
- WebRTC セキュリティ概説 -
http://www.slideshare.net/
iwashi86/20150128-web-
rtcsecurity
WebRTCを支えるマイナーなプロトコル
SRTP/DTLS/SCTPを分かった気になる
http://www.slideshare.net/
iwashi86/20140801-web-
rtcmeetup3r3
ORTCについてそろそろ書いてみる
http://iwashi.co/2015/08/13/ortc-
and-webrtc/
ORTC が切り開く SVC サイマルキャスト
と WebRTC NV
http://jxck.hatenablog.com/entry/
ortc-to-webrtcnv

32. 当資料の写真は、
PAKUTASO/ぱくたそ
の写真素材を利用しています。
https://pakutaso.com