Tweet
Tweet

Slide 1

Slide 1 text

WebRTCのICEについて知る
 WebRTC Meetup Tokyo #8 @iwashi86 
 1 https://www.flickr.com/photos/aigle_dore/9997830314/in/photolist-getuCJ-rg9FSw-6uBXPM-qwVxdJ-9tAAku-qHWCTA-bxJrqC-dS3syZ-9RJHEB-9Tat6g-brUZ2W-dQiKoY-94RzU2-a3vmK9-ARR9p-9dyqtW-bqP5CT-p1QhWZ-dY6Bc-qZF5JW-pCNaK2-r8RWZ1-e5yb2Y-pPwGje-qFdRn8-bCydp c-oyvuRF-9bGQh8-azfu9R-j84fLK-bCfjjM-j4iWqn-a2tskF-9cMFBB-9vQwHT-javNQn-4mvLq4-9ebMGG-5YXb27-brB37c-qfpb6C-5RkFbC-nbXBRH-dVbBu5-jcL8uM-9et1Uh-7GM2YH-ngBXEo-hw2twQ-qwPYgR

Slide 2

Slide 2 text

2 Yoshimasa Iwase
 @iwashi86

Slide 3

Slide 3 text

3 https://www.flickr.com/photos/greenzowie/10543956045/in/photolist-h4JwMB-j3VKs2-qRZg9A-dyU1Aj-7xGMri-a3iFh-qXmB7S-rhDn4V-q3suF7-e1RHSP-68fqSC-7ruUn2-ae2UU7-6sNyov-bs1UAR-5NFbEx-6x1iU4-jqxvkh-s7ZpTn-sprJAv-4gQGMG-9cTcKt-9eYajw-9eY88L-j6KiKx-n LCY-kaLpYw-jwBa1M-jqxxiW-m87EZd-bvhe9u-9qUQtS-66EUvV-kPBhPH-9ofV2b-qXSDJd-941EoN-q4qefm-m3yYoj-s7Ze5P-jMgAvU-rvMzu3-bQDzMZ-9kgKBS-dJdSKY-9cgWri-brom8Z-sppYe2-de3BTr-jnoSt5 WebRTCのICE？
 (Interactive Connectivity Establishment)


Slide 4

Slide 4 text

よくある
 説明
 4

Slide 5

Slide 5 text

5 http://iwashi.co/2014/05/13/trickleice/

Slide 6

Slide 6 text

6 http://iwashi.co/2014/05/13/trickleice/

Slide 7

Slide 7 text

7
 受注 開発 納品

Slide 8

Slide 8 text

8
 受注 開発 納品 WebRTC案件

Slide 9

Slide 9 text

9
 受注 開発 納品 開発完了 -> 動作確認OK！

Slide 10

Slide 10 text

10
 受注 開発 納品 ん？つながらない？

Slide 11

Slide 11 text

11
 https://www.flickr.com/photos/ro_buk/4207903199/in/photolist-7pQB2a-7oP9vq-8xbiHx-7Ajmwj-8zemoB-7ehuXP-94aHzE-93jvSN-5gCQp-nRdqb-7ESvZP-5eMSN-4izRk-gdCx68-7H5QhG-hm25eq-gdCArW-gdCvG6-99Q3YA-gdD9sZ-4iA9c-8uzbUL-7hWskX-24apZ- 6JCtXT-765WDT-7cpma4-765UzM-8wAnxv-8xtXNE-23HQ3r-79kxLp-9uu261-6JgUhP-62GZde-6HTovP-7xJsr-tXPfoF-6JkZB3-3aWJ47-6JkZtY-5fFxrT-5fKTRL-bzSKLU-RTQ8y-hGmu1-5fKTgm-5fFvFn-3D3gk9-769MNG WebRTCである
 よくわからないけど
 つながらないやつだ…


Slide 12

Slide 12 text

12
 https://www.flickr.com/photos/gumuz/7340412/in/photolist-DC3Q-6kqoV-9Lgf8x-naaGzP-pWzqNK-6kWVRg-oEZ6w8-8v7VGZ-9UEAmi-9kLv-ehYbxv-o6Ad1A-4DqFKJ-bRcWii-d1tJTm-4aHjs6-bJWNFP-97Pgho-8ZNBGe-rLYSXs-ajro Y-96qUSC-4kAXcy-8QdCZt-r7MDtF-57tLjY-4Zhpz-9vjHhs-88hnSm-9fpiLc-bnc22E-Khua8-e4onL9-8QfuUe-fCyJ3-nzr4bo-7YvGrd-6pThCu-4bbmiz-cPhDnL-81rSz4-9Lj31N-81FuTC-jRVD8h-dYkr3t-8QVpAV-dhwwUe-8nJQUH-b8qzsB-b whMsd 早く原因を調べなさい


Slide 13

Slide 13 text

13
 https://www.flickr.com/photos/ro_buk/4207903199/in/photolist-7pQB2a-7oP9vq-8xbiHx-7Ajmwj-8zemoB-7ehuXP-94aHzE-93jvSN-5gCQp-nRdqb-7ESvZP-5eMSN-4izRk-gdCx68-7H5QhG-hm25eq-gdCArW-gdCvG6-99Q3YA-gdD9sZ-4iA9c-8uzbUL-7hWskX-24apZ- 6JCtXT-765WDT-7cpma4-765UzM-8wAnxv-8xtXNE-23HQ3r-79kxLp-9uu261-6JgUhP-62GZde-6HTovP-7xJsr-tXPfoF-6JkZB3-3aWJ47-6JkZtY-5fFxrT-5fKTRL-bzSKLU-RTQ8y-hGmu1-5fKTgm-5fFvFn-3D3gk9-769MNG WebRTCの通信の中身とか
 よくわからんし・・・

Slide 14

Slide 14 text

14 _(:3」∠)_

Slide 15

Slide 15 text

15 https://www.flickr.com/photos/jar0d/14758011307/in/photolist-ou7EAP-5wyd2j-ijH3Kj-9qtG1H-4yAsJE-nCwyJ6-bvcewH-7tfKKm-nsFpRX-reQpF2-pH36Cq-fmAtiU-jeLrpR-e3jcFm-dKmtwE-69VSTe-d5joAm-xWZbG-cpwuvu-ghWjGP-MPHno-fL1t9y-hAbUa2-owD33K-arqcdX-iNUwBE-ehaxYy- 8rfCd6-r5sAwo-bJHtS4-aE9vC2-662Gv6-aSDJg-aCrxxV-6PKpsp-6TM1kv-dGPHKP-4urjtC-6nQD8s-eYoDZu-kBuiEM-8cpE6r-gGyLHr-73DaN5-aHiPFi-bRje26-p8bJiq-o4JNX8-6EJK2H-7RGfyR 「NATで落ちてるだけですよ」
 とか簡単に言える＆対処できる


Slide 16

Slide 16 text

16 ICE知る ＝ 大事

Slide 17

Slide 17 text

17 略

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

19 長すぎ
 ちなみにSIPは約270ページ

Slide 20

Slide 20 text

20 _(:3」∠)_

Slide 21

Slide 21 text

21 https://www.flickr.com/photos/greenzowie/10543956045/in/photolist-h4JwMB-j3VKs2-qRZg9A-dyU1Aj-7xGMri-a3iFh-qXmB7S-rhDn4V-q3suF7-e1RHSP-68fqSC-7ruUn2-ae2UU7-6sNyov-bs1UAR-5NFbEx-6x1iU4-jqxvkh-s7ZpTn-sprJAv-4gQGMG-9cTcKt-9eYajw-9eY88L-j6KiKx-n LCY-kaLpYw-jwBa1M-jqxxiW-m87EZd-bvhe9u-9qUQtS-66EUvV-kPBhPH-9ofV2b-qXSDJd-941EoN-q4qefm-m3yYoj-s7Ze5P-jMgAvU-rvMzu3-bQDzMZ-9kgKBS-dJdSKY-9cgWri-brom8Z-sppYe2-de3BTr-jnoSt5 アイスを


Slide 22

Slide 22 text

22 https://www.flickr.com/photos/nam2_7676/4437691249/ 美味しく召し上がれるように


Slide 23

Slide 23 text

23 平易に解説

Slide 24

Slide 24 text

24 セッションのゴール ICEを理解して 自身の仕事等に活かす

Slide 25

Slide 25 text

25 そもそも なぜICEが必要？

Slide 26

Slide 26 text

26 NAT越えしたいから Internet NAT NAT Dropped…

Slide 27

Slide 27 text

27 UPnP PCP ICE

Slide 28

Slide 28 text

28 UPnP PCP ICE

Slide 29

Slide 29 text

29 ICE Vanilla Trickle

Slide 30

Slide 30 text

30 ICE Vanilla Trickle 拡張

Slide 31

Slide 31 text

31 ICE Vanilla Trickle 標準化されてないけど、 Chrome/Firefoxで動く 拡張

Slide 32

Slide 32 text

32 ICE Vanilla Trickle 標準化されてないけど、 Chrome/Firefoxで動く 拡張

Slide 33

Slide 33 text

1. ICE概要
 
 2. ICE kwsk
 33

Slide 34

Slide 34 text

1. ICE概要
 
 2. ICE kwsk
 34

Slide 35

Slide 35 text

35 収集 (初期値) 交換 整頓 穴開 終結 再 開

Slide 36

Slide 36 text

36 収集 交換 整頓 穴開 終結 再 開 通信できそうな候補(IP&Port)を ありったけ集める

Slide 37

Slide 37 text

37 収集 交換 整頓 穴開 終結 再 開 集めた候補を 相手と交換する

Slide 38

Slide 38 text

38 収集 交換 整頓 穴開 終結 再 開 相手から受け取った候補と 自分の候補をペアにして 一手間加えて `uniq & sort`

Slide 39

Slide 39 text

39 収集 交換 整頓 穴開 終結 再 開 ペアに対して、お互いにひたすら 接続試行（ホールパンチ）

Slide 40

Slide 40 text

40 収集 交換 整頓 穴開 終結 再 開 ホールパンチ中で未知の候補ペアが 見つかっちゃうことも…（後述）

Slide 41

Slide 41 text

41 収集 交換 整頓 穴開 終結 再 開 接続成功した候補ペアから イケてる候補を決定

Slide 42

Slide 42 text

42 収集 交換 整頓 穴開 終結 再 開 リロードとかすると 振り出しに戻る

Slide 43

Slide 43 text

43 収集 交換 整頓 穴開 終結 再 開

Slide 44

Slide 44 text

1. ICE概要
 
 2. ICE kwsk
 44

Slide 45

Slide 45 text

45 収集 交換 整頓 穴開 終結 再 開

Slide 46

Slide 46 text

46 https://www.flickr.com/photos/dwinton/15491767/in/photolist-2npar-fN8mrJ-6ZSNQW-3cEJD6-baVv4K-5cvQgk-fLdzPf-c4hNUA-gn15cX-hbvc2u-i45cJV-oyhaRk-3NJ8q1-iG9ei4-6R5CsQ-dkbFo7-4ambAb-4sf4jZ-fZieCr-dpSjMb-7kPv 8B-8KQdNv-549Ffr-anZ9V5-5GDdt-an8sRH-8Dk7Hw-pi6wZh-dfk7z6-8xwVAa-p7t5bk-3cHnsS-jCAuX-3nzdyJ-6Nqpba-uQweU-og5QH4-cyGuyU-dmBq2P-7kTpqm-5eRh4E-oWSAMV-h5KBm-oP7Sx5-fZsXjr-fZt4rY-fZsXnH-7kPvaK-8t9P2 Y-o7GXcz 収集
 (gathering / harvesting)


Slide 47

Slide 47 text

47 ICE Candidate (候補) is 何?

Slide 48

Slide 48 text

48 ICE Candidate (候補) is 何? ・IPアドレス ・プロトコル(TCP/UDP) ・ポート番号 ・コンポーネント ・タイプ（後述） ・優先度 ・ファウンデーション ・ベース 後述

Slide 49

Slide 49 text

49 NAT STUN TURN （この構成で説明）

Slide 50

Slide 50 text

50 NAT STUN TURN まずローカル候補GET（ソケットをbind） ex. 10.10.1.2 udp 50001 type host

Slide 51

Slide 51 text

51 NAT STUN TURN STUNを利用してNAT外部★の候補をGET 　ex. 100.1.2.3 udp 50002

Slide 52

Slide 52 text

52 NAT STUN TURN TurnにAllocation Requestする ex. 200.7.8.9 udp 60000

Slide 53

Slide 53 text

53 ・10.10.1.2 udp 50001 ・100.1.2.3 udp 50002 ・200.7.8.9 udp 60000 今まで集めた候補

Slide 54

Slide 54 text

54 ICEには もっと情報がある 整理しよう

Slide 55

Slide 55 text

55 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 100.1.2.3 udp 50002 200.7.8.9 udp 60000 ICE候補の詳細

Slide 56

Slide 56 text

56 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 100.1.2.3 udp 50002 srlfx 200.7.8.9 udp 60000 relay ICE候補の詳細 host = ローカルの候補 srlfx = STUNを使って入手した候補 relay = TURNを使って入手した候補 srlfx = Server Reflexive の略

Slide 57

Slide 57 text

57 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 100.1.2.3 udp 50002 srlfx 1 200.7.8.9 udp 60000 relay 1 ICE候補の詳細 ICE(RFC5245)的にいえば RTP = 1、RTCP = 2 なので実は・・・

Slide 58

Slide 58 text

58 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 100.1.2.3 udp 50002 srlfx 1 200.7.8.9 udp 60000 relay 1 10.10.1.2 udp 50003 host 2 100.1.2.3 udp 50004 srlfx 2 200.7.8.9 udp 60001 relay 2 ICE候補の詳細 2倍ある。 だが、SRTPとSRTCPはMUXするので たぶんWebRTCで後者は使われてない

Slide 59

Slide 59 text

59 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 0※ 100.1.2.3 udp 50002 srlfx 1 4 200.7.8.9 udp 60000 relay 1 8 10.10.1.2 udp 50003 host 2 0※ 100.1.2.3 udp 50004 srlfx 2 4 200.7.8.9 udp 60001 relay 2 8 ICE候補の詳細 Foundationはホールパンチを効率化するために利用 「※」はNW特性が類似しておりどっちかやれば十分

Slide 60

Slide 60 text

60 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 0※ 126|32542|255 100.1.2.3 udp 50002 srlfx 1 4 100|31518|255 200.7.8.9 udp 60000 relay 1 8 2|31518|255 10.10.1.2 udp 50003 host 2 0※ 126|32542|254 100.1.2.3 udp 50004 srlfx 2 4 100|31518|254 200.7.8.9 udp 60001 relay 2 8 2|31518|254 ICE候補の詳細 どの候補を一番優先して使うのか 決めるための値 (2^24)*(type preference) + (2^8)*(local preference) + (2^0)*(256 - component ID)

Slide 61

Slide 61 text

61 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 0※ 126|32542|255 10.10.1.2:20001 100.1.2.3 udp 50002 srlfx 1 4 100|31518|255 10.10.1.2:20002 200.7.8.9 udp 60000 relay 1 8 2|31518|255 200.7.8.9:60000 10.10.1.2 udp 50003 host 2 0※ 126|32542|254 10.10.1.2:20003 100.1.2.3 udp 50004 srlfx 2 4 100|31518|254 10.10.1.2:20004 200.7.8.9 udp 60001 relay 2 8 2|31518|254 200.7.8.9:60001 ICE候補の詳細 後述する無駄な候補を省くために利用

Slide 62

Slide 62 text

62 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 0※ 126|32542|255 10.10.1.2:20001 100.1.2.3 udp 50002 srlfx 1 4 100|31518|255 10.10.1.2:20002 200.7.8.9 udp 60000 relay 1 8 2|31518|255 200.7.8.9:60000 10.10.1.2 udp 50003 host 2 0※ 126|32542|254 10.10.1.2:20003 100.1.2.3 udp 50004 srlfx 2 4 100|31518|254 10.10.1.2:20004 200.7.8.9 udp 60001 relay 2 8 2|31518|254 200.7.8.9:60001 ICE候補の詳細 後述する無駄な候補を省くために利用

Slide 63

Slide 63 text

63 IP Proto Port Type Component Foundation priority base 10.10.1.2 udp 50001 host 1 0※ 126|32542|255 10.10.1.2:20001 100.1.2.3 udp 50002 srlfx 1 4 100|31518|255 10.10.1.2:20002 200.7.8.9 udp 60000 relay 1 8 2|31518|255 200.7.8.9:60000 10.10.1.2 udp 50003 host 2 0※ 126|32542|254 10.10.1.2:20003 100.1.2.3 udp 50004 srlfx 2 4 100|31518|254 10.10.1.2:20004 200.7.8.9 udp 60001 relay 2 8 2|31518|254 200.7.8.9:60001 　全部 そろったら

Slide 64

Slide 64 text

64 https://www.flickr.com/photos/112931986@N07/11645894595/in/photolist-iK7fJ8-iK7g1R-4VHLyS-4VDvUg-on4f7G-85vph4-4Gf3qe-eiVJYf-sxTLu-4Gjd2Q-aqEiTw-57pb1e-q2cD1t-9cce2F-3aaovf-m3JXZ4-7bTeix-rJbSsy-zFtQB-auHyEc-fp5sj-9WnTF2-e8hKvL-e8 hJZG-3GL7F-CUiRW-66NVLJ-Ngx8o-SUXKY-cMaWHS-cMaWTm-cMaWF3-cMaWP9-cMaWRm-cMaWLf-5iVTqa-4W486H-atGuRo-cWA4LG-XAztd-8yxAxg-8ogyfG-9fbbF-4zzX2i-o893on-8743uP-sAMhW-5bQEmS-kLRTZb-8KtxA3 シグナリングで交換

Slide 65

Slide 65 text

65 https://www.flickr.com/photos/112931986@N07/11645894595/in/photolist-iK7fJ8-iK7g1R-4VHLyS-4VDvUg-on4f7G-85vph4-4Gf3qe-eiVJYf-sxTLu-4Gjd2Q-aqEiTw-57pb1e-q2cD1t-9cce2F-3aaovf-m3JXZ4-7bTeix-rJbSsy-zFtQB-auHyEc-fp5sj-9WnTF2-e8hKvL-e8 hJZG-3GL7F-CUiRW-66NVLJ-Ngx8o-SUXKY-cMaWHS-cMaWTm-cMaWF3-cMaWP9-cMaWRm-cMaWLf-5iVTqa-4W486H-atGuRo-cWA4LG-XAztd-8yxAxg-8ogyfG-9fbbF-4zzX2i-o893on-8743uP-sAMhW-5bQEmS-kLRTZb-8KtxA3 みんな大好き SDPでね！

Slide 66

Slide 66 text

66 収集 交換 整頓 穴開 終結 再 開

Slide 67

Slide 67 text

67 IP Proto Port Type 10.10.1.2 udp 50001 host … 100.1.2.3 udp 50002 srlfx … 200.7.8.9 udp 60000 relay … IP Proto Port Type 10.10.9.9 udp 50001 host … 100.1.9.9 udp 50002 srlfx … 200.7.8.9 udp 60002 relay … 自分のリスト 相手からもらったリスト ２種類のリストが手元に揃う

Slide 68

Slide 68 text

68 IP Proto Port Type 10.10.1.2 udp 50001 host … 100.1.2.3 udp 50002 srlfx … 200.7.8.9 udp 60000 relay … IP Proto Port Type 10.10.9.9 udp 50001 host … 100.1.9.9 udp 50002 srlfx … 200.7.8.9 udp 60002 relay … 自分のリスト 相手からもらったリスト 組み合わせる(Paring up)

Slide 69

Slide 69 text

69 Local IP Remote IP 10.10.1.2 … 10.10.9.9 … 100.1.2.3 … 10.10.9.9 … 200.7.8.9 … 10.10.9.9 … 10.10.1.2 … 100.1.9.9 … … … … … 作成したリストに対して uniq & sort (優先度順)

Slide 70

Slide 70 text

70 なぜ重複排除？ NAT STUN STUN NAT有 NAT無

Slide 71

Slide 71 text

71 なぜ重複排除？ NAT STUN STUN NAT有 NAT無 異なる アドレス

Slide 72

Slide 72 text

72 なぜ重複排除？ NAT STUN STUN NAT有 NAT無

Slide 73

Slide 73 text

73 なぜ重複排除？ NAT STUN STUN NAT有 NAT無 同一の アドレス （＝無駄）

Slide 74

Slide 74 text

74 Local IP Remote IP 10.10.1.2 … 10.10.9.9 … 100.1.2.3 … 10.10.9.9 … 200.7.8.9 … 10.10.9.9 … 10.10.1.2 … 100.1.9.9 … … … … … お互いにチェックリストを 持ったらついに… Local IP Remote IP 10.10.1.2 … 10.10.9.9 … 100.1.2.3 … 10.10.9.9 … 200.7.8.9 … 10.10.9.9 … 10.10.1.2 … 100.1.9.9 … … … … … 自分 相手

Slide 75

Slide 75 text

75 http://upload.wikimedia.org/wikipedia/commons/b/b3/BattleofLongisland.jpg 開戦！


Slide 76

Slide 76 text

76 http://upload.wikimedia.org/wikipedia/commons/b/b3/BattleofLongisland.jpg 注：ただのUDPホールパンチです


Slide 77

Slide 77 text

77 http://upload.wikimedia.org/wikipedia/commons/b/b3/BattleofLongisland.jpg ICEはSTUNパケットでUDPホールパンチ
 STUN STUN

Slide 78

Slide 78 text

78 (途中で) 未知との遭遇 NAT NAT List List

Slide 79

Slide 79 text

79 (途中で) 未知との遭遇 Symmetric NAT Cone NAT List List 持ってるリストに記載されていない 送信元アドレスからSTUNパケットが届くことがある ⇒ Type: Peer Reflexive 候補の発見

Slide 80

Slide 80 text

80 Local IP Remote IP 10.10.1.2 … 10.10.9.9 … 100.1.2.3 … 10.10.9.9 … 200.7.8.9 … 10.10.9.9 … 10.10.1.2 … 100.1.9.9 … … … … … 終わると、成功・失敗がわかる Local IP Remote IP 10.10.1.2 … 10.10.9.9 … 100.1.2.3 … 10.10.9.9 … 200.7.8.9 … 10.10.9.9 … 10.10.1.2 … 100.1.9.9 … … … … … 自分 相手

Slide 81

Slide 81 text

81 収集 交換 整頓 穴開 終結 再 開

Slide 82

Slide 82 text

82 使うペアを制御側が Flag付きSTUNで教える USE-CANDIDATE付きSTUN Success Response 以降、DTLS Handshake…

Slide 83

Slide 83 text

83 ICE Vanilla Trickle 拡張

Slide 84

Slide 84 text

84 収集 (初期値) 交換 整頓 穴開 終結 再 開 GETした候補はすぐ送る、すぐ試す！ （もしかしたら早くつながるかもしれない） 特に違うところ

Slide 85

Slide 85 text

85 https://www.ietf.org/proceedings/86/slides/slides-86-mmusic-8.pdf

Slide 86

Slide 86 text

86 https://www.ietf.org/proceedings/86/slides/slides-86-mmusic-8.pdf

Slide 87

Slide 87 text

87 ということで

Slide 88

Slide 88 text

88 ICE知る ＝ 大事

Slide 89

Slide 89 text

89 ICE知る ＝ 大事 といっても、ICEにはまだまだ話せていないことがたくさんある State Machine、Triggered Check、Authentication(ufrag等)

Slide 90

Slide 90 text

90 おしまい！