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 Boot Camp (WebRTC Conference Japan 2016) 事前公開版

3,768 views

Published on

WebRTC Conference Japan 2016の
エンジニア向けハンズオンセッション
「WebRTC Boot Camp」の事前公開版。

WebRTC Conference Japan 2016
http://webrtcconference.jp/
WebRTC Boot Camp
http://webrtcconference.jp/session/#session_9

Published in: Technology

WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版

  1. 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. 2. Boot Camp
  3. 3. WebRTCとは ブラウザでビデオチャットを するための仕様。 テキストやバイナリも送信可能。 ブラウザ間をP2Pで接続。
  4. 4. ビデオチャットを 実現するために必要な機能 マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.
  5. 5. ビデオチャットを 実現するために必要な機能 マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc. 盛り沢山
  6. 6. ビデオチャットを 実現するために必要な機能 マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc. これらの多くを Wrap
  7. 7. ビデオチャットを 実現するために必要な機能 マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc. バッドノウハウ いっぱい
  8. 8. 最低限 知らないといけないこと Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling
  9. 9. 最低限 知らないといけないこと Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling 今日はこのふたつを 三分間クッキング 方式でやりつつ... こちらを手動で行う ところまでを 実践する予定です。
  10. 10. 主な2つの仕様 Media Capture and Streams ブラウザからカメラやマイクの メディアストリームを取得するための仕様 WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザをP2Pで接続し 通信を行うための仕様
  11. 11. カメラやマイクに ブラウザからアクセス
  12. 12. Media Capture and Streams ブラウザからマイクやカメラにアクセス 再生するにはVideo/Audio要素との連 携が必要 メソッド名がgetUserMediaのためgetUserMediaと 呼ばれることが多い 略してgUMと記述されることもある
  13. 13. JavaScript <audio /> <video /> g etU serM ed ia M ed iaS tream M ed iaS tream 取得 再生/表示
  14. 14. ブラウザとブラウザの 接続(P2P)
  15. 15. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザをP2Pで接続 IPアドレス/Port番号取得 P2Pの為にはシグナリングが必要(後述) IP/Port・音声・映像コーデック etc. etc. PeerConnectionと呼ばれることもある
  16. 16. SignalingSTUN Global IPと
 Port番号を取得 NAT NAT
  17. 17. WebRTC 1.0: Real-time Communication Between Browsers キーワード SDP 音声・映像コーデック等 ICE Candidate 経路候補 IPアドレス/Port番号
  18. 18. アドレス(等)の交換
  19. 19. シグナリング (signaling) P2P接続の前に交換が必要な情報 音声や映像のコーデック(符号化形式)等 IPアドレス/Port番号 その手段は仕様では定められていない WebSocketが使われることが多い 呼制御と呼ばれることも...
  20. 20. SignalingSTUN IP/Port等を
 Signalingサーバを
 介して交換 NAT NAT
  21. 21. その他
  22. 22. NAT越え 越えられるかな? この俺を!
  23. 23. NAT越え NAT : ルータ等のネットワーク機器 別々のLAN配下のブラウザは
 直接通信できない WebRTCにはNAT越えの手段が用意さ れている(が、それなりに隠匿されている) 理解していないと開発ツライ
  24. 24. SignalingSTUN NATが邪魔で
 直接通信できない NAT NAT
  25. 25. SignalingSTUN NAT NAT UDP
 ホールパンチング
  26. 26. 更なる発展のために
  27. 27. キーワード シグナリング関連 SDP / ICE Candidate NAT越え関連 STUN / TURN / ICE / UDPホールパンチング 配信関連 SFU / MCU / SVC テキスト・バイナリ通信関連 DataChannel / SCTP
  28. 28. WebRTCの仕様は まさに今、移行期 getUserMediaの仕様が変わる Promiseを知る必要がある ORTCの仕様が取り込まれる もっと事細かな制御が可能になる つまりもっと複雑になる ここでは触れません
  29. 29. くじけないための 参考資料
  30. 30. 参考資料 書籍 ハイパフォーマンス ブラウザネットワーキン グ̶̶ネットワークアプリケーションのため のパフォーマンス最適化
 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
  31. 31. 当資料の写真は、 PAKUTASO/ぱくたそ の写真素材を利用しています。 https://pakutaso.com

×