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
580
WebRTCの技術概要 / SkyWayの紹介
yusuke84
0
880
WebRTCにおけるオーディオとの付き合い方
yusuke84
2
1.5k
小さく始めろ、評価は期待するな、理解ある上司を探せ、プロダクト愛を持て!
yusuke84
0
1.7k
新米コミュニティマネージャーが実践した開発者コミュニティ0to1
yusuke84
1
680
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
How to Ace a Technical Interview
jacobian
276
23k
Agile that works and the tools we love
rasmusluckow
327
21k
KATA
mclloyd
29
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
120
Building Applications with DynamoDB
mza
90
6.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Why Our Code Smells
bkeepers
PRO
334
57k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
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