Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yosuke Furukawa
PRO

October 08, 2014
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

    View Slide

  2. WebRTC
    Web Real-Time Communication

    View Slide

  3. View Slide

  4. ฉ͍ͨ΄͏͕͍͍΍ͭ

    View Slide

  5. Web x Realtimeͷྺ࢙
    2005೥: Ajax ੜ஀
    2006೥: Comet͕Ajaxͱͱ΋ʹݟ௚͞ΕΔ
    2006೥: ServerSentEvents ఏҊ։࢝
    2011೥: WebSocket͕ग़ͯ͘Δ
    2012೥: WebRTC *(new!!)

    View Slide

  6. WebRTCͱ͸?
    WebRTC͸ϒϥ΢β্Ͱ
    ϦΞϧλΠϜίϛϡχέʔγϣϯʢRTCʣ
    ΛՄೳʹ͢Δ΢ΣϒͷͨΊͷϑϨʔϜϫʔΫ
    !
    ΢ΣϒͰͷߴ඼࣭ͳίϛϡχέʔγϣϯͷͨΊ
    Ի੠ʗϏσΦνϟοτΞϓϦέʔγϣϯ
    Ͱར༻͞ΕΔωοτϫʔΫɾԻ੠ɾө૾ίϯϙʔωϯτͳͲͷجຊ
    తͳߏ੒ཁૉؚ͕·ΕΔ 

    (ࢀߟจݙ: WebRTCͱ͔ษڧձ ͋ΜͲ͏΍͢͠)

    View Slide

  7. WebRTC͕ఏڙ͢ΔAPI
    - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ
    - RTCPeerConnection: Ի੠΍ಈըͷ௨৴
    - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨

    View Slide

  8. WebRTC͕ఏڙ͢ΔAPI
    - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ
    - RTCPeerConnection: Ի੠΍ಈըͷ௨৴
    - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨

    View Slide

  9. MediaStream

    View Slide

  10. MediaStreamΛࢧ͑Δٕज़
    - Ի੠ɾಈըॲཧΤϯδϯ
    - getUserMedia API

    View Slide

  11. Ի੠ɾಈըॲཧΤϯδϯ

    View Slide

  12. Ի੠ɾಈըॲཧΤϯδϯ
    Ի੠ɾಈըॲཧΤϯδϯ͸͜ͷຊͰ͸ઐ໳ൣғ֎ɻ
    Ի੠ɾಈըॲཧΛ࣮ݱ͢Δʹ͸ɺίʔσοΫɺΤίʔ
    আڈɺϊΠζϦμΫγϣϯɺը૾ิਖ਼ͱ͍ͬͨॲཧ
    Λϒϥ΢β͕ػೳͱͯ࣋ͭ͠ඞཁ͕͋Δɻ

    View Slide

  13. Ի੠ɾಈըॲཧΤϯδϯ

    View Slide

  14. Ի੠ɾಈըॲཧΤϯδϯ
    ͜Ε͚ͩͷػೳΛ
    ༻ҙ͢Δඞཁ͕͋Δɻ

    View Slide

  15. getUserMedia

    View Slide

  16. getUserMedia
    Ի੠ಈըΛStreamͱͯ͠ड͚औΔJavaScriptͷAPIɻ͜ΕΛ
    MediaStreamͱݺͿɻ
    ͜ΕΛvideoλάʹ౉ͤ͹ࣗ෼ͷಈը࠶ੜɻ
    ͜ΕΛRTCPeerConnectionʹ౉ͤ͹WebRTCͷετϦʔϜΛ
    ૹΔ͜ͱ͕Մೳɻ

    View Slide

  17. getUserMedia

    <br/>navigator.getUserMedia = ( navigator.getUserMedia ||<br/>navigator.webkitGetUserMedia ||<br/>navigator.mozGetUserMedia ||<br/>navigator.msGetUserMedia);<br/>var constraints = {<br/>audio: true,<br/>video: true<br/>}<br/>navigator.getUserMedia(constraints, gotStream, logError);<br/>function gotStream(stream) {<br/>var video = document.querySelector('video');<br/>video.src = window.URL.createObjectURL(stream);<br/>video.play();<br/>}<br/>function logError(error) { console.log(error); }<br/>

    View Slide

  18. DEMO

    View Slide

  19. MediaStreamͷ·ͱΊ
    -Ի੠ɾಈըॲཧΤϯδϯ͕ϒϥ΢βʹଘࡏ͍ͯ͠
    ΔɺΤίʔɺϊΠζॲཧ΍ಈըίʔσοΫͱ͍ͬͨ
    ϝσΟΞͷॲཧ͸ϒϥ΢βͰ࣮ݱ͞ΕΔ(ศར)ɻ
    -औಘ͢Δʹ͸getUserMediaΛ࢖͏

    View Slide

  20. WebRTC͕ఏڙ͢ΔAPI
    - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ
    - RTCPeerConnection: Ի੠΍ಈըͷ௨৴
    - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨

    View Slide

  21. RTCPeerConnection

    View Slide

  22. RTCPeerConnectionͱ͸
    P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ
    ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ

    View Slide

  23. RTCPeerConnectionͱ͸
    P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ
    ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ

    View Slide

  24. RTCPeerConnectionͱ͸
    P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ
    ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
    35$Λߦ͏ͨΊɺ6%1૚Ͱ
    ߦΘΕΔɻ 8FCʹ6%1͕ʂ

    View Slide

  25. RTCPeerConnectionͱ͸
    P2P઀ଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ
    ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
    35$1FFS$POOFDUJPO͸͜͜ͷ࿩

    View Slide

  26. RTCPeerConnection API
    1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ)
    2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ)
    - STUN
    - TURN
    3. DTLS (௨৴҉߸Խ)
    4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)

    View Slide

  27. RTCPeerConnection API
    - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ

    View Slide

  28. RTCPeerConnection API
    - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ
    ΠϯλϑΣʔε͸
    35$1FFS$POOFDUJPO
    ɹΛ௨ͯ͠-PDBM3FNPUF
    TUSFBNTʹ઀ଓ͢Δ͚ͩ

    View Slide

  29. RTCPeerConnection API
    - RTCPeerConnectionͷͨΊͷAPIࣗମ͸γϯϓϧɹ
    ͨͩதͰ΍ͬͯΔ͜ͱ͸
    ෳࡶ
    /"5τϥόʔαϧΛߦ͏*$&ϫʔ
    Ϋϑϩʔ؅ཧ
    ϐΞؒͷࣗಈΩʔϓΞϥΠϒ
    ϩʔΧϧετϦʔϜͷมԽه࿥
    ϦϞʔτετϦʔϜͷมԽه࿥
    ετϦʔϜ࠶ωΰγΤʔγϣϯ
    ΦϑΝʔੜ੒ɺΞϯαʔडྖ"1*
    ݱࡏͷঢ়ଶϦΫΤετ"1*

    View Slide

  30. P2P઀ଓΛཱ֬
    ͦ΋ͦ΋઀ଓཱ֬ͱ͸?

    View Slide

  31. P2P઀ଓΛཱ֬
    ͦ΋ͦ΋઀ଓཱ֬ͱ͸? (HTTPͷ৔߹)
    MJTUFO
    QVCMJD*1
    1035
    1VCMJD*11035ΛΫϥΠΞϯτ͕஌͍ͬͯͯ
    αʔόʔ͕઀ଓΛ଴͍ͬͯͯ
    ͦ͜ʹ઀ଓΛཁٻ͠ʹߦ͘

    View Slide

  32. P2P઀ଓΛཱ֬
    ͦ΋ͦ΋઀ଓཱ֬ͱ͸? (WebRTCͷ৔߹)
    *1
    1035
    8FC35$ͷ৔߹͸*1΋1035΋෼͔Βͳ͍
    ΋͠΋෼͔ͬͨͱͯ͠΋૬ख͕઀ଓΛཁٻͯ͠Δͱ͸ݶΒͳ͍
    /"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ
    ଴ػ
    /"5 /"5

    View Slide

  33. P2P઀ଓΛཱ֬
    ઀ଓཱ֬͢ΔͨΊʹ΍Δ͜ͱɻ
    *1
    1035
    8FC35$ͷ৔߹͸*1΋1035΋෼͔Βͳ͍
    ΋͠΋෼͔ͬͨͱͯ͠΋૬ख͕઀ଓΛཁٻͯ͠Δͱ͸ݶΒͳ͍
    /"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ
    ଴ػ
    /"5 /"5

    View Slide

  34. P2P઀ଓΛཱ֬
    P2P઀ଓͷ։࢝ҙਤΛ૬खʹ఻͑ͯɺ౸ணύ
    έοτΛ଴ػ͢Δ

    View Slide

  35. P2P઀ଓΛཱ֬
    P2P઀ଓͷ։࢝ҙਤΛ૬खʹ఻͑ͯɺ౸ணύ
    έοτΛ଴ػ͢Δ
    ͜ΕΛγάφϦϯάͱ͍͏

    View Slide

  36. P2P઀ଓΛཱ֬
    WebRTC͸γάφϦϯάࣗ਎͸ΞϓϦέʔ
    γϣϯʹґଘ͢ΔɻͳͷͰγάφϦϯάͷτ
    ϥϯεϙʔτͱϓϩτίϧͷબ୒͸ࣗ༝

    View Slide

  37. RTCPeerConnection API
    1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ)
    2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ)
    - STUN
    - TURN
    3. DTLS (௨৴҉߸Խ)
    4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)

    View Slide

  38. SDP

    View Slide

  39. Session Description
    Protocol

    View Slide

  40. ͭ·Γ͸ηογϣϯهड़༻ϓ
    ϩτίϧ

    View Slide

  41. Sesssion Description
    Protocol (SDP)
    WebRTC༻ͷηογϣϯهड़༻ϓϩτίϧ

    View Slide

  42. Sesssion Description
    Protocol (SDP)
    ͋·Γҙࣝ͢Δ͜ͱແ͍͕ɺύέοτΩϟϓ
    νϟϨϕϧͰ͸ૹ৴͞Ε͍ͯΔ಺༰͕෼͔Δɻ

    View Slide

  43. Sesssion Description
    Protocol (SDP)
    ηογϣϯهड़͕ަ׵͞ΕΔͱϝοηʔδͷަ׵͕ՄೳʹͳΔ
    SDPͰऔಘ͢Δ΋ͷ:
    ετϦʔϜͷλΠϓ(Ի੠ɺಈը)
    ίʔσοΫͳͲͷઃఆ
    ૬खͷIPͱPORT
    !

    View Slide

  44. RTCPeerConnection API
    1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ)
    2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ)
    - STUN
    - TURN
    3. DTLS (௨৴҉߸Խ)
    4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)

    View Slide

  45. ICE

    View Slide

  46. Interactive Connection
    Establishment

    View Slide

  47. ICE
    P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑)
    ICE͕ఏڙͯ͘͠ΕΔ΋ͷ͸௨৴ܦ࿏ͷཱ֬
    *1
    1035
    8FC35$ͷ৔߹͸૬खͷ*1΋1035΋෼͔Βͳ͍
    ΋͠΋෼͔ͬͨͱͯ͠΋/"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ
    ଴ػ
    /"5 /"5

    View Slide

  48. ICE
    P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑)
    ICE͕ఏڙͯ͘͠ΕΔ΋ͷ͸௨৴ܦ࿏ͷཱ֬
    *1
    1035
    8FC35$ͷ৔߹͸૬खͷ*1΋1035΋෼͔Βͳ͍
    ΋͠΋෼͔ͬͨͱͯ͠΋/"5ʹΑͬͯ஄͔ΕΔՄೳੑ΋͋Δ
    ଴ػ
    /"5 /"5
    ͜ΕΛղܾ͢Δखஈ

    View Slide

  49. ICEͷલʹNATτϥόʔαϧʹ
    ͍͓ͭͯ͞Β͍͓ͯ͘͠ɻ

    View Slide

  50. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ

    View Slide

  51. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
    ͜ͷΤϯτϦʹॻ͔Ε͍ͯͳ͍*1
    1035ͷ૊Έ߹Θͤͩͱ/"5֎͔Β
    ΞΫηεͯ͠΋/"5಺ʹಧ͔ͳ͍

    View Slide

  52. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
    ͪͳΈʹ͜ͷΤϯτϦͷू߹Λ
    USBOTMBUJPOUBCMF ຋༁ςʔϒϧ
    ͱ
    ݺͿ

    View Slide

  53. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
    ٯʹݴ͑͹͜͜ʹॻ͔Ε͍ͯΔ૊
    Έ߹Θ͕ͤ෼͔Ε͹/"5಺ͷϐΞ
    ʹΞΫηεՄೳ

    View Slide

  54. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
    ͨͩ͠ɺ/"5͸಺෦ͷ*11035Λ
    શͯอ͍࣋ͯ͠ΔΘ͚Ͱ͸ͳ͍ɻ
    ΞΫηε͕༗Δ౓ʹ຋༁ςʔϒϧʹ
    ௥Ճ͍ͯ͠Δɻ

    View Slide

  55. NATτϥόʔαϧ
    NATʹ͸private IP/PORTͱpublic IP/PORTͷ૊Έ߹
    Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
    ͭ·Γɺ/"5ͷ຋༁ςʔϒϧʹ*1
    1035ͷ૊ΛࡌͤΔʹ͸Ұ୴/"5͔
    Β֎ʹϦΫΤετΛ͓͘Δඞཁ͕
    ͋Δɻ

    View Slide

  56. STUN
    ࣗ෼ͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔໰͍߹Θ
    ͤΔɻ

    View Slide

  57. STUN
    ࣗ෼ͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔໰͍߹Θ
    ͤΔɻ
    ͜͏͢Δ͜ͱͰ/"5ͷ຋༁ςʔϒϧʹࣗ෼ͷ*1
    1035ΛࡌͤΔࣄ͕Ͱ͖Δɻ
    ·ͨ456/͔Βड͚ͨࣗ෼ͷ1VCMJD*1ͱ1035Λ

    ଞͷϐΞʹ౉ͤ͹௚઀௨৴͢Δ͜ͱ͕Ͱ͖Δɻ

    View Slide

  58. TURN
    STUNΛ࢖ͬͯ΋઀ଓͰ͖Δͱ͸ݶΒͳ͍ɺͦ΋ͦ΋
    UDPΛϒϩοΫ͢ΔϑΝΠΞ΢Υʔϧ͕͋ͬͨΒ݁
    ہ઀ଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ࢖͏ͷ͕TURN

    View Slide

  59. TURN
    STUNΛ࢖ͬͯ΋઀ଓͰ͖Δͱ͸ݶΒͳ͍ɺͦ΋ͦ΋
    UDPΛϒϩοΫ͢ΔϑΝΠΞ΢Υʔϧ͕͋ͬͨΒ݁
    ہ઀ଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ࢖͏ͷ͕TURN
    தؒͷ563/αʔόʔ͕σʔλΛ5$16%1
    ͰϦϨʔͤ͞Δɻ΋͸΍11Ͱ͸ͳ͍͕ɺ

    ࣮֬ʹͭͳ͕Δɻ

    View Slide

  60. ICE
    ICE͸STUN/TURNͱ͍ͬͨܦ࿏બ୒Λ࣮ࢪ͢Δ
    ·ͣࣗ෼ͷϩʔΧϧ*1Λ
    04ʹ໰͍߹ΘͤΔ

    View Slide

  61. ICE
    456/αʔόʹࣗ෼ͷ*1
    1035Λ໰͍߹ΘͤΔɻ
    456/

    View Slide

  62. ICE
    456/ʹܨ͕Βͳ͔ͬͨΒ
    563/Λ࢖ͬͯϦϨʔͤ͞Δ
    456/

    563/

    View Slide

  63. ICE
    P2P௨৴ͷͨΊʹ௒͑ͳ͍ͱ͍͚ͳ͍น (NAT௒͑)
    456/ʹܨ͕Βͳ͔ͬͨΒ
    563/Λ࢖ͬͯϦϨʔͤ͞Δ
    456/

    563/
    ࣗಈͰ456/ɺ563/ͷ੾Γ
    ෼͚Λͯ͘͠ΕΔɻศརɻ

    View Slide

  64. ICE
    ICEʹ΋໰୊͕͋Δɻॳظ઀ଓʹ͕͔͔࣌ؒΔɻ
    ઀ଓܦ࿏͕ܾ·Δ·Ͱ࣌ؒ
    ͔͔Γա͗Δɻ
    456/

    563/

    View Slide

  65. ͦ͜Ͱ Trickle ICE

    View Slide

  66. Trickle ICE
    STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω
    ϧΛ࢖ͬͯࣗ෼ͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊
    ͰͦΕΛ࢖͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ଴
    ͭඞཁ͕ͳ͍ɻ

    View Slide

  67. Trickle ICE
    STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω
    ϧΛ࢖ͬͯࣗ෼ͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊
    ͰͦΕΛ࢖͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ଴
    ͭඞཁ͕ͳ͍ɻ
    ީิΛݟ͚ͭͳ͕Βಉ࣌ʹγάφϦϯάνϟ
    ωϧͰܦ࿏ΛૹΓɺީิ͕ݟ͔ͭͬͨ୺͔Β
    ઀ଓΛࢼΈΔͷͰॳظ઀ଓ͕ૣ͘ͳΔɻ

    View Slide

  68. ࣮ࡍʹಈ͔ͦ͏
    DEMO
    http://simplewebrtc.com/demo.html

    View Slide

  69. ͪͳΈʹ

    View Slide

  70. chromeͩͱWebRTCͷ௨৴ঢ়گ͸ҎԼͷ
    ίϚϯυΛurlϑΥʔϜʹଧͭͱݟΕΔɻ
    chrome://webrtc-internals

    View Slide

  71. RTCPeerConnection API
    1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ)
    2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ)
    - STUN
    - TURN
    3. DTLS (௨৴҉߸Խ)
    4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)

    View Slide

  72. DTLS

    View Slide

  73. D (Datagram) + TLS

    View Slide

  74. WebRTCͰ͸ɺUDPͷ௨৴Λ҉
    ߸Խ͢ΔͷʹDTLSΛ࢖͍ͬͯΔ

    View Slide

  75. DTLS
    UDP͸ॱෆಉͰύέϩεΛڐ༰͢Δ͕ɺTLS͸ڐ༰͠
    ͳ͍ɻ
    DTLS͸಺෦Ͱ͜ΕΛ๷͙ͨΊʹ಺෦ʹγʔέϯε൪
    ߸ͱϑϥάϝϯτΦϑηοτɺͦͯ͠λΠϜΞ΢τ
    ࣍ͷ࠶ૹͷ࢓૊ΈΛఏڙ͍ͯ͠Δɻ

    View Slide

  76. DTLS
    γʔέϯε൪߸
    ϑϥάϝϯτΦϑηοτ

    View Slide

  77. DTLS
    ύέοτ
    ࣌ؒ಺ʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ

    View Slide

  78. DTLS
    ύέοτ
    ࣌ؒ಺ʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ
    6%1্Ͱ΋ಈ͘%5-4͕ͩɺ

    جຊ͸5$1Ͱ΍ͬͯΔ͜ͱʹ͍ۙ

    View Slide

  79. RTCPeerConnection API
    1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ)
    2. ICE protocol (NATΛ௒͑ͯP2P઀ଓཱ֬ҡ࣋͢ΔͨΊ)
    - STUN
    - TURN
    3. DTLS (௨৴҉߸Խ)
    4. SRTP, SCTP (ετϦʔϜଟॏԽɺ᫔᫓੍ޚɺϑϩʔ੍ޚ)

    View Slide

  80. SRTP

    View Slide

  81. Secure Realtime Transport
    Protocol

    View Slide

  82. SRTP
    IUUQXXXTMJEFTIBSFOFUJXBTIJXFC
    SUDNFFUVQS

    View Slide

  83. SRTP

    View Slide

  84. SRTP
    UJNFTUBNQ
    TFRVFODFOVNCFS
    ແࢹʂʂ

    View Slide

  85. SRTP

    View Slide

  86. SRTP

    View Slide

  87. SRTP
    4FRVFODF/VNCFSͱ
    5JNFTUBNQΛ࣋ͭ

    View Slide

  88. SCTP

    View Slide

  89. Stream Control
    Transmission Protocol

    View Slide

  90. SCTP

    View Slide

  91. SCTP
    ͭͷΤϯυϙΠϯτؒͰҰͭͷ઀ଓͷ্Ͱ
    ಠཱͨ͠ෳ਺ͷσʔλΛૹΔ͜ͱ͕Ͱ͖Δ

    View Slide

  92. ͋Ε͜ΕͲ͔ͬͰฉ͍ͨ͜ͱ
    ແ͍???

    View Slide

  93. http2

    View Slide

  94. http2ͱSCTPɺϨΠϠʔ͸ҧ
    ͏͚ͲࢼΈ͸ࣅ͍ͯΔɻ

    View Slide

  95. SCTP͸TCP/UDPͱಉ͡ϨΠϠʔ
    (τϥϯεϙʔτ૚)ͷϓϩτίϧ

    View Slide

  96. ίϥϜɿૉͷSCTPͷ࿩
    ࣮ࡍࠓͷTCP/UDPΛશͯSCTPʹͨ͠ΒͲ͏͔ɺͱ͍͏આ΋͋Δɻ
    HTTP2.0͕࣮ݱ͠Α͏ͱ͍ͯ͠Δͷ͸SCTPΛhttpͷϨΠϠͰ࣮ݱ͠Α͏ͱ͍ͯ͠ΔͷͰɺ
    SCTP͕࠾༻Ͱ͖ͨΒhttp2ͷ໰୊ͷ΄ͱΜͲ͕ࣗಈతʹղܾ͞ΕΔɻ

    (ͳ͓ɺGoogle͸ͦΕͰ͸ෆຬͳͨΊɺQUICΛ࡞ͬͨ໛༷ɻ)

    ͔͠͠ɺطଘͷϧʔλ΍NATσόΠε͸SCTPΛϕʔεʹ͍ͯ͠ͳ͍ɻ͔ͩΒΠϯλʔωοτ্
    ͰSCTPΛجຊʹ͢Δ͜ͱ͸ࠓͷͱ͜Ζເ෺ޠɻ
    ͨͩ͠ɺ಺෦ωοτϫʔΫͳΒ࢖͑Δɻ࣮ࡍʹSCTP͸๻Β΋࢖͍ͬͯͯɺLTEΛѻ͍ͬͯΔ
    ΩϟϦΞ͸಺෦ͷσʔλ௨৴͸SCTPͰ͋ΓɺΠϯλʔωοτΛྲྀ࣌͢ʹTCP/UDPʹม׵ͯ͠
    ͍Δɻ

    (ͱɺॻ͔Εͯ͸͍Δ΋ͷͷ࣮ࡍʹ͸ೝূαʔόͷҰ෦Ͱ࢖͏ఔ౓Ͱجຊ͸TCPͷ༷ࢠ)

    View Slide

  97. WebRTC͕ఏڙ͢ΔAPI
    - MediaStream : Ի੠΍ಈըͷετϦʔϜऔಘ
    - RTCPeerConnection: Ի੠΍ಈըͷ௨৴
    - DataChannel: ೚ҙͷΞϓϦέʔγϣϯσʔλͷ௨

    View Slide

  98. DataChannel

    View Slide

  99. DataChannel
    ϐΞؒͷΞϓϦέʔγϣϯσʔλΛ΍ΓͱΓ
    ͢Δ΍ʔͭɻ
    ૒ํ޲ੑΛ࣋ͭɻ΍ͬͱ͜͜·Ͱདྷͨײ͋Δɻ

    View Slide

  100. Μ?

    View Slide

  101. DataChannel
    ϐΞؒͷΞϓϦέʔγϣϯσʔλΛ΍ΓͱΓ
    ͢Δ΍ʔͭɻ
    ૒ํ޲ੑΛ࣋ͭɻ΍ͬͱ͜͜·Ͱདྷͨײ͋
    Δɻ

    View Slide

  102. ૒ํ޲ੑ?

    View Slide

  103. WebSocket

    View Slide

  104. DataChannel
    ࣮͸DataChannel API͸WebSocket APIͱ
    ͦͬ͘Γɺͦͯ͠ҙਤతʹࣅͤͯΔɻ

    View Slide

  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);
    };
    !

    View Slide

  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);
    }

    View Slide

  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);
    }
    ΫϦιπ

    View Slide

  108. DataChannelͱWebSocket
    ͷҧ͍
    - WebSocket͸TCPɺDataChannel͸UDP,
    DTLS, SCTPͷ3ͭͷϓϩτίϧͷ্Ͱಈ࡞͢
    Δɻ

    View Slide

  109. DataChannelͱWebSocket
    ͷҧ͍
    - ͭ·ΓDataChannel͸৴པੑɺॱংอূΛ
    ୲อ͢Δ͜ͱ΋୲อ͠ͳ͍͜ͱ΋Ͱ͖Δɺઃ
    ఆՄೳɻ

    View Slide

  110. DataChannel
    ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ௃͸
    1. ෦෼త৴པੑΛఏڙͰ͖Δɻ
    - ࠶ૹճ਺੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ
    - λΠϜΞ΢τظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ
    2. ॱෆಉʹσʔλΛड͚౉͢͜ͱ΋Ͱ͖Δɻ

    View Slide

  111. DataChannel
    ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ௃͸
    1. ෦෼త৴པੑΛఏڙͰ͖Δɻ
    - ࠶ૹճ਺੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ
    - λΠϜΞ΢τظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ
    2. ॱෆಉʹσʔλΛड͚౉͢͜ͱ΋Ͱ͖Δɻ
    5$1͔Β6%1·Ͱͷ৴པੑͱޮ཰
    ͷτϨʔυΦϑΛબ୒Ͱ͖Δ

    View Slide

  112. ٯʹݴ͑͹

    View Slide

  113. ઃఆΊΜͲ͍ ƅ㱼ƅ)

    View Slide

  114. DataChannel
    ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ͸༧ଌͰ
    ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧ΢ϯλ΍λΠϜΞ΢τͷ
    ઃఆ஋ʹ͸࠷దղ͸ଘࡏ͠ͳ͍ɻ
    !
    ΋͠΋৴པੑͷ௿͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ
    Ε͹ɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ

    View Slide

  115. DataChannel
    ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ͸༧ଌͰ
    ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧ΢ϯλ΍λΠϜΞ΢τͷ
    ઃఆ஋ʹ͸࠷దղ͸ଘࡏ͠ͳ͍ɻ
    !
    ΋͠΋৴པੑͷ௿͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ
    Ε͹ɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ
    ઃఆ͸ঢ়گʹԠͯ͡ରԠ͠ͳͯ͘
    ͸ͳΒͳ͍ɺಛʹ࠷దղ͸ͳ͍ɻ

    View Slide

  116. WebRTCͷϢʔεέʔεͱ
    ύϑΥʔϚϯε

    View Slide

  117. WebRTCͰέΞ͢Δ͜ͱ
    - ͱΓ͋͑ͣҰ൪͸ଳҬ෯
    ͍͘Βѹॖ͍ͯ͠Δͱݴͬͯ΋ଳҬ͸৯͏ɻ
    !
    HDΫΦϦςΟͩͱ1.2MbpsͷଳҬ͕ඞཁ
    શੈքతʹ͸ฏۉଳҬ෯͸3.1Mbps͔͠ͳ͍
    HDετϦʔϜΛૹΔͳΒ࠷௿Ͱ΋3.5G+ ͷ઀ଓ͕ඞཁ

    View Slide

  118. WebRTCͰέΞ͢Δ͜ͱ
    ࣍ʹγάφϦϯάαʔόʔ͕ඞཁ
    γάφϦϯάʹ͸ϨΠςϯγΛ୹͘͢Δ͜ͱ͕ෆՄܽɻ
    ͦͷͨΊWebSocket΍XHRɺSSEͱ͍ͬͨ઀ଓΛҡ࣋͢Δαʔό͕ඞ
    ཁʹͳΔɻ
    Φϓγϣϯͱͯ͠DataChannelΛ࢖͏͜ͱͰϐΞؒͷ઀ଓཱ֬ޙ͸WS
    ͷ୅ΘΓʹDataChannelͰݞ୅ΘΓͰ͖Δɻ
    ͜͏͢ΔͱγάφϦϯάαʔόʔͷෛՙ͕ݮΔɻ

    View Slide

  119. WebRTCͰέΞ͢Δ͜ͱ
    ࠷ޙʹSTUNͱTURNͷαʔό͕ඞཁ
    NAT͸ϓϥΠϕʔτωοτϫʔΫ্ʹ͸΄΅࣮֬ʹଘࡏ͢Δɻ
    STUNαʔό͸stundͱ͍͏ਓؾͷOpenSourceαʔό͕͋ΔͷͰݕ౼͢Δ
    ͜ͱɻ
    UDPΛϒϩοΫ͍ͯ͠Δ؀ڥ͕͋Δ͜ͱ΋ߟ͑ΔͱTURNͷಋೖ΋ඞཁʹ
    ͳΔɻTURNʹܨ͕ΔͱTCPͱಉ༷ͷ઀ଓํࣜʹͳΔͨΊɺ΄ͱΜͲUDP
    ͷྑ͞͸ಘΒΕͳ͍ɻ࠷ऴखஈͱͯ͠ݕ౼͢Δ͜ͱɻ

    View Slide

  120. ͱ͍͏Θ͚Ͱߟ͑ͳ͖Ό͍͚ͳ
    ͍͜ͱ͸ଟ͍ɻ

    View Slide

  121. ͬ͟ͱ্͛Δͱ

    View Slide

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

    View Slide

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

    View Slide

  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/
    !

    View Slide