あえてWebエンジニア以外の人に 聞いてほしいWebRTCの話

iOSDC Japan 2018 3日目の発表資料です。

Transcript

1. C
   WEB  WEBRTC iOSDC Japan 2018  2018 / 09/ 02
2. WGT: uCB\ uTwitter\@Tukimikage • WebRTCLE  u;8 • <X WebRTC,2')+5/ SkyWay 69 • 7&305$145 (!)
   DevRelNJ • ;8P
   iOS/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
3. ,6<  WebRTC5;<'!(!Web9#)*&%  ./ 
   -1#)*&% 3 0=24   ,6iOS"+$&8:7 WebRTC<  
4.  • WebRTC • WebRTC • WebRTC  • WebRTC   • WebRTC
   
    • 
5. 
    slido.com #welovewebrtc
6. WebRTC Web Real Time Communication IP / /
7. www.flickr.com/photos/mattb_tv/2550476978       1876
   
8. 2000 
   NapsterSkype    www.flickr.com/photos/132889348@N07/18410514419
9. 2011WebRTC
      www.flickr.com/photos/86979666@N00/6990460438
10. 
    ⇔         
    WebRTC
    
11. )$ WebRTC   &#' 
      
     +  ! P2P"% 
    ⇔   !"%     *( 
     
     WebRTC
    
12. Web  
       
13. 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
14. chimera.labs.oreilly.com/books/1230000000545/ch18.html
15. chimera.labs.oreilly.com/books/1230000000545/ch18.html ,API *&"
    %$'
    ) (!  +  (NAT#)  P2P$ 
    
16.   (
    )
17. WebRTCIP&"
    SkyWay
    FaceTime  $%  #    !
18.   
    
19. 9WebRTC := • "% #' API(2*) ;.  +* • "%  - 36-
     50 ,7/8 • iOS/Android/Web &#%!'$<4 (2*1 ;. +*
20. @WebRTC BE • &) !'",# API-91. C5  21 • &)"$ 4 :=4 <7  3>6? • iOS/Android/Web +')!#%,( D; -918 C5 21 
    %*)! WebRTC3>0/ A
21. () -/ 
     WebRTC$&!"'%5,SDK+ #&892.API*71604   ; !3: <
22. 
     
23. %… • BHSDK)A## ([V • \C"pR)L%EiIW 
    IFbZ '… • ocaPJ
    MbaP!J
    !]nmSY s • HbhQ &E &-;>"
    $NqUD • 312=>/<+:G%F !Xk
    KO %`T ?!  re^@g l4,5,jE* WebRTC7;126.>9)f_dA08'& (08&
24. WebRTC
     •  • ICE •   •   • libwebrtc • Safari
25.    • A B 2
    1:1   /
26.    • A B 2
    1:1   / HTML/CSS/JavaScript  
27.     • AB 2
    1:1  / WebRTC    WebRTC   
28.    • A B 2
    1:1   /  
29.    % • AB 2
    1:1  / ' & $( ") # ! *IP+
30.    "( • A B 2#
    1:1  / )  '+ %- &$ /,. IP
    *0  A &$!
31.    % • AB 2
    1:1  / "' & $( !) # *IP+
32.    & • AB 2 
    1:1  / #( %) "+ $! -*, IP
    '. #( B $!
33. !  &* • A B2(
    1:1! / A BP2P  .-1/ 2UDP $"##3 P2P0%  )' $,+0%.
34.    • A B 2
    1:1   / /
35.  • P2P*' ( SDP(Session Description Protocol)& •  ! WebRTC #%" )
    
     !$ok
36. 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  )
37. 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
    
38. ICE ( internet connectivity establishment ) •P2P     •STUN/TURN
      
39. 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,. (-
40. UDP
    NAT NAT B   NG
      A    OK  B  OK
41. TURN • UDP'
    ! & • FW%UDP '$# 
    ! " TURN Allocation Request IP STUN IP TURN Allocation Success Response IP STUN IP TURN TURN B A IP TURN
42. TURN TURN TURN Create PermissionA B B 2 Create Permission Success Response OK • UDP'
    ! & • FW%UDP '$# 
    ! "
43. TURN TURN TURN A Create Permission A B B 2 Create Permission Success Response OK 2 P A • UDP'
    ! & • FW%UDP '$# 
    ! "
44. TURN • TURNUDP0/! #"-&+ * %' • UDP
    TCP
    TLS4,2   3 ()  TURN   TURN    
       TURN-UDP / TURN-TCP / TURN-TLS 4,2 1$!. UDP
45. &!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
46.  , •RTP+ #'  SRTP(Secure RTP) 
    % •SRTP,-%$!,-"DTLS ) •DTLSTLS&* UDP( 
47.  ;$ •WebRTC DataChannel   ;$)5 •SCTP(Stream Control Transmission Protocol)   ;$ •SCTPUDP TCP%&<#6
    >-'.
    3=/:9'. +4 • SCTP,/ 3 DTLS 1*( • 0!2 
    SCTP QUIC"87 
48. libwebrtc • WebRTC$(   • Google  '%
    OSS-Framework • Chrome, Firefox, SafariWebRTC-PF"& iOS, Android SDK #
     • iOS/Android SDK!
     https://webrtc.googlesource.com/src/
49. libwebrtc • libwebrtc -& )     • *"  %#(,$!+
    '
    https://cocoapods.org/pods/GoogleWebRTC https://github.com/shiguredo/sora-webrtc-build
50. libwebrtc  ($ https://qiita.com/tnoho/items/f5afa3ba749eed9b9716
    )#"   
    ($ libwebrtc'  %!&
51. 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
52. 
    Safari WebRTC     https://gist.github.com/voluntas/3849d9881d97ea0bb403a2122f0e4a31
53. WebRTC IPv6 ! • WebRTCIPv6 (+ • IPv4 IPv6%' NAT64/DNS64
    1 TURN(.Android464XLAT
    2 STUN#)/ • & SafariTURN ,$   v6-v4 %' -   *"
    1 NAT64/DNS64 --- https://www.slideshare.net/yuyarin/cedecnet-2015
    2 464XLAT  --- https://www.slideshare.net/twovs/192004-on-android
54. WebRTC
     •  • ICE •   •   • libwebrtc • Safari
55. WebRTC
    
56. sketch.pixiv.net/items/3937947988965054025
58. clinics.medley.life
59. www.streamroot.io
60. WebRTC
    
    
61. 
     x WebRTC IoT x WebRTC VR x WebRTC
62. "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#
63. !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
64. IoT x WebRTC • WebRTC@K ?&(!%;S < ,.%#.% 7C • 1RaspberryPiI9&(!%40  • HN"+- 5/WebRTC
    1"+-=2 P U
    4/>J
    E8%*)TJ TQ  • RX • &(!%<MVF:L • W3&(!% • RaspberryPiI9&(!% $%'G6  • RX OA WebRTC Gateway BD 
65. • 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,/! 
66. 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 • RTP
    UDP$]![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
67. VR x WebRTC WebVR meets WebRTC: Towards 360-degree social VR experiences https://youtu.be/2Ng67blnp9c?t=9
68. VR x WebRTC • Oculus Go VR
      • WebRTC Gateway     RTP WebRTC RTP RTP RTP WebRTC Gateway
69.  • WebRTCP6;015*@8&<(=/)8,793+@.:?QZ C_6>1,= • WebRTC^J[\%#WebRTC6;015*@8&SUO  " $O& NF^EBH • WebRTCLAM
    -@4-)2SU
    IoTYD%
    VR YD% RW&T! • WebRTC&SU`V KI'ba X]G
70.