![var peer = new webkitRTCPeerConnection({
"iceServers": [{"url": "stun:stun.l.google.com:19302"}]
});
Peerの生成
“iceServers”というプロパティを持つオブジェクトを引数に渡す
var websocket = new WebSocket(‘ws://www.xxx.yyy.zzz’);
Signalling用にWebSocketの接続も行う](https://image.slidesharecdn.com/webrtcslide-140419011138-phpapp01/85/Web-P2P-WebRTC-API-24-320.jpg)
![WebRTC - Overview
http://www.webrtc.org/
[PDF] ICE TURN/STUN tutorial
http://sdstrowes.co.uk/talks/20081031-ice-turn-stun-tutorial.pdf
WebRTC 1.0: Real-time Communication Between Browsers
http://www.w3.org/TR/webrtc/
WebRTC in the real world: STUN, TURN and signaling
http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
Interactive Connectivity Establishment (ICE):
A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocols
https://tools.ietf.org/html/rfc5245
SDP: Session Description Protocol
http://tools.ietf.org/html/rfc4566
STUN - Simple Traversal of User Datagram Protocol (UDP)
Through Network Address Translators (NATs
http://tools.ietf.org/html/rfc3489
Traversal Using Relays around NAT (TURN):
Relay Extensions to Session Traversal Utilities for NAT (STUN)
http://tools.ietf.org/html/rfc5766
Thanks!
Resources](https://image.slidesharecdn.com/webrtcslide-140419011138-phpapp01/85/Web-P2P-WebRTC-API-85-320.jpg)
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
- 3. Intro Yoshiaki Sugimoto CyberAgent.inc Developer JavaScript / Node.js / CreateJS PHP / Linux
- 4. WebRTCの概要 WebRTCのJavaScript実装 P2Pの仕組みとNAT Traversal STUN / TURN Appendix Agenda
- 5. トランスポート層の話 TCP / UDP その他プロトコル NAT関連 Attention
- 6. WebRTCの概要
- 7. Web Real-Time Communication リアルタイムコミュニケーションを行うための API実装 ビデオチャット・ファイル共有 ( ) 周辺技術はオンラインゲームにも Description
- 9. WebSocket transport WebSocket Server Local Machine Local Machine TCP TCP broadcast unicast
- 10. WebRTC(P2P) transport UDP / unicast Local Machine Local Machine Signaling Server STUN TURN Server
- 13. JavaScript API
- 17. JavaScript API RTCIceCandidate ICEによる接続経路候補（Candidate） に関するオブジェクト host / srflx / relay など RTCIceCandidate mozRTCIceCandidate
- 20. JavaScript Library PEERJS ベンダープレフィックスやブラウザの 実装差異を吸収しつつ、最適な方法で 通信を行うようサポートしているライブラリ イベントベースの扱いやすいインターフェース SkyWay ( http://nttcom.github.io/skyway/ )はこれをforkし たライブラリを使用している
- 23. P2P Connection P2Pの接続確立フロー Peer（ピア）の生成 データ・ビデオストリームの接続 Session Description Protocolの交換 Offer / Answer Signaling P2P通信経路候補の共有（IceCandidate） データ送信の共有 or ビデオストリームの共有
- 24. var peer = new webkitRTCPeerConnection({ "iceServers": [{"url": "stun:stun.l.google.com:19302"}] }); Peerの生成 “iceServers”というプロパティを持つオブジェクトを引数に渡す var websocket = new WebSocket(‘ws://www.xxx.yyy.zzz’); Signalling用にWebSocketの接続も行う
- 25. メディア接続 // メディアに関する設定 var constraint = { audio: true, video: true }; navigator.webkitGetUserMedia( constraint, successCallback, errorCallback ); constraint: audio: マイクを使うかどうか video: カメラを使うかどうか successCallback: メディア接続成功時のコールバック errorCallback: メディア接続失敗時のコールバック
- 28. Offer / Answer Offer Answer Session Description Protocolの生成 Local / RemoteのSDPをセットする 電話での通話イメージに近い
- 29. Offer / Answer Telephone Bさんに電話しよう Aさんから着信だ 電話に出ようつながった Phone Carrier Server Offer送信 Local Descriptionセット Offer着信 Remote Description着信 Answer送信 Remote Descriptionセット Local Descriptionセット Answer着信 Remote Descriptionセット ① ② ③④
- 30. Signaling P2P Bさんと通信しよう Aさんからcallだ 応答しようつながった Signaling Server (WebSocket) Offer送信 Local Descriptionセット Offer着信 Remote Description着信 Answer送信 Remote Descriptionセット Local Descriptionセット Answer着信 Remote Descriptionセット ① ② ③④
- 32. Signaling Offer Bさんと通信しよう Aさんからcallだ 応答しようつながった Signaling Server (WebSocket) Offer送信 Local Descriptionセット Offer着信 Remote Description着信 Answer送信 Remote Descriptionセット Local Descriptionセット Answer着信 Remote Descriptionセット ① ② ③④
- 34. Signaling Signaling Bさんと通信しよう Aさんからcallだ 応答しようつながった Signaling Server (WebSocket) Offer送信 Local Descriptionセット Offer着信 Remote Description着信 Answer送信 Remote Descriptionセット Local Descriptionセット Answer着信 Remote Descriptionセット ① ② ③④
- 35. Signaling Server var ws = require(‘websocket.io’); var server = ws.listen(8124); // 接続イベント server.on(‘connection’, function(socket) { socket.on(‘message’, function(data) { console.log(‘Message received:’ + data); // 接続者全員にブロードキャスト server.client.forEach(function(client) { client && client.send(data); }); }); }); シンプルな WebSocket $ node server.js
- 36. SDP Session Description Protocol(SDP) クライアントPeerの接続情報に関する テキストデータ 送信元IP、Mediaはこれを使う、Audioをこれを使う、など シグナリングで交換する 自分のSDPをLocal Description、相手のSDPを Remote Descriptionと呼ぶ
- 37. SDP SDP Sample v=0 o=- 6636874602225569115 2 IN IP4 127.0.0.1 ... m=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126 ... m=video 1 RTP/SAVPF 100 116 117 ... a=sctpmap:5000 webrtc-datachannel 1024 a=ssrc:3712708814 cname:dgbXDOpXGNofSBNB a=ssrc:3712708814 msid:RTCDataConnection RTCDataConnection a=ssrc:3712708814 mslabel:RTCDataConnection a=ssrc:3712708814 label:RTCDataConnection
- 40. IceCandidate STUN Server TURN Server C1 C1 C1: 同一 NAT内(host)
- 41. IceCandidate STUN Server TURN Server C1 C1 C2 C2 C1: 同一 NAT内(host) C2: STUNによるNAT Traversal(srflx)
- 42. IceCandidate STUN Server TURN Server C1: 同一 NAT内(host) C1 C1 C2 C2 C2: STUNによるNAT Traversal(srflx) C3 C3 C3: TURNによるNAT Traversal(relay)
- 43. IceCandidate sample IceCandidate mid: video, candidate: a=candidate:1574647786 1 udp 2113937151 xxx.xxx.xxx.xx 64219 typ host generation 0 mid: video, candidate: a=candidate:4102338623 1 udp 1845501695 yyy.yyy.yyy.yy 41073 typ srflx raddr xxx.xxx.xxx.xx rport 64219 generation 0
- 47. Local Machine G: 192.168.0.1 Local Machine G: 192.168.0.2 Signaling Server STUN TURN Server P2P Mechanism Signaling SDP SDP
- 48. Signaling Server STUN TURN Server P2P Mechanism Candidate Candidate Local Machine G:192.168.0.1 Local Machine G: 192.168.0.2
- 49. UDP / unicast Signaling Server STUN TURN Server P2P Mechanism Connected Local Machine G: 192.168.0.1 Local Machine G: 192.168.0.2
- 51. Signaling Server STUN TURN Server P2P Mechanism Connected Local Machine P: 192.168.0.1 Local Machine P: 192.168.0.2 G: 10.1.12.21G:10.1.12.20 UDP / unicast
- 53. Full cone NAT NATの種類 どのIP:Portからでもパケットを受信するNAT Local Machine P: 192.168.0.1:255 G:10.1.12.20:80 G:xxx.xxx.xxx.xx G:yyy.yyy.yyy.yy packet Host A Host B
- 54. Address-Restricted NAT NATの種類LocalMachineがパケットを送ったことがある アドレスからのパケットを受け取る Local Machine P: 192.168.0.1:255 G: 10.1.12.20:80 G:xxx.xxx.xxx.xx G:yyy.yyy.yyy.yy packet Host A Host B
- 55. Port-Restricted NAT NATの種類Address-Restrictedに加え、送信元のポートも 一致した場合のみ受信する Local Machine P: 192.168.0.1:255 G: 10.1.12.20:80 G:xxx.xxx.xxx.xx :60313 G:yyy.yyy.yyy.yy packet Host A Host B
- 56. Symmetric NAT NATの種類内部パケットは全て唯一のIP:Portにマップ されるNAT Local Machine P: 192.168.0.1:255 G: 10.1.12.20:80 G:xxx.xxx.xxx.xx :60313 G:yyy.yyy.yyy.yy packet Host A Host B 内部からのパケットを受け取った外部ホストから のみのパケットを受信する
- 57. Universal Plug and Play デバイスを接続するだけでネットワークに参加できる仕組み 動的にNAT変換テーブルを制御可能 モデム側で対応していないといけない UPnP
- 58. NATタイプによるP2P NAT Type Full cone Address-Rest Port-Rest Symmetric Full cone Address-Rest Port-Rest Symmetric P2P Enables
- 59. STUN / TURN
- 60. Simple Traversal of UDP through NATs RFC3489にて仕様策定 stun.l.google.com:19302 stun.services.mozilla.com STUN
- 62. STUN Algorithm 異なるIP:Portからのecho要求 Full cone NAT 受け取れた 受け取れなかった 同じIP:Portからのecho要求（サーバ#2） PublicIP: xxx.xxx.xxx.xx:yy PublicIP変わってないPublicIP変わった Symmetric NAT同じIP:異なるPortからのecho要求 受け取れた 受け取れなかった Address-Restricted NAT Port-Restricted NAT : OK : NG
- 63. var PublicIP = ‘xxx.xxx.xxx.xxx’; if ( Stun.hasReceivedFrom(defferentAddr, differentPort) ) { return Stun.FullConeNATs; } else if ( Stun.hasReceivedFrom(sameAddr, samePort) ) { if ( Stun.isConstantIP(PublicIP) ) { return Stun.SymmetricNATs; } if ( Stun.hasReceivedFrom(sameAddr, differrentPort) ) { return Stun.AddressRestrictedNATs; } else { return Stun.PortRestrictedNATs; } } STUN Algorithm
- 65. STUN UDP Hole Punching Restricted-NATの特性を利用し、STUNサーバ（外部NAT) に向けてパケットを送信したIP:Portを伝える Local Machine A P: 192.168.0.1:255 xxx.xxx.xxx.xx:3478 STUN Server ①:パケット送信 ②:この送信元IP:Portを Local Machineに伝える NAT-Bも同様に IP:Port A IP:Port B NAT-A
- 66. STUN UDP Hole Punching(1/3) Local Machine A P: 192.168.0.1:255 Local Machine B P: 192.168.0.2:255 NAT-ANAT-B IP:Port AIP:Port B IP:PortA->IP:PortBへパケットを送信するが、 NAT-Bはこのパケットを破棄する IP:PortB -> IP:PortA へのパケットは 疎通可能になる(NAT-A)
- 67. STUN UDP Hole Punching(2/3) Local Machine A P: 192.168.0.1:255 Local Machine B P: 192.168.0.2:255 NAT-ANAT-B IP:Port AIP:Port B IP:PortB->IP:PortAへパケットを送信すると、 NAT-Aはこのパケットを受信する IP:PortA -> IP:PortB へのパケットは 疎通可能になる(NAT-B)
- 68. STUN UDP Hole Punching(3/3) Local Machine A P: 192.168.0.1:255 Local Machine B P: 192.168.0.2:255 NAT-ANAT-B IP:Port AIP:Port B IP:PortA->IP:PortBへ再度パケットを送信すると、 NAT-Bは今度はパケットを受信する IP:PortA / IP:PortB にUDPパケットの 穴が開いた状態
- 69. NATタイプによるP2P NAT Type Full cone Address-Rest Port-Rest Symmetric Full cone Address-Rest Port-Rest Symmetric P2P Enables Using UDP Hole Punching
- 70. Traversal Using Relay NAT パケット送受信を外部サーバがRelay することで、より完全なNAT越え問題を解決する その特性より、主にSymmetric NATに対して有効で あるプロトコル RFC 5766にて仕様策定 TURN
- 72. TURN Relay Server Local Machine P: 192.168.0.1:5678 xxx.xxx.xxx.xx:34567 TURNTURN Server Local Machine P: 192.168.0.2:5678 Relay
- 73. NATタイプによるP2P NAT Type Full cone Address-Rest Port-Rest Symmetric Full cone Address-Rest Port-Rest Symmetric P2P Enables Using UDP Hole Punching Using TURN Relay
- 74. Interactive Connectivity Establishment STUN / TURNを含め、NAT Traversalへの最適な手法を 提供する規格 ICE
- 76. Peer同士で任意のデータの送受信が可能 String / Blob / ArrayBuffer SCTP - Reliable Mode RTP - Non Reliable Mode Data Channel API older
- 78. function initializeDataChannel(dataChannel) { dataChannel.onmessage = function(evt) { var message = evt.data; // do something }; dataChannel.onopen = function() { // do something }; dataChannel.onclose = function() { // do something }; dataChannel.onerror = function() { // do something }; } DataChannel生成(2/2) WebSocketと 同じイベントI/F
- 80. Data Channel Transports Reliable mode SCTPプロトコルで転送 データの順序は保証され、再送制御も内部でかかる Non-Reliable mode RTPプロトコルで転送 データの順序は保証されず、再送制御も実装する必要がある Channel間で互換性が保てない>< older
- 81. UDPの仕様上、IPv4では64KB/send の制限 チャンク化の送信 / 受信は実装しないといけない 間のデータ転送は16300Byte/send に制限されてしまう ( via PeerJS ) Some Problems...
- 82. conclusion
- 83. 先行実装ブラウザで大体の機能が使える 特にData Channel APIが動くようになった DTMF Sender APIはまだ実装が怪しい リアルタイム通信がWebSocketと2極化するかも 使い分けが大事 Present
- 85. WebRTC - Overview http://www.webrtc.org/ [PDF] ICE TURN/STUN tutorial http://sdstrowes.co.uk/talks/20081031-ice-turn-stun-tutorial.pdf WebRTC 1.0: Real-time Communication Between Browsers http://www.w3.org/TR/webrtc/ WebRTC in the real world: STUN, TURN and signaling http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocols https://tools.ietf.org/html/rfc5245 SDP: Session Description Protocol http://tools.ietf.org/html/rfc4566 STUN - Simple Traversal of User Datagram Protocol (UDP) Through Network Address Translators (NATs http://tools.ietf.org/html/rfc3489 Traversal Using Relays around NAT (TURN): Relay Extensions to Session Traversal Utilities for NAT (STUN) http://tools.ietf.org/html/rfc5766 Thanks! Resources