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
10k
あえて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
350
WebRTCの技術概要 / SkyWayの紹介
yusuke84
0
750
WebRTCにおけるオーディオとの付き合い方
yusuke84
2
1.4k
小さく始めろ、評価は期待するな、理解ある上司を探せ、プロダクト愛を持て!
yusuke84
0
1.7k
新米コミュニティマネージャーが実践した開発者コミュニティ0to1
yusuke84
1
630
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Designing with Data
zakiwarfel
94
4.8k
The Language of Interfaces
destraynor
150
22k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Producing Creativity
orderedlist
PRO
335
39k
RailsConf 2023
tenderlove
0
510
Six Lessons from altMBA
skipperchong
19
2.9k
Documentation Writing (for coders)
carmenintech
59
3.8k
Designing for humans not robots
tammielis
247
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
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