WebRTC (概要から中の仕組みまで)

High Performance Browser Networking 輪読会の資料です。

Transcript

1. WebRTC High Performance Browser Networking ྠಡձ @yosuke_furukawa
2. WebRTC Web Real-Time Communication
4. ฉ͍ͨ΄͏͕͍͍΍ͭ
5. Web x Realtimeͷྺ࢙ 2005೥: Ajax ੜ஀ 2006೥: Comet͕Ajaxͱͱ΋ʹݟ௚͞ΕΔ 2006೥: ServerSentEvents ఏҊ։࢝ 2011೥: WebSocket͕ग़ͯ͘Δ 2012೥: WebRTC *(new!!)
6. WebRTCͱ͸? WebRTC͸ϒϥ΢β্Ͱ ϦΞϧλΠϜίϛϡχέʔγϣϯʢRTCʣ ΛՄೳʹ͢Δ΢ΣϒͷͨΊͷϑϨʔϜϫʔΫ ! ΢ΣϒͰͷߴ඼࣭ͳίϛϡχέʔγϣϯͷͨΊ Ի੠ʗϏσΦνϟοτΞϓϦέʔγϣϯ Ͱར༻͞ΕΔωοτϫʔΫɾԻ੠ɾө૾ίϯϙʔωϯτͳͲͷجຊ తͳߏ੒ཁૉؚ͕·ΕΔ 
 (ࢀߟจݙ: WebRTCͱ͔ษڧձ ͋ΜͲ͏΍͢͠)
7. WebRTC͕ఏڙ͢ΔAPI - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ - RTCPeerConnection: Ի੠΍ಈըͷ௨৴ - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
8. WebRTC͕ఏڙ͢ΔAPI - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ - RTCPeerConnection: Ի੠΍ಈըͷ௨৴ - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
9. MediaStream
10. MediaStreamΛࢧ͑Δٕज़ - Ի੠ɾಈըॲཧΤϯδϯ - getUserMedia API
11. Ի੠ɾಈըॲཧΤϯδϯ
12. Ի੠ɾಈըॲཧΤϯδϯ Ի੠ɾಈըॲཧΤϯδϯ͸͜ͷຊͰ͸ઐ໳ൣғ֎ɻ Ի੠ɾಈըॲཧΛ࣮ݱ͢Δʹ͸ɺίʔσοΫɺΤίʔ আڈɺϊΠζϦμΫγϣϯɺը૾ิਖ਼ͱ͍ͬͨॲཧ Λϒϥ΢β͕ػೳͱͯ࣋ͭ͠ඞཁ͕͋Δɻ
13. Ի੠ɾಈըॲཧΤϯδϯ
14. Ի੠ɾಈըॲཧΤϯδϯ ͜Ε͚ͩͷػೳΛ
    ༻ҙ͢Δඞཁ͕͋Δɻ
15. getUserMedia
16. getUserMedia Ի੠ಈըΛStreamͱͯ͠ड͚औΔJavaScriptͷAPIɻ͜ΕΛ MediaStreamͱݺͿɻ ͜ΕΛvideoλάʹ౉ͤ͹ࣗ෼ͷಈը࠶ੜɻ ͜ΕΛRTCPeerConnectionʹ౉ͤ͹WebRTCͷετϦʔϜΛ ૹΔ͜ͱ͕Մೳɻ
17. getUserMedia <video autoplay></video> <script> navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); var constraints = { audio: true, video: true } navigator.getUserMedia(constraints, gotStream, logError); function gotStream(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.play(); } function logError(error) { console.log(error); } </script>
18. DEMO
19. MediaStreamͷ·ͱΊ -Ի੠ɾಈըॲཧΤϯδϯ͕ϒϥ΢βʹଘࡏ͍ͯ͠ ΔɺΤίʔɺϊΠζॲཧ΍ಈըίʔσοΫͱ͍ͬͨ ϝσΟΞͷॲཧ͸ϒϥ΢βͰ࣮ݱ͞ΕΔ(ศར)ɻ -औಘ͢Δʹ͸getUserMediaΛ࢖͏
20. WebRTC͕ఏڙ͢ΔAPI - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ - RTCPeerConnection: Ի੠΍ಈըͷ௨৴ - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
21. RTCPeerConnection
22. RTCPeerConnectionͱ͸ P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
23. RTCPeerConnectionͱ͸ P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
24. RTCPeerConnectionͱ͸ P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ 35$Λߦ͏ͨΊɺ6%1૚Ͱ
    ߦΘΕΔɻ 8FCʹ6%1͕ʂ
25. RTCPeerConnectionͱ͸ P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ 35$1FFS$POOFDUJPO͸͜͜ͷ࿩
26. RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ) - STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)
27. RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ
28. RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ ΠϯλϑΣʔε͸ 35$1FFS$POOFDUJPO
    ɹΛ௨ͯ͠-PDBM3FNPUF
    TUSFBNTʹ઀ଓ͢Δ͚ͩ
29. RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ ͨͩதͰ΍ͬͯΔ͜ͱ͸
    ෳࡶ  /"5τϥόʔαϧΛߦ͏*$&ϫʔ Ϋϑϩʔ؅ཧ
     ϐΞؒͷࣗಈΩʔϓΞϥΠϒ
     ϩʔΧϧετϦʔϜͷมԽه࿥
     ϦϞʔτετϦʔϜͷมԽه࿥
     ετϦʔϜ࠶ωΰγΤʔγϣϯ
     ΦϑΝʔੜ੒ɺΞϯαʔडྖ"1*
     ݱࡏͷঢ়ଶϦΫΤετ"1*
30. P2P઀ଓΛཱ֬ ͦ΋ͦ΋઀ଓཱ֬ͱ͸?
31. P2P઀ଓΛཱ֬ ͦ΋ͦ΋઀ଓཱ֬ͱ͸? (HTTPͷ৔߹) MJTUFO QVCMJD
    *1
    1035
     1VCMJD
    *11035ΛΫϥΠΞϯτ͕஌͍ͬͯͯ
     αʔόʔ͕઀ଓΛ଴͍ͬͯͯ
     ͦ͜ʹ઀ଓΛཁٻ͠ʹߦ͘
32. P2P઀ଓΛཱ֬ ͦ΋ͦ΋઀ଓཱ֬ͱ͸? (WebRTCͷ৔߹) *1 1035
     8FC35$ͷ৔߹͸*1΋1035΋෼͔Βͳ͍
     ΋͠΋෼͔ͬͨͱͯ͠΋૬ख͕઀ଓΛཁٻͯ͠Δͱ͸ݶΒͳ͍
     /"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ ଴ػ /"5 /"5
33. P2P઀ଓΛཱ֬ ઀ଓཱ֬͢ΔͨΊʹ΍Δ͜ͱɻ *1 1035
     8FC35$ͷ৔߹͸*1΋1035΋෼͔Βͳ͍
     ΋͠΋෼͔ͬͨͱͯ͠΋૬ख͕઀ଓΛཁٻͯ͠Δͱ͸ݶΒͳ͍
     /"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ ଴ػ /"5 /"5
34. P2P઀ଓΛཱ֬ P2P઀ଓͷ։࢝ҙਤΛ૬खʹ఻͑ͯɺ౸ணύ έοτΛ଴ػ͢Δ
35. P2P઀ଓΛཱ֬ P2P઀ଓͷ։࢝ҙਤΛ૬खʹ఻͑ͯɺ౸ணύ έοτΛ଴ػ͢Δ ͜ΕΛγάφϦϯάͱ͍͏
36. P2P઀ଓΛཱ֬ WebRTC͸γάφϦϯάࣗ਎͸ΞϓϦέʔ γϣϯʹґଘ͢ΔɻͳͷͰγάφϦϯάͷτ ϥϯεϙʔτͱϓϩτίϧͷબ୒͸ࣗ༝
37. RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ) - STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)
38. SDP
39. Session Description Protocol
40. ͭ·Γ͸ηογϣϯهड़༻ϓ ϩτίϧ
41. Sesssion Description Protocol (SDP) WebRTC༻ͷηογϣϯهड़༻ϓϩτίϧ
42. Sesssion Description Protocol (SDP) ͋·Γҙࣝ͢Δ͜ͱແ͍͕ɺύέοτΩϟϓ νϟϨϕϧͰ͸ૹ৴͞Ε͍ͯΔ಺༰͕෼͔Δɻ
43. Sesssion Description Protocol (SDP) ηογϣϯهड़͕ަ׵͞ΕΔͱϝοηʔδͷަ׵͕ՄೳʹͳΔ SDPͰऔಘ͢Δ΋ͷ: ετϦʔϜͷλΠϓ(Ի੠ɺಈը) ίʔσοΫͳͲͷઃఆ ૬खͷIPͱPORT !
44. RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ) - STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)
45. ICE
46. Interactive Connection Establishment
47. ICE P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑) ICE͕ఏڙͯ͘͠ΕΔ΋ͷ͸௨৴ܦ࿏ͷཱ֬ *1 1035
     8FC35$ͷ৔߹͸૬खͷ*1΋1035΋෼͔Βͳ͍
     ΋͠΋෼͔ͬͨͱͯ͠΋/"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ ଴ػ /"5 /"5
48. ICE P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑) ICE͕ఏڙͯ͘͠ΕΔ΋ͷ͸௨৴ܦ࿏ͷཱ֬ *1 1035
     8FC35$ͷ৔߹͸૬खͷ*1΋1035΋෼͔Βͳ͍
     ΋͠΋෼͔ͬͨͱͯ͠΋/"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ ଴ػ /"5 /"5 ͜ΕΛղܾ͢Δखஈ
49. ICEͷલʹNATτϥόʔαϧʹ ͍͓ͭͯ͞Β͍͓ͯ͘͠ɻ
50. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
51. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͜ͷΤϯτϦʹॻ͔Ε͍ͯͳ͍*1 1035ͷ૊Έ߹Θͤͩͱ/"5֎͔Β ΞΫηεͯ͠΋/"5಺ʹಧ͔ͳ͍
52. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͪͳΈʹ͜ͷΤϯτϦͷू߹Λ
    USBOTMBUJPO
    UBCMF ຋༁ςʔϒϧ ͱ ݺͿ
53. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ٯʹݴ͑͹͜͜ʹॻ͔Ε͍ͯΔ૊ Έ߹Θ͕ͤ෼͔Ε͹/"5಺ͷϐΞ ʹΞΫηεՄೳ
54. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͨͩ͠ɺ/"5͸಺෦ͷ*11035Λ શͯอ͍࣋ͯ͠ΔΘ͚Ͱ͸ͳ͍ɻ
    ΞΫηε͕༗Δ౓ʹ຋༁ςʔϒϧʹ ௥Ճ͍ͯ͠Δɻ
55. NATτϥόʔαϧ NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͭ·Γɺ/"5ͷ຋༁ςʔϒϧʹ*1 1035ͷ૊ΛࡌͤΔʹ͸Ұ୴/"5͔ Β֎ʹϦΫΤετΛ͓͘Δඞཁ͕ ͋Δɻ
56. STUN ࣗ෼ͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔໰͍߹Θ ͤΔɻ
57. STUN ࣗ෼ͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔໰͍߹Θ ͤΔɻ ͜͏͢Δ͜ͱͰ/"5ͷ຋༁ςʔϒϧʹࣗ෼ͷ*1 1035ΛࡌͤΔࣄ͕Ͱ͖Δɻ ·ͨ456/͔Βड͚ͨࣗ෼ͷ1VCMJD
    *1ͱ1035Λ
 ଞͷϐΞʹ౉ͤ͹௚઀௨৴͢Δ͜ͱ͕Ͱ͖Δɻ
58. TURN STUNΛ࢖ͬͯ΋઀ଓͰ͖Δͱ͸ݶΒͳ͍ɺͦ΋ͦ΋ UDPΛϒϩοΫ͢ΔϑΝΠΞ΢Υʔϧ͕͋ͬͨΒ݁ ہ઀ଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ࢖͏ͷ͕TURN
59. TURN STUNΛ࢖ͬͯ΋઀ଓͰ͖Δͱ͸ݶΒͳ͍ɺͦ΋ͦ΋ UDPΛϒϩοΫ͢ΔϑΝΠΞ΢Υʔϧ͕͋ͬͨΒ݁ ہ઀ଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ࢖͏ͷ͕TURN தؒͷ563/αʔόʔ͕σʔλΛ5$16%1 ͰϦϨʔͤ͞Δɻ΋͸΍11Ͱ͸ͳ͍͕ɺ
 ࣮֬ʹͭͳ͕Δɻ
60. ICE ICE͸STUN/TURNͱ͍ͬͨܦ࿏બ୒Λ࣮ࢪ͢Δ 
    ·ͣࣗ෼ͷϩʔΧϧ*1Λ 04ʹ໰͍߹ΘͤΔ
61. ICE 456/αʔόʹࣗ෼ͷ*1 1035Λ໰͍߹ΘͤΔɻ 456/
62. ICE 456/ʹܨ͕Βͳ͔ͬͨΒ 563/Λ࢖ͬͯϦϨʔͤ͞Δ 456/ ✗ 563/
63. ICE P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑) 456/ʹܨ͕Βͳ͔ͬͨΒ 563/Λ࢖ͬͯϦϨʔͤ͞Δ 456/ ✗ 563/ ࣗಈͰ456/ɺ563/ͷ੾Γ ෼͚Λͯ͘͠ΕΔɻศརɻ
64. ICE ICEʹ΋໰୊͕͋Δɻॳظ઀ଓʹ͕͔͔࣌ؒΔɻ ઀ଓܦ࿏͕ܾ·Δ·Ͱ࣌ؒ ͔͔Γա͗Δɻ 456/ ✗ 563/
65. ͦ͜Ͱ Trickle ICE
66. Trickle ICE STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω ϧΛ࢖ͬͯࣗ෼ͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊ ͰͦΕΛ࢖͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ଴ ͭඞཁ͕ͳ͍ɻ
67. Trickle ICE STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω ϧΛ࢖ͬͯࣗ෼ͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊ ͰͦΕΛ࢖͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ଴ ͭඞཁ͕ͳ͍ɻ ީิΛݟ͚ͭͳ͕Βಉ࣌ʹγάφϦϯάνϟ ωϧͰܦ࿏ΛૹΓɺީิ͕ݟ͔ͭͬͨ୺͔Β ઀ଓΛࢼΈΔͷͰॳظ઀ଓ͕ૣ͘ͳΔɻ
68. ࣮ࡍʹಈ͔ͦ͏ DEMO http://simplewebrtc.com/demo.html
69. ͪͳΈʹ
70. chromeͩͱWebRTCͷ௨৴ঢ়گ͸ҎԼͷ ίϚϯυΛurlϑΥʔϜʹଧͭͱݟΕΔɻ chrome://webrtc-internals
71. RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ) - STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)
72. DTLS
73. D (Datagram) + TLS
74. WebRTCͰ͸ɺUDPͷ௨৴Λ҉ ߸Խ͢ΔͷʹDTLSΛ࢖͍ͬͯΔ
75. DTLS UDP͸ॱෆಉͰύέϩεΛڐ༰͢Δ͕ɺTLS͸ڐ༰͠ ͳ͍ɻ DTLS͸಺෦Ͱ͜ΕΛ๷͙ͨΊʹ಺෦ʹγʔέϯε൪ ߸ͱϑϥάϝϯτΦϑηοτɺͦͯ͠λΠϜΞ΢τ ࣍ͷ࠶ૹͷ࢓૊ΈΛఏڙ͍ͯ͠Δɻ
76. DTLS γʔέϯε൪߸ ϑϥάϝϯτΦϑηοτ
77. DTLS ύέοτ ࣌ؒ಺ʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ
78. DTLS ύέοτ ࣌ؒ಺ʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ 6%1্Ͱ΋ಈ͘%5-4͕ͩɺ
 جຊ͸5$1Ͱ΍ͬͯΔ͜ͱʹ͍ۙ
79. RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ) - STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)
80. SRTP
81. Secure Realtime Transport Protocol
82. SRTP IUUQXXXTMJEFTIBSFOFUJXBTIJXFC SUDNFFUVQS
83. SRTP
84. SRTP UJNFTUBNQ TFRVFODF
    OVNCFS
    ແࢹʂʂ
85. SRTP
86. SRTP
87. SRTP 4FRVFODF
    /VNCFSͱ 5JNFTUBNQΛ࣋ͭ
88. SCTP
89. Stream Control Transmission Protocol
90. SCTP
91. SCTP ͭͷΤϯυϙΠϯτؒͰҰͭͷ઀ଓͷ্Ͱ ಠཱͨ͠ෳ਺ͷσʔλΛૹΔ͜ͱ͕Ͱ͖Δ
92. ͋Ε͜ΕͲ͔ͬͰฉ͍ͨ͜ͱ ແ͍???
93. http2
94. http2ͱSCTPɺϨΠϠʔ͸ҧ ͏͚ͲࢼΈ͸ࣅ͍ͯΔɻ
95. SCTP͸TCP/UDPͱಉ͡ϨΠϠʔ (τϥϯεϙʔτ૚)ͷϓϩτίϧ
96. ίϥϜɿૉͷSCTPͷ࿩ ࣮ࡍࠓͷTCP/UDPΛશͯSCTPʹͨ͠ΒͲ͏͔ɺͱ͍͏આ΋͋Δɻ HTTP2.0͕࣮ݱ͠Α͏ͱ͍ͯ͠Δͷ͸SCTPΛhttpͷϨΠϠͰ࣮ݱ͠Α͏ͱ͍ͯ͠ΔͷͰɺ SCTP͕࠾༻Ͱ͖ͨΒhttp2ͷ໰୊ͷ΄ͱΜͲ͕ࣗಈతʹղܾ͞ΕΔɻ
 (ͳ͓ɺGoogle͸ͦΕͰ͸ෆຬͳͨΊɺQUICΛ࡞ͬͨ໛༷ɻ) 
 ͔͠͠ɺطଘͷϧʔλ΍NATσόΠε͸SCTPΛϕʔεʹ͍ͯ͠ͳ͍ɻ͔ͩΒΠϯλʔωοτ্ ͰSCTPΛجຊʹ͢Δ͜ͱ͸ࠓͷͱ͜Ζເ෺ޠɻ ͨͩ͠ɺ಺෦ωοτϫʔΫͳΒ࢖͑Δɻ࣮ࡍʹSCTP͸๻Β΋࢖͍ͬͯͯɺLTEΛѻ͍ͬͯΔ ΩϟϦΞ͸಺෦ͷσʔλ௨৴͸SCTPͰ͋ΓɺΠϯλʔωοτΛྲྀ࣌͢ʹTCP/UDPʹม׵ͯ͠ ͍Δɻ 
 (ͱɺॻ͔Εͯ͸͍Δ΋ͷͷ࣮ࡍʹ͸ೝূαʔόͷҰ෦Ͱ࢖͏ఔ౓Ͱجຊ͸TCPͷ༷ࢠ)
97. WebRTC͕ఏڙ͢ΔAPI - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ - RTCPeerConnection: Ի੠΍ಈըͷ௨৴ - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
98. DataChannel
99. DataChannel ϐΞؒͷΞϓϦέʔγϣϯσʔλΛ΍ΓͱΓ ͢Δ΍ʔͭɻ ૒ํ޲ੑΛ࣋ͭɻ΍ͬͱ͜͜·Ͱདྷͨײ͋Δɻ
100. Μ?
101. DataChannel ϐΞؒͷΞϓϦέʔγϣϯσʔλΛ΍ΓͱΓ ͢Δ΍ʔͭɻ ૒ํ޲ੑΛ࣋ͭɻ΍ͬͱ͜͜·Ͱདྷͨײ͋ Δɻ
102. ૒ํ޲ੑ?
103. WebSocket
104. DataChannel ࣮͸DataChannel API͸WebSocket APIͱ ͦͬ͘Γɺͦͯ͠ҙਤతʹࣅͤͯΔɻ
105. DataChannel var peerConnection = new RTCPeerConnection(); ! var dataChannel = peerConnection.createDataChannel("myLabel", dataChannelOptions); ! dataChannel.onopen = function () { dataChannel.send("Hello World!"); }; ! dataChannel.onclose = function () { console.log("The Data Channel is Closed"); }; ! dataChannel.onerror = function (error) { console.log("Data Channel Error:", error); }; ! dataChannel.onmessage = function (event) { console.log("Got Data Channel Message:", event.data); }; !
106. WebSocket var webSocket = new WebSocket(‘ws://echo.websocket.org/'); ! ! webSocket.onopen = function(){ console.log("Connection Opened"); } webSocket.onclose = function(){ console.log("Connection Closed"); } webSocket.onerror = function(evt){ console.log("The following error occurred: " + evt.data); } webSocket.onmessage = function(evt){ console.log("The following data was received:" + evt.data); }
107. WebSocket var webSocket = new WebSocket(‘ws://echo.websocket.org/'); ! ! webSocket.onopen = function(){ console.log("Connection Opened"); } webSocket.onclose = function(){ console.log("Connection Closed"); } webSocket.onerror = function(evt){ console.log("The following error occurred: " + evt.data); } webSocket.onmessage = function(evt){ console.log("The following data was received:" + evt.data); } ΫϦιπ
108. DataChannelͱWebSocket ͷҧ͍ - WebSocket͸TCPɺDataChannel͸UDP, DTLS, SCTPͷ3ͭͷϓϩτίϧͷ্Ͱಈ࡞͢ Δɻ
109. DataChannelͱWebSocket ͷҧ͍ - ͭ·ΓDataChannel͸৴པੑɺॱংอূΛ ୲อ͢Δ͜ͱ΋୲อ͠ͳ͍͜ͱ΋Ͱ͖Δɺઃ ఆՄೳɻ
110. DataChannel ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ௃͸ 1. ෦෼త৴པੑΛఏڙͰ͖Δɻ - ࠶ૹճ਺੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ - λΠϜΞ΢τظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ 2. ॱෆಉʹσʔλΛड͚౉͢͜ͱ΋Ͱ͖Δɻ
111. DataChannel ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ௃͸ 1. ෦෼త৴པੑΛఏڙͰ͖Δɻ - ࠶ૹճ਺੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ - λΠϜΞ΢τظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ 2. ॱෆಉʹσʔλΛड͚౉͢͜ͱ΋Ͱ͖Δɻ 5$1͔Β6%1·Ͱͷ৴པੑͱޮ཰ ͷτϨʔυΦϑΛબ୒Ͱ͖Δ
112. ٯʹݴ͑͹
113. ઃఆΊΜͲ͍ ƅ㱼ƅ)
114. DataChannel ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ͸༧ଌͰ ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧ΢ϯλ΍λΠϜΞ΢τͷ ઃఆ஋ʹ͸࠷దղ͸ଘࡏ͠ͳ͍ɻ ! ΋͠΋৴པੑͷ௿͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ Ε͹ɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ
115. DataChannel ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ͸༧ଌͰ ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧ΢ϯλ΍λΠϜΞ΢τͷ ઃఆ஋ʹ͸࠷దղ͸ଘࡏ͠ͳ͍ɻ ! ΋͠΋৴པੑͷ௿͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ Ε͹ɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ ઃఆ͸ঢ়گʹԠͯ͡ରԠ͠ͳͯ͘ ͸ͳΒͳ͍ɺಛʹ࠷దղ͸ͳ͍ɻ
116. WebRTCͷϢʔεέʔεͱ ύϑΥʔϚϯε
117. WebRTCͰέΞ͢Δ͜ͱ - ͱΓ͋͑ͣҰ൪͸ଳҬ෯ ͍͘Βѹॖ͍ͯ͠Δͱݴͬͯ΋ଳҬ͸৯͏ɻ ! HDΫΦϦςΟͩͱ1.2MbpsͷଳҬ͕ඞཁ શੈքతʹ͸ฏۉଳҬ෯͸3.1Mbps͔͠ͳ͍ HDετϦʔϜΛૹΔͳΒ࠷௿Ͱ΋3.5G+ ͷ઀ଓ͕ඞཁ
118. WebRTCͰέΞ͢Δ͜ͱ ࣍ʹγάφϦϯάαʔόʔ͕ඞཁ γάφϦϯάʹ͸ϨΠςϯγΛ୹͘͢Δ͜ͱ͕ෆՄܽɻ ͦͷͨΊWebSocket΍XHRɺSSEͱ͍ͬͨ઀ଓΛҡ࣋͢Δαʔό͕ඞ ཁʹͳΔɻ Φϓγϣϯͱͯ͠DataChannelΛ࢖͏͜ͱͰϐΞؒͷ઀ଓཱ֬ޙ͸WS ͷ୅ΘΓʹDataChannelͰݞ୅ΘΓͰ͖Δɻ ͜͏͢ΔͱγάφϦϯάαʔόʔͷෛՙ͕ݮΔɻ
119. WebRTCͰέΞ͢Δ͜ͱ ࠷ޙʹSTUNͱTURNͷαʔό͕ඞཁ NAT͸ϓϥΠϕʔτωοτϫʔΫ্ʹ͸΄΅࣮֬ʹଘࡏ͢Δɻ STUNαʔό͸stundͱ͍͏ਓؾͷOpenSourceαʔό͕͋ΔͷͰݕ౼͢Δ ͜ͱɻ UDPΛϒϩοΫ͍ͯ͠Δ؀ڥ͕͋Δ͜ͱ΋ߟ͑ΔͱTURNͷಋೖ΋ඞཁʹ ͳΔɻTURNʹܨ͕ΔͱTCPͱಉ༷ͷ઀ଓํࣜʹͳΔͨΊɺ΄ͱΜͲUDP ͷྑ͞͸ಘΒΕͳ͍ɻ࠷ऴखஈͱͯ͠ݕ౼͢Δ͜ͱɻ
120. ͱ͍͏Θ͚Ͱߟ͑ͳ͖Ό͍͚ͳ ͍͜ͱ͸ଟ͍ɻ
121. ͬ͟ͱ্͛Δͱ
122. 456/ /"5 /"5 563/ 4JHOBMJOH
     4FSWFS /"5Λ௒͑ΔͨΊͷ456/ 563/ɻ *$&
     "HFOUͰ੾Γ෼͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF
     *$&Λ࢖͏ɻ 84
     44&౳ͷ௿ϨΠςϯγͷαʔόʔΛ ࡞Δɻ઀ଓཱ֬ޙ͸%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹ஫ҙ͢Δɻ
     σʔλ͸ͳΔ΂͘খ͘͢͞Δɻ
     ద੾ͳϝσΟΞ੍ݶΛઃ͚Δɻ
     %BUB$IBOOFMͷόοϑΝσʔλ͸؂ࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ
     ෦෼త৴པੑͷ͋Δ഑৴ͳΒ࠶ૹΧ΢ϯτͱλΠϜΞ΢τΛద੾ʹઃఆ͢Δɻ
123. 456/ /"5 /"5 563/ 4JHOBMJOH
     4FSWFS /"5Λ௒͑ΔͨΊͷ456/ 563/ɻ *$&
     "HFOUͰ੾Γ෼͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF
     *$&Λ࢖͏ɻ 84
     44&౳ͷ௿ϨΠςϯγͷαʔόʔΛ ࡞Δɻ઀ଓཱ֬ޙ͸%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹ஫ҙ͢Δɻ
     σʔλ͸ͳΔ΂͘খ͘͢͞Δɻ
     ద੾ͳϝσΟΞ੍ݶΛઃ͚Δɻ
     %BUB$IBOOFMͷόοϑΝσʔλ͸؂ࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ
     ෦෼త৴པੑͷ͋Δ഑৴ͳΒ࠶ૹΧ΢ϯτͱλΠϜΞ΢τΛద੾ʹઃఆ͢Δɻ )BQQZ
     8FC35$
     -*'&
124. ࢀߟจݙ http://www.amazon.co.jp/hpbn/dp/4873116767 ! http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ ! http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/ ! http://simpl.info/rtcdatachannel/ ! http://www.slideshare.net/iwashi86/20140801-web-rtcmeetup3r3 ! https://docs.google.com/presentation/d/ 1MkvmX6Gvb1cRATdwF4RFBtol8NgdnblwlwikDnFhT10/present#slide=id.p ! http://html5experts.jp/mganeko/5554/ ! http://iwashi.co/2014/05/13/trickleice/ !