Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebRTC (概要から中の仕組みまで)
Search
Yosuke Furukawa
PRO
October 08, 2014
Programming
9
9k
WebRTC (概要から中の仕組みまで)
High Performance Browser Networking 輪読会の資料です。
Yosuke Furukawa
PRO
October 08, 2014
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
15
1.8k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
620
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.7k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
8.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.4k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.5k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
18
10k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.8k
Other Decks in Programming
See All in Programming
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
CSC307 Lecture 10
javiergs
PRO
0
310
継続的な活動で築く地方エンジニアの道
myamashii
2
350
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Introduction to GitOps
hwchiu
0
110
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
AHC035解説
terryu16
0
710
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Web development in the modern age
philhawksworth
203
10k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Designing for humans not robots
tammielis
247
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Faster Mobile Websites
deanohume
303
30k
The Invisible Side of Design
smashingmag
294
50k
Practical Orchestrator
shlominoach
185
10k
Embracing the Ebb and Flow
colly
81
4.3k
Visualization
eitanlees
139
14k
Transcript
WebRTC High Performance Browser Networking ྠಡձ @yosuke_furukawa
WebRTC Web Real-Time Communication
None
ฉ͍ͨ΄͏͕͍͍ͭ
Web x Realtimeͷྺ࢙ 2005: Ajax ੜ 2006: Comet͕Ajaxͱͱʹݟ͞ΕΔ 2006: ServerSentEvents
ఏҊ։࢝ 2011: WebSocket͕ग़ͯ͘Δ 2012: WebRTC *(new!!)
WebRTCͱ? WebRTCϒϥβ্Ͱ ϦΞϧλΠϜίϛϡχέʔγϣϯʢRTCʣ ΛՄೳʹ͢ΔΣϒͷͨΊͷϑϨʔϜϫʔΫ ! ΣϒͰͷߴ࣭ͳίϛϡχέʔγϣϯͷͨΊ ԻʗϏσΦνϟοτΞϓϦέʔγϣϯ Ͱར༻͞ΕΔωοτϫʔΫɾԻɾө૾ίϯϙʔωϯτͳͲͷجຊ తͳߏཁૉؚ͕·ΕΔ
(ࢀߟจݙ: WebRTCͱ͔ษڧձ ͋ΜͲ͏͢͠)
WebRTC͕ఏڙ͢ΔAPI - MediaStream : ԻಈըͷετϦʔϜऔಘ - RTCPeerConnection: Իಈըͷ௨৴ - DataChannel:
ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
WebRTC͕ఏڙ͢ΔAPI - MediaStream : ԻಈըͷετϦʔϜऔಘ - RTCPeerConnection: Իಈըͷ௨৴ - DataChannel:
ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
MediaStream
MediaStreamΛࢧ͑Δٕज़ - ԻɾಈըॲཧΤϯδϯ - getUserMedia API
ԻɾಈըॲཧΤϯδϯ
ԻɾಈըॲཧΤϯδϯ ԻɾಈըॲཧΤϯδϯ͜ͷຊͰઐൣғ֎ɻ ԻɾಈըॲཧΛ࣮ݱ͢ΔʹɺίʔσοΫɺΤίʔ আڈɺϊΠζϦμΫγϣϯɺը૾ิਖ਼ͱ͍ͬͨॲཧ Λϒϥβ͕ػೳͱͯ࣋ͭ͠ඞཁ͕͋Δɻ
ԻɾಈըॲཧΤϯδϯ
ԻɾಈըॲཧΤϯδϯ ͜Ε͚ͩͷػೳΛ ༻ҙ͢Δඞཁ͕͋Δɻ
getUserMedia
getUserMedia ԻಈըΛStreamͱͯ͠ड͚औΔJavaScriptͷAPIɻ͜ΕΛ MediaStreamͱݺͿɻ ͜ΕΛvideoλάʹͤࣗͷಈը࠶ੜɻ ͜ΕΛRTCPeerConnectionʹͤWebRTCͷετϦʔϜΛ ૹΔ͜ͱ͕Մೳɻ
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>
DEMO
MediaStreamͷ·ͱΊ -ԻɾಈըॲཧΤϯδϯ͕ϒϥβʹଘࡏ͍ͯ͠ ΔɺΤίʔɺϊΠζॲཧಈըίʔσοΫͱ͍ͬͨ ϝσΟΞͷॲཧϒϥβͰ࣮ݱ͞ΕΔ(ศར)ɻ -औಘ͢ΔʹgetUserMediaΛ͏
WebRTC͕ఏڙ͢ΔAPI - MediaStream : ԻಈըͷετϦʔϜऔಘ - RTCPeerConnection: Իಈըͷ௨৴ - DataChannel:
ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
RTCPeerConnection
RTCPeerConnectionͱ P2PଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
RTCPeerConnectionͱ P2PଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ
RTCPeerConnectionͱ P2PଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ 35$Λߦ͏ͨΊɺ6%1Ͱ ߦΘΕΔɻ 8FCʹ6%1͕ʂ
RTCPeerConnectionͱ P2PଓΛཱ֬ͤ͞ΔͨΊͷॲཧͱͦΕΛҡ࣋͠ଓ ͚ΔͨΊͷॲཧΛఏڙ͢Δػೳɻ 35$1FFS$POOFDUJPO͜͜ͷ
RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ͑ͯP2Pଓཱ֬ҡ࣋͢ΔͨΊ) -
STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ੍ޚɺϑϩʔ੍ޚ)
RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମγϯϓϧɹ
RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମγϯϓϧɹ ΠϯλϑΣʔε 35$1FFS$POOFDUJPO ɹΛ௨ͯ͠-PDBM3FNPUF TUSFBNTʹଓ͢Δ͚ͩ
RTCPeerConnection API - RTCPeerConnectionͷͨΊͷAPIࣗମγϯϓϧɹ ͨͩதͰͬͯΔ͜ͱ ෳࡶ /"5τϥόʔαϧΛߦ͏*$&ϫʔ Ϋϑϩʔཧ
ϐΞؒͷࣗಈΩʔϓΞϥΠϒ ϩʔΧϧετϦʔϜͷมԽه ϦϞʔτετϦʔϜͷมԽه ετϦʔϜ࠶ωΰγΤʔγϣϯ ΦϑΝʔੜɺΞϯαʔडྖ"1* ݱࡏͷঢ়ଶϦΫΤετ"1*
P2PଓΛཱ֬ ͦͦଓཱ֬ͱ?
P2PଓΛཱ֬ ͦͦଓཱ֬ͱ? (HTTPͷ߹) MJTUFO QVCMJD*1 1035 1VCMJD*11035ΛΫϥΠΞϯτ͕͍ͬͯͯ αʔόʔ͕ଓΛ͍ͬͯͯ
ͦ͜ʹଓΛཁٻ͠ʹߦ͘
P2PଓΛཱ֬ ͦͦଓཱ֬ͱ? (WebRTCͷ߹) *1 1035 8FC35$ͷ߹*11035͔Βͳ͍ ͔ͬͨ͠ͱͯ͠૬ख͕ଓΛཁٻͯ͠ΔͱݶΒͳ͍
/"5ʹΑ͔ͬͯΕΔՄೳੑ͋Δ ػ /"5 /"5
P2PଓΛཱ֬ ଓཱ֬͢ΔͨΊʹΔ͜ͱɻ *1 1035 8FC35$ͷ߹*11035͔Βͳ͍ ͔ͬͨ͠ͱͯ͠૬ख͕ଓΛཁٻͯ͠ΔͱݶΒͳ͍
/"5ʹΑ͔ͬͯΕΔՄೳੑ͋Δ ػ /"5 /"5
P2PଓΛཱ֬ P2Pଓͷ։࢝ҙਤΛ૬खʹ͑ͯɺ౸ணύ έοτΛػ͢Δ
P2PଓΛཱ֬ P2Pଓͷ։࢝ҙਤΛ૬खʹ͑ͯɺ౸ணύ έοτΛػ͢Δ ͜ΕΛγάφϦϯάͱ͍͏
P2PଓΛཱ֬ WebRTCγάφϦϯάࣗΞϓϦέʔ γϣϯʹґଘ͢ΔɻͳͷͰγάφϦϯάͷτ ϥϯεϙʔτͱϓϩτίϧͷબࣗ༝
RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ͑ͯP2Pଓཱ֬ҡ࣋͢ΔͨΊ) -
STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ੍ޚɺϑϩʔ੍ޚ)
SDP
Session Description Protocol
ͭ·Γηογϣϯهड़༻ϓ ϩτίϧ
Sesssion Description Protocol (SDP) WebRTC༻ͷηογϣϯهड़༻ϓϩτίϧ
Sesssion Description Protocol (SDP) ͋·Γҙࣝ͢Δ͜ͱແ͍͕ɺύέοτΩϟϓ νϟϨϕϧͰૹ৴͞Ε͍ͯΔ༰͕͔Δɻ
Sesssion Description Protocol (SDP) ηογϣϯهड़͕ަ͞ΕΔͱϝοηʔδͷަ͕ՄೳʹͳΔ SDPͰऔಘ͢Δͷ: ετϦʔϜͷλΠϓ(Իɺಈը) ίʔσοΫͳͲͷઃఆ ૬खͷIPͱPORT !
RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ͑ͯP2Pଓཱ֬ҡ࣋͢ΔͨΊ) -
STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ੍ޚɺϑϩʔ੍ޚ)
ICE
Interactive Connection Establishment
ICE P2P௨৴ͷͨΊʹ͑ͳ͍ͱ͍͚ͳ͍น (NAT͑) ICE͕ఏڙͯ͘͠ΕΔͷ௨৴ܦ࿏ͷཱ֬ *1 1035 8FC35$ͷ߹૬खͷ*11035͔Βͳ͍
͔ͬͨ͠ͱͯ͠/"5ʹΑ͔ͬͯΕΔՄೳੑ͋Δ ػ /"5 /"5
ICE P2P௨৴ͷͨΊʹ͑ͳ͍ͱ͍͚ͳ͍น (NAT͑) ICE͕ఏڙͯ͘͠ΕΔͷ௨৴ܦ࿏ͷཱ֬ *1 1035 8FC35$ͷ߹૬खͷ*11035͔Βͳ͍
͔ͬͨ͠ͱͯ͠/"5ʹΑ͔ͬͯΕΔՄೳੑ͋Δ ػ /"5 /"5 ͜ΕΛղܾ͢Δखஈ
ICEͷલʹNATτϥόʔαϧʹ ͍͓ͭͯ͞Β͍͓ͯ͘͠ɻ
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͜ͷΤϯτϦʹॻ͔Ε͍ͯͳ͍*1 1035ͷΈ߹Θͤͩͱ/"5֎͔Β ΞΫηεͯ͠/"5ʹಧ͔ͳ͍
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͪͳΈʹ͜ͷΤϯτϦͷू߹Λ USBOTMBUJPOUBCMF ༁ςʔϒϧ ͱ ݺͿ
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ٯʹݴ͑͜͜ʹॻ͔Ε͍ͯΔ Έ߹Θ͕͔ͤΕ/"5ͷϐΞ ʹΞΫηεՄೳ
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͨͩ͠ɺ/"5෦ͷ*11035Λ શͯอ͍࣋ͯ͠ΔΘ͚Ͱͳ͍ɻ ΞΫηε͕༗Δʹ༁ςʔϒϧʹ Ճ͍ͯ͠Δɻ
NATτϥόʔαϧ NATʹprivate IP/PORTͱpublic IP/PORTͷΈ߹ Θ͕ͤॻ͔Ε͍ͯΔΤϯτϦ͕͋Δɻ ͭ·Γɺ/"5ͷ༁ςʔϒϧʹ*1 1035ͷΛࡌͤΔʹҰ୴/"5͔ Β֎ʹϦΫΤετΛ͓͘Δඞཁ͕ ͋Δɻ
STUN ࣗͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔͍߹Θ ͤΔɻ
STUN ࣗͷIPͱPORT͕֎͔ΒݟΔͱͳΜͳͷ͔͍߹Θ ͤΔɻ ͜͏͢Δ͜ͱͰ/"5ͷ༁ςʔϒϧʹࣗͷ*1 1035ΛࡌͤΔࣄ͕Ͱ͖Δɻ ·ͨ456/͔Βड͚ͨࣗͷ1VCMJD*1ͱ1035Λ ଞͷϐΞʹͤ௨৴͢Δ͜ͱ͕Ͱ͖Δɻ
TURN STUNΛͬͯଓͰ͖ΔͱݶΒͳ͍ɺͦͦ UDPΛϒϩοΫ͢ΔϑΝΠΞΥʔϧ͕͋ͬͨΒ݁ ہଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ͏ͷ͕TURN
TURN STUNΛͬͯଓͰ͖ΔͱݶΒͳ͍ɺͦͦ UDPΛϒϩοΫ͢ΔϑΝΠΞΥʔϧ͕͋ͬͨΒ݁ ہଓͰ͖ͳ͍ɻͦ͏͍͏࣌ʹ͏ͷ͕TURN தؒͷ563/αʔόʔ͕σʔλΛ5$16%1 ͰϦϨʔͤ͞Δɻ11Ͱͳ͍͕ɺ ࣮֬ʹͭͳ͕Δɻ
ICE ICESTUN/TURNͱ͍ͬͨܦ࿏બΛ࣮ࢪ͢Δ ·ͣࣗͷϩʔΧϧ*1Λ 04ʹ͍߹ΘͤΔ
ICE 456/αʔόʹࣗͷ*1 1035Λ͍߹ΘͤΔɻ 456/
ICE 456/ʹܨ͕Βͳ͔ͬͨΒ 563/ΛͬͯϦϨʔͤ͞Δ 456/ ✗ 563/
ICE P2P௨৴ͷͨΊʹ͑ͳ͍ͱ͍͚ͳ͍น (NAT͑) 456/ʹܨ͕Βͳ͔ͬͨΒ 563/ΛͬͯϦϨʔͤ͞Δ 456/ ✗ 563/ ࣗಈͰ456/ɺ563/ͷΓ ͚Λͯ͘͠ΕΔɻศརɻ
ICE ICEʹ͕͋Δɻॳظଓʹ͕͔͔࣌ؒΔɻ ଓܦ࿏͕ܾ·Δ·Ͱ࣌ؒ ͔͔Γա͗Δɻ 456/ ✗ 563/
ͦ͜Ͱ Trickle ICE
Trickle ICE STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω ϧΛͬͯࣗͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊ ͰͦΕΛ͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ ͭඞཁ͕ͳ͍ɻ
Trickle ICE STUN, TURNͷީิݕࡧͱಉ࣌ʹγάφϦϯάνϟω ϧΛͬͯࣗͷ௨৴ܦ࿏Λૹ৴͠ɺݟ͔ͭͬͨஈ֊ ͰͦΕΛ͏ɻSTUN/TURNͷશܦ࿏͕ܾ·ΔͷΛ ͭඞཁ͕ͳ͍ɻ ީิΛݟ͚ͭͳ͕Βಉ࣌ʹγάφϦϯάνϟ ωϧͰܦ࿏ΛૹΓɺީิ͕ݟ͔͔ͭͬͨΒ ଓΛࢼΈΔͷͰॳظଓ͕ૣ͘ͳΔɻ
࣮ࡍʹಈ͔ͦ͏ DEMO http://simplewebrtc.com/demo.html
ͪͳΈʹ
chromeͩͱWebRTCͷ௨৴ঢ়گҎԼͷ ίϚϯυΛurlϑΥʔϜʹଧͭͱݟΕΔɻ chrome://webrtc-internals
RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ͑ͯP2Pଓཱ֬ҡ࣋͢ΔͨΊ) -
STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ੍ޚɺϑϩʔ੍ޚ)
DTLS
D (Datagram) + TLS
WebRTCͰɺUDPͷ௨৴Λ҉ ߸Խ͢ΔͷʹDTLSΛ͍ͬͯΔ
DTLS UDPॱෆಉͰύέϩεΛڐ༰͢Δ͕ɺTLSڐ༰͠ ͳ͍ɻ DTLS෦Ͱ͜ΕΛ͙ͨΊʹ෦ʹγʔέϯε൪ ߸ͱϑϥάϝϯτΦϑηοτɺͦͯ͠λΠϜΞτ ࣍ͷ࠶ૹͷΈΛఏڙ͍ͯ͠Δɻ
DTLS γʔέϯε൪߸ ϑϥάϝϯτΦϑηοτ
DTLS ύέοτ ࣌ؒʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ
DTLS ύέοτ ࣌ؒʹฦ৴͕ͳ͔ͬͨΒ࠶ૹ 6%1্Ͱಈ͘%5-4͕ͩɺ جຊ5$1ͰͬͯΔ͜ͱʹ͍ۙ
RTCPeerConnection API 1. SDP (P2PωΰγΤʔτ࣌ͷσʔλϑΥʔϚοτ) 2. ICE protocol (NATΛ͑ͯP2Pଓཱ֬ҡ࣋͢ΔͨΊ) -
STUN - TURN 3. DTLS (௨৴҉߸Խ) 4. SRTP, SCTP (ετϦʔϜଟॏԽɺ੍ޚɺϑϩʔ੍ޚ)
SRTP
Secure Realtime Transport Protocol
SRTP IUUQXXXTMJEFTIBSFOFUJXBTIJXFC SUDNFFUVQS
SRTP
SRTP UJNFTUBNQ TFRVFODFOVNCFS ແࢹʂʂ
SRTP
SRTP
SRTP 4FRVFODF/VNCFSͱ 5JNFTUBNQΛ࣋ͭ
SCTP
Stream Control Transmission Protocol
SCTP
SCTP ͭͷΤϯυϙΠϯτؒͰҰͭͷଓͷ্Ͱ ಠཱͨ͠ෳͷσʔλΛૹΔ͜ͱ͕Ͱ͖Δ
͋Ε͜ΕͲ͔ͬͰฉ͍ͨ͜ͱ ແ͍???
http2
http2ͱSCTPɺϨΠϠʔҧ ͏͚ͲࢼΈࣅ͍ͯΔɻ
SCTPTCP/UDPͱಉ͡ϨΠϠʔ (τϥϯεϙʔτ)ͷϓϩτίϧ
ίϥϜɿૉͷSCTPͷ ࣮ࡍࠓͷTCP/UDPΛશͯSCTPʹͨ͠ΒͲ͏͔ɺͱ͍͏આ͋Δɻ HTTP2.0͕࣮ݱ͠Α͏ͱ͍ͯ͠ΔͷSCTPΛhttpͷϨΠϠͰ࣮ݱ͠Α͏ͱ͍ͯ͠ΔͷͰɺ SCTP͕࠾༻Ͱ͖ͨΒhttp2ͷͷ΄ͱΜͲ͕ࣗಈతʹղܾ͞ΕΔɻ (ͳ͓ɺGoogleͦΕͰෆຬͳͨΊɺQUICΛ࡞༷ͬͨɻ) ͔͠͠ɺطଘͷϧʔλNATσόΠεSCTPΛϕʔεʹ͍ͯ͠ͳ͍ɻ͔ͩΒΠϯλʔωοτ্ ͰSCTPΛجຊʹ͢Δ͜ͱࠓͷͱ͜Ζເޠɻ ͨͩ͠ɺ෦ωοτϫʔΫͳΒ͑Δɻ࣮ࡍʹSCTPΒ͍ͬͯͯɺLTEΛѻ͍ͬͯΔ ΩϟϦΞ෦ͷσʔλ௨৴SCTPͰ͋ΓɺΠϯλʔωοτΛྲྀ࣌͢ʹTCP/UDPʹมͯ͠
͍Δɻ (ͱɺॻ͔Ε͍ͯΔͷͷ࣮ࡍʹೝূαʔόͷҰ෦Ͱ͏ఔͰجຊTCPͷ༷ࢠ)
WebRTC͕ఏڙ͢ΔAPI - MediaStream : ԻಈըͷετϦʔϜऔಘ - RTCPeerConnection: Իಈըͷ௨৴ - DataChannel:
ҙͷΞϓϦέʔγϣϯσʔλͷ௨ ৴
DataChannel
DataChannel ϐΞؒͷΞϓϦέʔγϣϯσʔλΛΓͱΓ ͢Δʔͭɻ ํੑΛ࣋ͭɻͬͱ͜͜·Ͱདྷͨײ͋Δɻ
Μ?
DataChannel ϐΞؒͷΞϓϦέʔγϣϯσʔλΛΓͱΓ ͢Δʔͭɻ ํੑΛ࣋ͭɻͬͱ͜͜·Ͱདྷͨײ͋ Δɻ
ํੑ?
WebSocket
DataChannel ࣮DataChannel APIWebSocket APIͱ ͦͬ͘Γɺͦͯ͠ҙਤతʹࣅͤͯΔɻ
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); }; !
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); }
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); } ΫϦιπ
DataChannelͱWebSocket ͷҧ͍ - WebSocketTCPɺDataChannelUDP, DTLS, SCTPͷ3ͭͷϓϩτίϧͷ্Ͱಈ࡞͢ Δɻ
DataChannelͱWebSocket ͷҧ͍ - ͭ·ΓDataChannel৴པੑɺॱংอূΛ ୲อ͢Δ͜ͱ୲อ͠ͳ͍͜ͱͰ͖Δɺઃ ఆՄೳɻ
DataChannel ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ 1. ෦త৴པੑΛఏڙͰ͖Δɻ - ࠶ૹճ੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ - λΠϜΞτظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ 2. ॱෆಉʹσʔλΛड͚͢͜ͱͰ͖Δɻ
DataChannel ଞͷݴ༿Ͱݴ͏ͱDataChannelͷಛ 1. ෦త৴པੑΛఏڙͰ͖Δɻ - ࠶ૹճ੍ݶΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ - λΠϜΞτظؒΛઃ͚ͯͦΕҎ্ϛεͬͨΒఘΊΔ 2. ॱෆಉʹσʔλΛड͚͢͜ͱͰ͖Δɻ
5$1͔Β6%1·Ͱͷ৴པੑͱޮ ͷτϨʔυΦϑΛબͰ͖Δ
ٯʹݴ͑
ઃఆΊΜͲ͍ ƅ㱼ƅ)
DataChannel ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ༧ଌͰ ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧϯλλΠϜΞτͷ ઃఆʹ࠷దղଘࡏ͠ͳ͍ɻ ! ͠৴པੑͷ͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ ΕɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ
DataChannel ύέοτϩεͷཱ֬ͱϐΞؒͷϨΠςϯγ༧ଌͰ ͖ͳ͍ɻͦͷͨΊɺ࠶ૹΧϯλλΠϜΞτͷ ઃఆʹ࠷దղଘࡏ͠ͳ͍ɻ ! ͠৴པੑͷ͍νϟωϧͰ࠷ྑͷ݁ՌΛಘ͚ͨ ΕɺϝοηʔδΛখ͘͢͞Δ͜ͱͩɻ ઃఆঢ়گʹԠͯ͡ରԠ͠ͳͯ͘ ͳΒͳ͍ɺಛʹ࠷దղͳ͍ɻ
WebRTCͷϢʔεέʔεͱ ύϑΥʔϚϯε
WebRTCͰέΞ͢Δ͜ͱ - ͱΓ͋͑ͣҰ൪ଳҬ෯ ͍͘Βѹॖ͍ͯ͠ΔͱݴͬͯଳҬ৯͏ɻ ! HDΫΦϦςΟͩͱ1.2MbpsͷଳҬ͕ඞཁ શੈքతʹฏۉଳҬ෯3.1Mbps͔͠ͳ͍ HDετϦʔϜΛૹΔͳΒ࠷Ͱ3.5G+ ͷଓ͕ඞཁ
WebRTCͰέΞ͢Δ͜ͱ ࣍ʹγάφϦϯάαʔόʔ͕ඞཁ γάφϦϯάʹϨΠςϯγΛ͘͢Δ͜ͱ͕ෆՄܽɻ ͦͷͨΊWebSocketXHRɺSSEͱ͍ͬͨଓΛҡ࣋͢Δαʔό͕ඞ ཁʹͳΔɻ Φϓγϣϯͱͯ͠DataChannelΛ͏͜ͱͰϐΞؒͷଓཱ֬ޙWS ͷΘΓʹDataChannelͰݞΘΓͰ͖Δɻ ͜͏͢ΔͱγάφϦϯάαʔόʔͷෛՙ͕ݮΔɻ
WebRTCͰέΞ͢Δ͜ͱ ࠷ޙʹSTUNͱTURNͷαʔό͕ඞཁ NATϓϥΠϕʔτωοτϫʔΫ্ʹ΄΅࣮֬ʹଘࡏ͢Δɻ STUNαʔόstundͱ͍͏ਓؾͷOpenSourceαʔό͕͋ΔͷͰݕ౼͢Δ ͜ͱɻ UDPΛϒϩοΫ͍ͯ͠Δڥ͕͋Δ͜ͱߟ͑ΔͱTURNͷಋೖඞཁʹ ͳΔɻTURNʹܨ͕ΔͱTCPͱಉ༷ͷଓํࣜʹͳΔͨΊɺ΄ͱΜͲUDP ͷྑ͞ಘΒΕͳ͍ɻ࠷ऴखஈͱͯ͠ݕ౼͢Δ͜ͱɻ
ͱ͍͏Θ͚Ͱߟ͑ͳ͖Ό͍͚ͳ ͍͜ͱଟ͍ɻ
ͬ͟ͱ্͛Δͱ
456/ /"5 /"5 563/ 4JHOBMJOH4FSWFS /"5Λ͑ΔͨΊͷ456/ 563/ɻ *$&"HFOUͰΓ͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF*$&Λ͏ɻ 84
44&ͷϨΠςϯγͷαʔόʔΛ ࡞Δɻଓཱ֬ޙ%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹҙ͢Δɻ σʔλͳΔ͘খ͘͢͞Δɻ దͳϝσΟΞ੍ݶΛઃ͚Δɻ %BUB$IBOOFMͷόοϑΝσʔλࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ ෦త৴པੑͷ͋Δ৴ͳΒ࠶ૹΧϯτͱλΠϜΞτΛదʹઃఆ͢Δɻ
456/ /"5 /"5 563/ 4JHOBMJOH4FSWFS /"5Λ͑ΔͨΊͷ456/ 563/ɻ *$&"HFOUͰΓ͚ΔɺՄೳͩͬ ͨΒΛ5SJDLMF*$&Λ͏ɻ 84
44&ͷϨΠςϯγͷαʔόʔΛ ࡞Δɻଓཱ֬ޙ%BUB$IBOOFM্Ͱͷ γάφϦϯάΛߦ͏ࣄΛߟྀ͢Δɻ ͪΌΜͱଳҬ෯ʹҙ͢Δɻ σʔλͳΔ͘খ͘͢͞Δɻ దͳϝσΟΞ੍ݶΛઃ͚Δɻ %BUB$IBOOFMͷόοϑΝσʔλࢹ͓͖ͯ͠ɺωοτϫʔΫϦϯΫͷঢ়گ ʹదԠͤ͞Δɻ ෦త৴པੑͷ͋Δ৴ͳΒ࠶ૹΧϯτͱλΠϜΞτΛదʹઃఆ͢Δɻ )BQQZ8FC35$-*'&
ࢀߟจݙ 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/ !