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

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

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

October 08, 2014
Tweet

Transcript

  1. WebRTC High Performance Browser Networking ྠಡձ @yosuke_furukawa

  2. WebRTC Web Real-Time Communication

  3. None
  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ͷ૊Έ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͪͳΈʹ͜ͷΤϯτϦͷू߹Λ USBOTMBUJPOUBCMF ຋༁ςʔϒϧ ͱ ݺͿ

  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 TFRVFODFOVNCFS ແࢹʂʂ

  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/ 4JHOBMJOH4FSWFS /"5Λ௒͑ΔͨΊͷ456/ 563/ɻ *$&"HFOUͰ੾Γ෼͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF*$&Λ࢖͏ɻ 84

    44&౳ͷ௿ϨΠςϯγͷαʔόʔΛ ࡞Δɻ઀ଓཱ֬ޙ͸%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹ஫ҙ͢Δɻ σʔλ͸ͳΔ΂͘খ͘͢͞Δɻ ద੾ͳϝσΟΞ੍ݶΛઃ͚Δɻ %BUB$IBOOFMͷόοϑΝσʔλ͸؂ࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ ෦෼త৴པੑͷ͋Δ഑৴ͳΒ࠶ૹΧ΢ϯτͱλΠϜΞ΢τΛద੾ʹઃఆ͢Δɻ
  123. 456/ /"5 /"5 563/ 4JHOBMJOH4FSWFS /"5Λ௒͑ΔͨΊͷ456/ 563/ɻ *$&"HFOUͰ੾Γ෼͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF*$&Λ࢖͏ɻ 84

    44&౳ͷ௿ϨΠςϯγͷαʔόʔΛ ࡞Δɻ઀ଓཱ֬ޙ͸%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹ஫ҙ͢Δɻ σʔλ͸ͳΔ΂͘খ͘͢͞Δɻ ద੾ͳϝσΟΞ੍ݶΛઃ͚Δɻ %BUB$IBOOFMͷόοϑΝσʔλ͸؂ࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ ෦෼త৴པੑͷ͋Δ഑৴ͳΒ࠶ૹΧ΢ϯτͱλΠϜΞ΢τΛద੾ʹઃఆ͢Δɻ )BQQZ8FC35$-*'&
  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/ !