WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術

Transcript

1. 8FCϒϥ΢βͰ11Λ࣮ݱ͢Δɺ 8FC35$ͷ"1*ͱपลٕज़ 
2. Updated 2014/04/19 ॳ൛ 2015/02/21 දهؒҧ͍मਖ਼
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
8. WebSocket αʔόΛհͯ͠ʢTCPʣσʔλΛૹड৴ WebRTC ୺຤ಉ͕࢜௚઀ʢUDPʣσʔλΛૹड৴ WebSocket?
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
11. σʔλͷ੔߹ੑ΍ॱংɾ࠶ૹ΍݁Ռͷอূ ʢλΠϜΞ΢τͳͲ΋ؚΉʣΛߟྀ͢΂͖௨৴
    -> WebSocket Φʔόʔϔου͕গͳ͘ɺଟগύέοτϩε͕͋ͬ ͯ΋໰୊ͷͳ͍γϯϓϧ׌ͭߴ଎ͳσʔλ௨৴
    -> WebRTC WebSocket vs WebRTC
12. WebRTC Services https:/ /www.sharedrop.io https:/ /vline.com
13. JavaScript API
14. RTCPeerConnection RTCSessionDescription RTCIceCandidate navigator.getUserMedia JavaScript API WebRTCؔ࿈ͷAPI͸߹ܭ3ͭ Media Streamؔ࿈ͷAPI͔Β1ͭ
15. RTCPeerConnection PeerʢϐΞʣΛੜ੒͢ΔϝΠϯAPI ͜ͷΦϒδΣΫτΛհͯ͠P2P௨৴Λߦ͏ ͍͔ͭ͘ͷϝιουɾΠϕϯτΠϯλʔϑΣʔε webkitRTCPeerConnection mozRTCPeerConnection JavaScript API
16. RTCSessionDescription Session Description Protocolʹؔ͢Δ σʔλΦϒδΣΫτ ͜ͷσʔλΛ૒ํͰڞ༗͢Δ͜ͱͰP2P઀ଓཱ͕֬͞ΕΔ RTCSessionDescription mozRTCSessionDescription JavaScript API
17. JavaScript API RTCIceCandidate ICEʹΑΔ઀ଓܦ࿏ީิʢCandidateʣ ʹؔ͢ΔΦϒδΣΫτ host / srflx / relay ͳͲ RTCIceCandidate mozRTCIceCandidate
18. JavaScript API navigator.getUserMedia ϒϥ΢β͔ΒMedia Streamʹؔ͢Δ ઀ଓΛՄೳʹ͢ΔAPI ݱࡏ͸ΧϝϥɾϚΠΫσόΠεͷೖྗͷΈαϙʔτ navigator.webkitGetUserMedia navigator.mozGetUserMedia
19. JavaScript Library PEERJS http:/ /peerjs.com/
20. JavaScript Library PEERJS ϕϯμʔϓϨϑΟοΫε΍ϒϥ΢βͷ ࣮૷ࠩҟΛٵऩͭͭ͠ɺ࠷దͳํ๏Ͱ ௨৴Λߦ͏Α͏αϙʔτ͍ͯ͠ΔϥΠϒϥϦ Πϕϯτϕʔεͷѻ͍΍͍͢ΠϯλʔϑΣʔε SkyWay ( http:/ /nttcom.github.io/skyway/ )͸͜ΕΛfork͠ ͨϥΠϒϥϦΛ࢖༻͍ͯ͠Δ
21. P2P઀ଓͷϑϩʔͱͦͷ࣮૷ 
    ϏσΦνϟοτ
    
22. Demonstration https:/ /github.com/ysugimoto/ RTCPeerConnectionSample
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: ϝσΟΞ઀ଓࣦഊ࣌ͷίʔϧόοΫ
    
    
    
26. ࣗ෼ͷετϦʔϜ઀ଓ // ࣗ෼ͷετϦʔϜ͸MediaStream API͔Βऔಘ͢Δ navigator.webkitGetUserMedia( { audio: true, video: true }, function(stream) { // videoཁૉऔಘ var video = document.getElementById('localVideo'); // srcʹBlob URLΛࢦఆ͢ΔͱΧϝϥͷը૾͕ετϦʔϜͰྲྀΕΔ video.src = window.webkitURL.createObjectURL(stream); // ࣗ෼ͷpeerʹΧϝϥετϦʔϜΛ઀ଓͤ͞Δ peer.addStream(stream); }, function(err) { console.log(err.name + ': ' + err.message); } );
27. ૬खͷετϦʔϜ઀ଓ // ૬खͷετϦʔϜ͸P2PͷΠϕϯτ͔Βऔಘ͢Δ peer.onaddstream = function(evt) { // ࣗ෼ͷϦϞʔτʹηοτ var video = document.getElementById('remoteVideo'); video.src = window.webkitURL.createObjectURL(evt.stream); }; onaddstreamΠϕϯτϋϯυϥͰ઀ଓ
28. Offer / Answer Offer Answer Session Description Protocolͷੜ੒ Local
    
    RemoteͷSDPΛηοτ͢Δ ి࿩Ͱͷ௨࿩Πϝʔδʹ͍ۙ
29. Offer / Answer Telephone #͞Μʹి࿩͠Α͏ "͞Μ͔Βண৴ͩ ి࿩ʹग़Α͏ ͭͳ͕ͬͨ Phone Carrier Server 0⒎FSૹ৴ -PDBM
    %FTDSJQUJPOηοτ 0⒎FSண৴ 3FNPUF
    %FTDSJQUJPOண৴ "OTXFSૹ৴ 3FNPUF
    %FTDSJQUJPOηοτ -PDBM
    %FTDSJQUJPOηοτ "OTXFSண৴ 3FNPUF
    %FTDSJQUJPOηοτ ᶃ ᶄ ᶅ ᶆ
30. Signaling P2P #͞Μͱ௨৴͠Α͏ "͞Μ͔ΒDBMMͩ Ԡ౴͠Α͏ ͭͳ͕ͬͨ Signaling Server (WebSocket) 0⒎FSૹ৴ -PDBM
    %FTDSJQUJPOηοτ 0⒎FSண৴ 3FNPUF
    %FTDSJQUJPOண৴ "OTXFSૹ৴ 3FNPUF
    %FTDSJQUJPOηοτ -PDBM
    %FTDSJQUJPOηοτ "OTXFSண৴ 3FNPUF
    %FTDSJQUJPOηοτ ᶃ ᶄ ᶅ ᶆ
31. Offerͷૹ৴ʢൃ৴ऀʣ // Offerૹ৴ peer.createOffer(function(sdp) { // Ҿ਺ͷSDP͸ࣗ෼༻ peer.setLocalDescription(sdp, function() { // ηοτ׬ྃͨ͠Βɺ૬खʹࣗ෼ͷSDPΛૹΔ(signaling) websokcet.send(JSON.stringify({ "sdp": sdp, "uuid": uuid })); }); });
32. Signaling Offer #͞Μͱ௨৴͠Α͏ "͞Μ͔ΒDBMMͩ Ԡ౴͠Α͏ ͭͳ͕ͬͨ Signaling Server (WebSocket) 0⒎FSૹ৴ -PDBM
    %FTDSJQUJPOηοτ 0⒎FSண৴ 3FNPUF
    %FTDSJQUJPOண৴ "OTXFSૹ৴ 3FNPUF
    %FTDSJQUJPOηοτ -PDBM
    %FTDSJQUJPOηοτ "OTXFSண৴ 3FNPUF
    %FTDSJQUJPOηοτ ᶃ ᶄ ᶅ ᶆ
33. Offerͷड͚औΓͱAnswerͷੜ੒ʢԠ౴ऀʣ // websocketͷϝοηʔδΠϕϯτͰड͚औΔ websocket.onmessage = function(evt) { var message = JSON.parse(evt.data), sdp; if ( message.sdp ) { sdp = new RTCSessionDescription(message.sdp); // ૬ख༻ʢremoteʣʹηοτ peer.setRemoteDescription(sdp, function() { // ࣗ෼΁ͷOffer-SDPͩͬͨΒAnswerΛฦ͢ if ( sdp.type === "offer" ) { peer.createAnswer(function(sdp) { peer.setLocalDescription(sdp, function() { // ηοτ׬ྃͨ͠Βɺ૬खʹࣗ෼ͷSDPΛૹΔ websokcet.send(JSON.stringify({ "sdp": sdp, "uuid": uuid })); })); }); } }); } }; 
    ᶄɾᶆ 
    ᶅ
34. Signaling Signaling #͞Μͱ௨৴͠Α͏ "͞Μ͔ΒDBMMͩ Ԡ౴͠Α͏ ͭͳ͕ͬͨ Signaling Server (WebSocket) 0⒎FSૹ৴ -PDBM
    %FTDSJQUJPOηοτ 0⒎FSண৴ 3FNPUF
    %FTDSJQUJPOண৴ "OTXFSૹ৴ 3FNPUF
    %FTDSJQUJPOηοτ -PDBM
    %FTDSJQUJPOηοτ "OTXFSண৴ 3FNPUF
    %FTDSJQUJPOηοτ ᶃ ᶄ ᶅ ᶆ
35. 4JHOBMJOH
    4FSWFS 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
38. ௨৴ܦ࿏ͷڞ༗ʢൃ৴ऀԠ౴ऀʣ // STUNαʔό͔Βܦ࿏ީิ͕ݟ͔ͭΔͨͼൃՐ peer.onicecandidate = function(evt) { var candidate; // evt.candidateϓϩύςΟʹσʔλ͕ೖ͍ͬͯΔͷͰɺWebSocketͰૹ৴ if ( evt.candiate ) { websocket.send(JSON.stringify({"candidate": evt.candidate})); } }; // websocketͷϝοηʔδϋϯυϥ಺Ͱૹ৴͞Ε͖ͯͨσʔλΛ෮ݩͯ͠ηοτ͢Δ websocket.onmessage = function(evt) { var message = JSON.parse(evt.data), candidate; // evt.candidate͕͋Ε͹Candidateͷڞ༗ if ( evt.candidate ) { candidate = new RTCIceCandidate(evt.candidate); peer.addIceCandidate(candidate); } };
39. IceCandidate IceCandidate STUN(TURN)αʔόʹϦΫΤετΛ ૹΓɺࣗ෼ͷNAT؀ڥ͔Β௨৴Մೳͳ ܦ࿏ީิʢCandidateʣΛऔಘ͢Δ ީิ͕ݟ͔ͭΔͱPeerʹ௨஌͞ΕΔͷͰɺ ͜ΕΛSignalingͱಉ༷ʹ૬खͱڞ༗͢Δ ܦ࿏͸ෳ਺ݟ͔ͭΔʢ࢖༻Ͱ͖Δ͔Ͳ͏͔͸ผʣ
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
44. Debug Tool chrome:/ /webrtc-internals PeerηογϣϯͷΠϕϯτ΍ શͯͷίωΫγϣϯσʔλ͕֬ೝՄೳ
45. P2Pͷ࢓૊Έͱ NAT Traversal
46. ΫϥΠΞϯτ͕૬ޓʹ௨৴खஈΛڞ༗ 
    SDPͷަ׵ʢSignalingʣ ௨৴ܦ࿏ީิͷڞ༗
    Candidate ୺຤ʢPeerʣಉ͕࢜௚઀ύέοτΛૹड৴͢Δ
    Connected P2P Mechanism
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
50. P2P Mechanism ௨ৗ͸ܦ࿏ʹNATΛڬΉ P2P͸ૹड৴ઌͷ׬શͳΞυϨεͱϙʔτΛ஌Δඞཁ͕͋Δ NATʹΑͬͯม׵͞ΕΔલͷϓϥΠϕʔτΞυϨεʹಧ͚Δ ʹ͸ɺNATΛӽ͑Δඞཁ͕͋Δ -> NAT Traversal ˞ਖ਼֬ʹ͸ɺ૬ख୺຤ʹύέοτ͕ಧ͘Α͏ͳ NATͷAddress:PortΛಘΔ
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.21 G:10.1.12.20 UDP / unicast
52. NAT Traversal NATʹΑͬͯݟ͑ͳ͍૬खͷ୺຤ʹ ௚઀ύέοτΛಧ͚ΔͨΊͷٕज़ P2PΛ༻͍ΔΦϯϥΠϯήʔϜͰ͸͢Ͱʹ ಋೖ΍ݚڀ͕ਐΜͰ͍Δ 
    WebRTCʹ͓͍ͯ΋࢓૊Έ͸ಉ͡ NATͷಛੑʹΑͬͯ͸೉͍͠৔߹΋͋Δ
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
61. STUNͷ໾ׂͱಈ࡞ ΫϥΠΞϯτ͕ηογϣϯΛ։࢝͢Δࡍʹɺ STUNαʔό΁ϦΫΤετΛૹ৴͠ɺ NATͷ৘ใΛऔಘ͢Δ STUN͸࣮૷͞Ε͍ͯΔΞϧΰϦζϜͰNATλΠϓΛௐࠪ͠ɺ ༗ޮͳNATΞυϨεΛฦ٫͢Δ STUN
62. STUN Algorithm ҟͳΔIP:Port͔Βͷechoཁٻ Full cone NAT ड͚औΕͨ ड͚औΕͳ͔ͬͨ ಉ͡IP:Port͔Βͷechoཁٻʢαʔόʣ 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
64. UDP Hole Punching STUN NATͷ಺ଆ͔ΒಛఆIP:PortʹύέοτΛૹ৴ͤ͞ɺ NATଆʹૹ৴ݩIP:PortͰड৴ՄೳͳϚοϐϯάΛੜ੒ͤ͞Δख๏ɻ ૒ํͷΫϥΠΞϯτ͸STUNαʔό͔ΒಘΒΕͨޓ͍ͷૹ৴ݩ IP:Portಉ࢜ʹύέοτΛૹΓ߹͍ɺड৴Մೳͳঢ়ଶʹ͢Δɻ ओʹRestricted-NATʹରͯ͠P2P઀ଓ͕༗ޮʹͳΔ
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-A NAT-B IP:Port A IP: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-A NAT-B IP:Port A IP: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-A NAT-B IP:Port A IP: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
71. TURNͷ໾ׂͱಈ࡞ l಺෦͔ΒͷύέοτΛड͚औͬͨ֎෦ϗετ͔ΒͷΈͷ ύέοτΛड৴͢Δz
    ͱ͍͏Symmetric NATͷಛੑΛ ղܾͰ͖ΔʢTURNαʔό͕Relayͯ͠ύέοτΛ౤͛ΔͨΊʣ ύέοτͷRelayػߏ͕֎෦ʹଘࡏ͢ΔͨΊɺTURNαʔόʹ͸େ͖ ͳෛՙ͕͔͔Γɺαʔόμ΢ϯʹΑΔো֐΋ ωοτϫʔΫܦ࿏ͱͯ͠͸WebSocketʹྨࣅʢUDP/TCPม׵΋α ϙʔτʣ TURN
72. TURN Relay Server Local Machine P: 192.168.0.1:5678 xxx.xxx.xxx.xx:34567 TURN TURN 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
75. Appendix 
    ϦΞϧλΠϜ௨৴ରઓ
76. Peerಉ࢜Ͱ೚ҙͷσʔλͷૹड৴͕Մೳ String / Blob / ArrayBuffer SCTP - Reliable Mode RTP - Non Reliable Mode Data Channel API older
77. DataChannelੜ੒  // SDPΛੜ੒͢Δલʹ࡞੒͓ͯ͘͠ඞཁ͕͋Δ var dataChannel = peer.createDataChannel('RTCDataChannel'); // ΠϕϯτͳͲΛॳظԽ initializeDataChannel(dataChannel); // ૬ख͔ΒͷDataChannelͷ઀ଓ͸ΠϕϯτͰ؂ࢹ peer.ondatachannel = function(evt) { // evt.channelʹDataChannel͕֨ೲ͞Ε͍ͯΔ dataChannel = evt.channel; initializeDataChannel(dataChannel); }; // σʔλૹ৴͸send()ϝιου dataChannel.send('some data');
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ੜ੒  WebSocketͱ ಉ͡Πϕϯτ*'
79. https:/ /github.com/ysugimoto/WebRTetris Demonstration
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
84. ϓϥάΠϯϨεͰՔಇ͢Δ11ΦϯϥΠϯήʔϜ αʔόෛՙͷ௿͍େن໛σʔλ഑৴ ͍ͣΕ͸εϚʔτϑΥϯͰ΋ར༻Մೳʹʁ ݱࡏ͸AndroidͷChrome29 ͷΈ Future
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