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
560
WebRTCの技術概要 / SkyWayの紹介
yusuke84
0
870
WebRTCにおけるオーディオとの付き合い方
yusuke84
2
1.5k
小さく始めろ、評価は期待するな、理解ある上司を探せ、プロダクト愛を持て!
yusuke84
0
1.7k
新米コミュニティマネージャーが実践した開発者コミュニティ0to1
yusuke84
1
680
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Bash Introduction
62gerente
608
210k
GitHub's CSS Performance
jonrohan
1030
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Rails Girls Zürich Keynote
gr2m
93
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Thoughts on Productivity
jonyablonski
67
4.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Automating Front-end Workflow
addyosmani
1365
200k
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