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
あえてWebエンジニア以外の人に聞いてほしいWebRTCの話
Search
Yusuke Naka
September 02, 2018
3
11k
あえてWebエンジニア以外の人に 聞いてほしいWebRTCの話
iOSDC Japan 2018 3日目の発表資料です。
Yusuke Naka
September 02, 2018
Tweet
Share
More Decks by Yusuke Naka
See All by Yusuke Naka
新SkyWayの魅⼒と今後の展望
yusuke84
0
530
WebRTCの技術概要 / SkyWayの紹介
yusuke84
0
850
WebRTCにおけるオーディオとの付き合い方
yusuke84
2
1.5k
小さく始めろ、評価は期待するな、理解ある上司を探せ、プロダクト愛を持て!
yusuke84
0
1.7k
新米コミュニティマネージャーが実践した開発者コミュニティ0to1
yusuke84
1
670
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
691
190k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Building an army of robots
kneath
302
42k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
How to name files
jennybc
75
98k
Embracing the Ebb and Flow
colly
83
4.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
C WEB WEBRTC iOSDC Japan 2018 2018 /
09/ 02
WGT: uCB\ uTwitter\@Tukimikage • WebRTCLE u;8 • <X WebRTC,2')+5/
SkyWay 69 • 7&305$145 (!)DevRelNJ • ;8PiOS/Android/WebI MA ?PHPJSO 9 u#.0*(ZD • WebRTC Meetup Tokyo / Osaka / Fukuoka 7>(2014H • WebRTC Beginners Tokyo 7>(2016H u,2-5) • UY[Q@FV6 S="%RKFTDS
,6< WebRTC5;<'!(!Web9#)*&% ./ -1#)*&% 3 0=24
,6iOS"+$&8:7 WebRTC<
• WebRTC • WebRTC • WebRTC • WebRTC
• WebRTC •
slido.com #welovewebrtc
WebRTC Web Real Time Communication IP / /
www.flickr.com/photos/mattb_tv/2550476978 1876
2000 NapsterSkype www.flickr.com/photos/132889348@N07/18410514419
2011WebRTC www.flickr.com/photos/86979666@N00/6990460438
⇔
WebRTC
)$ WebRTC &#' +
! P2P"% ⇔ !"% *( WebRTC
Web
WebRTC • WebRTC 6+-0 • / 4 IETF(C~E) W3C(F) 6+!
C?9!>2;@"),1BA%8 & • D$4(NAT:)5 P2P'; • E7. <= 3*() • F(# API
chimera.labs.oreilly.com/books/1230000000545/ch18.html
chimera.labs.oreilly.com/books/1230000000545/ch18.html ,API *&"%$') (! + (NAT#) P2P$
()
WebRTCIP&"SkyWayFaceTime $% # !
9WebRTC := • "% #' API(2*) ;. +* •
"% - 36- 50 ,7/8 • iOS/Android/Web &#%!'$<4 (2*1 ;. +*
@WebRTC BE • &) !'",# API-91. C5 21 •
&)"$ 4 :=4 <7 3>6? • iOS/Android/Web +')!#%,( D; -918 C5 21 %*)! WebRTC3>0/ A
() -/ WebRTC$&!"'%5,SDK+ #&892.API*71604 ; !3: <
%… • BHSDK)A## ([V • \C"pR)L%EiIW IFbZ '… • ocaPJMbaP!J!]nmSY
s • HbhQ &E &-;>"$NqUD • 312=>/<+:G%F !XkKO %`T ?! re^@g l4,5,jE* WebRTC7;126.>9)f_dA08'& (08&
WebRTC • • ICE • •
• libwebrtc • Safari
• A B 21:1 /
• A B 21:1 /
HTML/CSS/JavaScript
• AB 21:1 / WebRTC
WebRTC
• A B 21:1 /
% • AB 21:1 / '
& $( ") # ! *IP+
"( • A B 2#1:1 /
) '+ %- &$ /,. IP *0 A &$!
% • AB 21:1 / "'
& $( !) # *IP+
& • AB 2 1:1 /
#( %) "+ $! -*, IP '. #( B $!
! &* • A B2( 1:1! / A BP2P
.-1/ 2UDP $"##3 P2P0% )' $,+0%.
• A B 21:1 /
/
• P2P*' ( SDP(Session Description Protocol)& • !
WebRTC #%" ) !$ok
SDP v=0 (……) a=group:BUNDLE audio video m=audio 54321 RTP/SAVPF 111
103 104 0 8 106 105 13 126 (……) c=IN IP4 100.1.2.3 a=rtcp:54321 IN IP4 100.1.2.3 a=candidate:4022866446 1 udp 2113937151 192.168.0.1 34567 typ host generation 0 a=candidate:4022866446 2 udp 2113937151 192.168.0.1 34567 typ host generation 0 (……) a=rtpmap:111 opus/48000/2 a=fmtp:111 minptime=10 a=rtpmap:103 ISAC/16000 a=rtpmap:104 ISAC/32000 a=rtpmap:0 PCMU/8000 a=rtpmap:8 PCMA/8000 (……) SRTP 54321 Opus(48000kHz )
SDP v=0 (……) a=group:BUNDLE audio video m=audio 54321 RTP/SAVPF 111
103 104 0 8 106 105 13 126 (……) c=IN IP4 100.1.2.3 a=rtcp:54321 IN IP4 100.1.2.3 a=candidate:4022866446 1 udp 2113937151 192.168.0.1 34567 typ host generation 0 a=candidate:4022866446 2 udp 2113937151 192.168.0.1 34567 typ host generation 0 (……) a=rtpmap:111 opus/48000/2 a=fmtp:111 minptime=10 a=rtpmap:103 ISAC/16000 a=rtpmap:104 ISAC/32000 a=rtpmap:0 PCMU/8000 a=rtpmap:8 PCMA/8000 (……) ICE
ICE ( internet connectivity establishment ) •P2P
•STUN/TURN
STUN • ICE &.# • NAT2 # • 1% !#IP
#/'0 $- • * +(&.UDP#""), STUN STUN NAT Binding Request +!$IPSTUN +!"IPSTUN Binding Request +!$IPNAT & IP() +!"IPSTUN Binding Response +!$IPSTUN +!"IPNAT & IP() 'NAT & IP() Binding Response +!$IPSTUN +!"IPSTUN 'NAT & IP() *)% # IP,. (-
UDP NAT NAT B NG A
OK B OK
TURN • UDP'! & • FW%UDP '$# ! "
TURN Allocation Request IP STUN IP TURN Allocation Success Response IP STUN IP TURN TURN B A IP TURN
TURN TURN TURN Create PermissionA B B 2 Create Permission
Success Response OK • UDP'! & • FW%UDP '$# ! "
TURN TURN TURN A Create Permission A B B 2
Create Permission Success Response OK 2 P A • UDP'! & • FW%UDP '$# ! "
TURN • TURNUDP0/! #"-&+ * %' • UDPTCPTLS4,2
3 () TURN TURN TURN-UDP / TURN-TCP / TURN-TLS 4,2 1$!. UDP
&!H- • WebRTC'( %6C7 UDPH-1; • UDPH- ?=I4GE")3B RTP(Real Time
Protocol)H-D Jitter() Out-of-order () Loss ( ) % *# .= $*/5 +*>0 ,: .F )<A @8HA JRTCPSR/RR 29K
, •RTP+ #' SRTP(Secure RTP) % •SRTP,-%$!,-"DTLS
) •DTLSTLS&* UDP(
;$ •WebRTC DataChannel ;$)5 •SCTP(Stream Control Transmission
Protocol) ;$ •SCTPUDP TCP%&<#6>-'. 3=/:9'. +4 • SCTP,/ 3 DTLS 1*( • 0!2 SCTP QUIC"87
libwebrtc • WebRTC$( • Google '% OSS-Framework
• Chrome, Firefox, SafariWebRTC-PF"& iOS, Android SDK # • iOS/Android SDK! https://webrtc.googlesource.com/src/
libwebrtc • libwebrtc -& ) •
*" %#(,$!+ ' https://cocoapods.org/pods/GoogleWebRTC https://github.com/shiguredo/sora-webrtc-build
libwebrtc ($ https://qiita.com/tnoho/items/f5afa3ba749eed9b9716 )#"
($ libwebrtc' %!&
Safari-/ • 2017.09 SafariWebRTC -/ • libwebrtc % Chrome/Firefox
;'20 • %H.264$"% 41 • "(! ,86.:& • RTCPeerConnection+* getUserMedia+* • 97@taminif3 #)5 http://taminif.hatenablog.jp/entry/2017/10/03/005306
Safari WebRTC https://gist.github.com/voluntas/3849d9881d97ea0bb403a2122f0e4a31
WebRTC IPv6 ! • WebRTCIPv6 (+ • IPv4 IPv6%' NAT64/DNS641
TURN(.Android464XLAT2 STUN#)/ • & SafariTURN ,$ v6-v4 %' - *" 1 NAT64/DNS64 --- https://www.slideshare.net/yuyarin/cedecnet-2015 2 464XLAT --- https://www.slideshare.net/twovs/192004-on-android
WebRTC • • ICE • •
• libwebrtc • Safari
WebRTC
sketch.pixiv.net/items/3937947988965054025
None
clinics.medley.life
www.streamroot.io
WebRTC
x WebRTC IoT x WebRTC VR x WebRTC
"0("' x WebRTC • WebRTC>B"0("'4 = +0$ 0$;? • :1<2EI
= +0$ 0$J • MCU/SFU*%"0(0;? • <1<51.)-SFU<A8.)-MCU • .!0%/ • GHG@Cbot"0("'4 ,/&79FD63 GHG@;? SFU A B C .!0%/bot $&.0#
!6+!( x WebRTC • .0$' • DNH/4';=P2P/ 4'5!6+P2P>
• !6+936+1IP(2#C <:? *%,%K • TURNF • &.0$' • /4'$-&6': !6+!(WebRTC4"4.4% )4#AL • @I7WebRTC GatewayEG • #6/,0%JB8A L DMM Eikaiwa-san @ WebRTC Meetup Tokyo #18 2 6&4Bot#6/,0%M https://youtu.be/aVmCgVunfog?t=2834
IoT x WebRTC • WebRTC@K ?&(!%;S < ,.%#.% 7C •
1RaspberryPiI9&(!%40 • HN"+- 5/WebRTC1"+-=2 P U 4/>JE8%*)TJ TQ • RX • &(!%<MVF:L • W3&(!% • RaspberryPiI9&(!% $%'G6 • RX OA WebRTC Gateway BD
• RTP0& 6*)' $ WebRTC,/ • WebRTC,/!"+ 2 (.
IoT x WebRTC RTP WebRTC(5%) WebRTC Gateway WebRTC,/! 14 WebRTC(#5%) WebRTC Gateway -3: https://www.elekit.co.jp/product/MR-9107 WebRTC,/!
IoT x WebRTC • Janus WebRTC Gateway - https://janus.conf.meetecho.com/ •
O;24(%7KEQW$Z SFU/MCU/bdbTDR"9W`G • SlackdC_YSSFUIS #"eXA"K $f • https://iwashi.co/2016/03/05/slack-webrtc-analysis.html • SkyWay WebRTC Gateway - https://github.com/skyway/skyway-webrtc-gateway/ • libwebrtc38,SkyWay*(057()81!iOS/Android/JS SDKU:JV?W • RTPUDP$]![WebRTC #" • Janus@ 24(%7PQWHF"" • McB WebRTC Gateway momo (WebRTC Native Client) – https://momo.shiguredo.com • libwebrtc38,Sigiredo soraeSFUf!.1%,L>$SFUa="S^< • N\ Open momo26+&'/ 5,-8/ • https://gist.github.com/voluntas/51c67d0d8ce7af9f24655cee4d7dd253
VR x WebRTC WebVR meets WebRTC: Towards 360-degree social VR
experiences https://youtu.be/2Ng67blnp9c?t=9
VR x WebRTC • Oculus Go VR • WebRTC
Gateway RTP WebRTC RTP RTP RTP WebRTC Gateway
• WebRTCP6;015*@8&<(=/)8,793+@.:?QZ C_6>1,= • WebRTC^J[\%#WebRTC6;015*@8&SUO " $O& NF^EBH
• WebRTCLAM-@4-)2SUIoTYD%VR YD% RW&T! • WebRTC&SU`V KI'ba X]G