Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yusuke Naka
September 02, 2018
10k

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

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

Yusuke Naka

September 02, 2018
Tweet

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 • ;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[[email protected]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/[email protected]/18410514419

  9. 2011WebRTC    www.flickr.com/photos/[email protected]/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&"SkyWayFaceTime  $%  #    !

  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 '… • ocaPJMbaP!J!]nmSY

    s • HbhQ &E &-;>"$NqUD • 312=>/<+:G%F !XkKO %`T ?!  re^@g l4,5,jE* WebRTC7;126.>9)f_dA08'& (08&
  24. WebRTC •  • ICE •   • 

     • libwebrtc • Safari
  25.    • A B 21:1   /

  26.    • A B 21:1   /

    HTML/CSS/JavaScript  
  27.     • AB 21:1  / WebRTC

       WebRTC   
  28.    • A B 21:1   /

     
  29.    % • AB 21:1  / '

    & $( ") # ! *IP+
  30.    "( • A B 2#1:1  /

    )  '+ %- &$ /,. IP *0  A &$!
  31.    % • AB 21:1  / "'

    & $( !) # *IP+
  32.    & • AB 2 1:1  /

    #( %) "+ $! -*, IP '. #( B $!
  33. !  &* • A B2( 1:1! / A BP2P

     .-1/ 2UDP $"##3 P2P0%  )' $,+0%.
  34.    • A B 21: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/! #"-&+ * %' • UDPTCPTLS4,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/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
  54. WebRTC •  • ICE •   • 

     • libwebrtc • Safari
  55. WebRTC

  56. sketch.pixiv.net/items/3937947988965054025

  57. None
  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%/ • GH[email protected]Cbot"0("'4 ,/&79FD63 GH[email protected];?  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/WebRTC1"+-=2 P U 4/>JE8%*)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 • 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
  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,[email protected]:?QZ C_6>1,= • WebRTC^J[\%#WebRTC6;015*@8&SUO  " $O& NF^EBH

    • WebRTCLAM[email protected])2SUIoTYD%VR YD% RW&T! • WebRTC&SU`V KI'ba X]G
  70.