webrtc boot camp (webrtc conference japan 2016) 事前公開版
TRANSCRIPT
WebRTC Boot Camp
WebRTC Conference Japan http://webrtcconference.jp/
2016/02/16~17
2016/02/17金城 雄
NTTアドバンステクノロジ Twitter @youkinjoh GitHub @youkinjoh SlideShare @You_Kinjoh
事前公開版
Boot Camp
WebRTCとは
ブラウザでビデオチャットを するための仕様。 テキストやバイナリも送信可能。 ブラウザ間をP2Pで接続。
ビデオチャットを 実現するために必要な機能
マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.
ビデオチャットを 実現するために必要な機能
マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.
盛り沢山
ビデオチャットを 実現するために必要な機能
マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.
これらの多くを Wrap
ビデオチャットを 実現するために必要な機能
マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.
バッドノウハウ いっぱい
最低限 知らないといけないこと
Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling
最低限 知らないといけないこと
Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling
今日はこのふたつを 三分間クッキング 方式でやりつつ...
こちらを手動で行う ところまでを 実践する予定です。
主な2つの仕様Media Capture and Streams ブラウザからカメラやマイクの メディアストリームを取得するための仕様 WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザをP2Pで接続し 通信を行うための仕様
カメラやマイクに ブラウザからアクセス
Media Capture and Streams
ブラウザからマイクやカメラにアクセス 再生するにはVideo/Audio要素との連携が必要
メソッド名がgetUserMediaのためgetUserMediaと呼ばれることが多い 略してgUMと記述されることもある
JavaScript
<audio /><video />
getUserMedia
MediaStream
MediaStream
取得 再生/表示
ブラウザとブラウザの 接続(P2P)
WebRTC 1.0: Real-time Communication Between
BrowsersブラウザとブラウザをP2Pで接続 IPアドレス/Port番号取得 P2Pの為にはシグナリングが必要(後述) IP/Port・音声・映像コーデック etc.
etc. PeerConnectionと呼ばれることもある
SignalingSTUN
Global IPとPort番号を取得
NAT NAT
WebRTC 1.0: Real-time Communication Between
Browsersキーワード SDP 音声・映像コーデック等
ICE Candidate 経路候補 IPアドレス/Port番号
アドレス(等)の交換
シグナリング (signaling)
P2P接続の前に交換が必要な情報 音声や映像のコーデック(符号化形式)等 IPアドレス/Port番号
その手段は仕様では定められていない WebSocketが使われることが多い
呼制御と呼ばれることも...
SignalingSTUN
IP/Port等をSignalingサーバを
介して交換
NAT NAT
その他
NAT越え
越えられるかな? この俺を!
NAT越え
NAT : ルータ等のネットワーク機器 別々のLAN配下のブラウザは直接通信できない WebRTCにはNAT越えの手段が用意されている(が、それなりに隠匿されている) 理解していないと開発ツライ
SignalingSTUN
NATが邪魔で直接通信できない
NAT NAT
SignalingSTUN
NAT NAT
UDPホールパンチング
更なる発展のために
キーワードシグナリング関連 SDP / ICE Candidate
NAT越え関連 STUN / TURN / ICE / UDPホールパンチング
配信関連 SFU / MCU / SVC テキスト・バイナリ通信関連 DataChannel / SCTP
WebRTCの仕様は まさに今、移行期
getUserMediaの仕様が変わる Promiseを知る必要がある
ORTCの仕様が取り込まれる もっと事細かな制御が可能になる つまりもっと複雑になる
ここでは触れません
くじけないための 参考資料
参考資料書籍
ハイパフォーマンス ブラウザネットワーキング̶̶ネットワークアプリケーションのためのパフォーマンス最適化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
getUserMediahttp://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 WebRTChttp://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 NVhttp://jxck.hatenablog.com/entry/ortc-to-webrtcnv
