Slide 1
Slide 1 text
C
WEB
WEBRTC
iOSDC Japan 2018
2018 / 09/ 02
Slide 2
Slide 2 text
WGT:
uCB\
uTwitter\@Tukimikage
• WebRTCLE
u;8
• <XWebRTC,2')+5/ SkyWay 69
• 7&305$145 (!)DevRelNJ
• ;8PiOS/Android/WebIMA
?PHPJSO9
u#.0*(ZD
• WebRTC Meetup Tokyo / Osaka / Fukuoka 7>(2014H
• WebRTC Beginners Tokyo 7>(2016H
u,2-5)
• UY[Q@FV6
S="%RKFTDS
Slide 3
Slide 3 text
,6<
WebRTC5;<'!(!Web9#)*&%
./
-1#)*&% 3
0=24
,6iOS"+$&8:7 WebRTC<
Slide 4
Slide 4 text
• WebRTC
• WebRTC
• WebRTC
• WebRTC
• WebRTC
•
Slide 5
Slide 5 text
slido.com
#welovewebrtc
Slide 6
Slide 6 text
WebRTC
Web
Real Time
Communication
IP /
/
Slide 7
Slide 7 text
www.flickr.com/photos/mattb_tv/2550476978
1876
Slide 8
Slide 8 text
2000
NapsterSkype
www.flickr.com/photos/132889348@N07/18410514419
Slide 9
Slide 9 text
2011WebRTC
www.flickr.com/photos/86979666@N00/6990460438
Slide 10
Slide 10 text
⇔
WebRTC
Slide 11
Slide 11 text
)$ WebRTC
'
+
!
P2P"%
⇔
!"%
*(
WebRTC
Slide 12
Slide 12 text
Web
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
chimera.labs.oreilly.com/books/1230000000545/ch18.html
Slide 15
Slide 15 text
chimera.labs.oreilly.com/books/1230000000545/ch18.html
,API
*&"%$')
(!
+
(NAT#)
P2P$
Slide 16
Slide 16 text
()
Slide 17
Slide 17 text
WebRTCIP&"SkyWayFaceTime
$%
#
!
Slide 18
Slide 18 text
Slide 19
Slide 19 text
9WebRTC:=
• "%#'
API(2*)
;.
+*
• "% -
36-
50
,7/8
• iOS/Android/Web&#%!'$<4
(2*1;.+*
Slide 20
Slide 20 text
@WebRTC
BE
• &)
!'",#API-91. C5
21
• &)"$
4:=4 <7
3>6?
• iOS/Android/Web
+')!#%,(
D;
-918
C5
21
%*)!
WebRTC3>0/
A
Slide 21
Slide 21 text
()
-/
WebRTC$&!"'%5,SDK+
#&892.API*71604
; !3:<
Slide 22
Slide 22 text
Slide 23
Slide 23 text
%…
• BHSDK)A##([V
• \C"pR)L%EiIWIFbZ
'…
• ocaPJMbaP!J!]nmSY
s
• HbhQ
&E
&-;>"$NqUD
• 312=>/<+:G%F!XkKO %`T ?!
re^@g l4,5,jE*
WebRTC7;126.>9)f_dA08'&(08&
Slide 24
Slide 24 text
WebRTC
•
• ICE
•
•
• libwebrtc
• Safari
Slide 25
Slide 25 text
• A
B
21:1
/
Slide 26
Slide 26 text
• A
B
21:1
/
HTML/CSS/JavaScript
Slide 27
Slide 27 text
• AB
21:1
/
WebRTC
WebRTC
Slide 28
Slide 28 text
• A
B
21:1
/
Slide 29
Slide 29 text
%
• AB21:1
/
'
&
$(
") # !
*IP+
Slide 30
Slide 30 text
"(
• A B2#1:1
/
)
'+%-
&$
/,.IP
*0
A&$!
Slide 31
Slide 31 text
%
• AB21:1
/
"'
&
$(
!) #
*IP+
Slide 32
Slide 32 text
&
• AB2 1:1
/
#(
%)
"+ $!
-*,IP
'.
#(
B$!
Slide 33
Slide 33 text
!
&*
• AB2(
1:1!
/
ABP2P
.-1/
2UDP $"##3
P2P0%
)'
$,+0%.
Slide 34
Slide 34 text
• A
B
21:1
/
/
Slide 35
Slide 35 text
• P2P*'
( SDP(Session Description
Protocol)&
• !WebRTC#%")
!$ok
Slide 36
Slide 36 text
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 )
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
ICE ( internet connectivity establishment )
•P2P
•STUN/TURN
Slide 39
Slide 39 text
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,. (-
Slide 40
Slide 40 text
UDP
NAT NAT
B
NG
A
OK
B
OK
Slide 41
Slide 41 text
TURN
• UDP'! &
• FW%UDP
'$#
! "
TURN
Allocation Request
IP STUN
IP TURN
Allocation Success Response
IP STUN
IP TURN
TURN B
A IP
TURN
Slide 42
Slide 42 text
TURN
TURN
TURN
Create PermissionA
B B 2
Create Permission Success Response
OK
• UDP'! &
• FW%UDP
'$#
! "
Slide 43
Slide 43 text
TURN
TURN
TURN
A
Create Permission A
B B 2
Create Permission Success Response
OK
2 P
A
• UDP'! &
• FW%UDP
'$#
! "
Slide 44
Slide 44 text
TURN
• TURNUDP0/!#"-&+ * %'
• UDPTCPTLS4,2
3
()
TURN
TURN
TURN-UDP / TURN-TCP / TURN-TLS
4,2
1$!.
UDP
Slide 46
Slide 46 text
,
•RTP+ #'
SRTP(Secure RTP)
%
•SRTP,-%$!,-"DTLS
)
•DTLSTLS&*UDP(
Slide 47
Slide 47 text
;$
•WebRTCDataChannel
;$)5
•SCTP(Stream Control Transmission Protocol)
;$
•SCTPUDPTCP%&<#6>-'.
3=/:9'.
+4
• SCTP,/3 DTLS1*(
• 0!2
SCTPQUIC"87
Slide 48
Slide 48 text
libwebrtc
• WebRTC$(
• Google '% OSS-Framework
• Chrome, Firefox, SafariWebRTC-PF"& iOS, Android SDK
#
• iOS/Android
SDK!
https://webrtc.googlesource.com/src/
Slide 49
Slide 49 text
libwebrtc
• libwebrtc
-&
)
• *" %#(,$!+
'
https://cocoapods.org/pods/GoogleWebRTC https://github.com/shiguredo/sora-webrtc-build
Slide 50
Slide 50 text
libwebrtc
($
https://qiita.com/tnoho/items/f5afa3ba749eed9b9716
)#"
($libwebrtc'
%!&
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
Safari
WebRTC
https://gist.github.com/voluntas/3849d9881d97ea0bb403a2122f0e4a31
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
WebRTC
•
• ICE
•
•
• libwebrtc
• Safari
Slide 55
Slide 55 text
WebRTC
Slide 56
Slide 56 text
sketch.pixiv.net/items/3937947988965054025
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
clinics.medley.life
Slide 59
Slide 59 text
www.streamroot.io
Slide 60
Slide 60 text
WebRTC
Slide 61
Slide 61 text
x WebRTC
IoT x WebRTC
VR x WebRTC
Slide 62
Slide 62 text
"0("' x WebRTC
• WebRTC>B"0("'4
= +0$ 0$;?
• :1<2EI= +0$ 0$J
• MCU/SFU*%"0(0;?
• <1<51.)-SFU
Slide 63
Slide 63 text
!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
Slide 64
Slide 64 text
IoT x WebRTC
• WebRTC@K ?&(!%;S
<
,.%#.% 7C
• 1RaspberryPiI9&(!%40
• HN"+-
5/WebRTC1"+-=2 P
U
4/>JE8%*)TJ
TQ
• RX
• &(!%
Slide 65
Slide 65 text
• 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,/!
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
VR x WebRTC
WebVR meets WebRTC: Towards 360-degree social VR experiences
https://youtu.be/2Ng67blnp9c?t=9
Slide 68
Slide 68 text
VR x WebRTC
• Oculus Go
VR
• WebRTC Gateway
RTP
WebRTC
RTP
RTP
RTP
WebRTC Gateway
Slide 69
Slide 69 text
• 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`VKI'ba
X]G