はじめてのwebrtc/ortc
TRANSCRIPT
1. Copyright NTT Communications Corporation. All rights reserved. HTML5 Conference 2015 in WebRTC/ORTC NTT 2. Copyright NTT Communications Corporation. All rights reserved. 1 u@Tukimikage l NTT Web l WebRTC Meetup Tokyo http://webrtcjp.info/ 3. Copyright NTT Communications Corporation. All rights reserved. 2 u WebRTCSkyWay 2013125 https://skyway.io 4. Copyright NTT Communications Corporation. All rights reserved. 3 u HTML5 Experts.jp HTML5 Web Web https://html5experts.jp/ 5. Copyright NTT Communications Corporation. All rights reserved. 4 WebWebRTC/ ORTC WebRTC 6. Copyright NTT Communications Corporation. All rights reserved. WebRTC/ORTC WebRTC WebRTC 5 7. Copyright NTT Communications Corporation. All rights reserved. 6 WebRTC/ORTC WebRTC WebRTC SkyWay 8. Copyright NTT Communications Corporation. All rights reserved. 7 HTML5 HTML5WebRTC http://www.slideshare.net/dynamis/web-standards-infographics 9. Copyright NTT Communications Corporation. All rights reserved. 8 WebRTC Web Web WebRTC 10. Copyright NTT Communications Corporation. All rights reserved. 9 WebRTC 2 1. l (WebExSkype) WebRTC 2. l C++ WebRTC 11. Copyright NTT Communications Corporation. All rights reserved. WebRTC 10 OS 2015/7/4 Windows Chrome Windows Firefox Windows IE Windows Edge 201410 ORTC 20157 getUserMedia Windows Mac Chrome Mac Firefox Mac Safari Mac Android Chrome Android Firefox Android Android 5.0 Android iOS Chrome iOS Safari iOS 12. Copyright NTT Communications Corporation. All rights reserved. 11 WebRTC/ORTC WebRTC WebRTC SkyWay 13. Copyright NTT Communications Corporation. All rights reserved. Web 12 URL 8 20 SkyWaySkyWay WebRTC WebRTC Chat on SkyWay https://chat.skyway.io 14. Copyright NTT Communications Corporation. All rights reserved. 13 /) 15. Copyright NTT Communications Corporation. All rights reserved. Click to Call 14 WebRTCVoIP Web (IVR) WebRTC VoIP WebRTC SIP+RTP IP () Internet 16. Copyright NTT Communications Corporation. All rights reserved. 1click.io : 15 1 (4) https://1click.io/ 17. Copyright NTT Communications Corporation. All rights reserved. 16 Google ChromeAPI https://skyway.io/example/caption-phone/ SkyWay 0.SkyWay 4. API API 2. 3. 1. 5. 18. Copyright NTT Communications Corporation. All rights reserved. 17 Double RoboticsRomotiveWebRTC (VGo) 0. 1. 2. 2. SkyWay Romo by Romotive www.romotive.jp 15,660 iPhone iOS Double by Double Robotics www.doublerobotics.com $2,499 iPad iOS 19. Copyright NTT Communications Corporation. All rights reserved. ROMO TURISMO 18 https://www.youtube.com/watch?v=oO-WjCKX9LY 20. Copyright NTT Communications Corporation. All rights reserved. Skype for Web 19 Skype for Web 2015/6/15 ORTC SkypeNative https://web.skype.com/ja/ 21. Copyright NTT Communications Corporation. All rights reserved. Facebook 20 FacebookWebRTC 22. Copyright NTT Communications Corporation. All rights reserved. Zoen 21 WebRTC https://www.thezoen.com/ 23. Copyright NTT Communications Corporation. All rights reserved. iCam: WebRTC 22 WebRTC WebRTC http://www.amaryllo.eu/ 24. Copyright NTT Communications Corporation. All rights reserved. 23 2000(HTML Conference 2013) 150 SkyWay SkyWay WebRTC HTML5 JUMBOTRON jt.skyway.io 25. Copyright NTT Communications Corporation. All rights reserved. 24 2000(HTML Conference 2013) 150 http://is.gd/html5jt#0100 ChromeFirefoxPCAndroid 26. Copyright NTT Communications Corporation. All rights reserved. MistCDN 25 CDN WebRTCdata channel https://www.mist-t.co.jp/#demo 27. Copyright NTT Communications Corporation. All rights reserved. 26 WebRTC/ORTC WebRTC WebRTC SkyWay 28. Copyright NTT Communications Corporation. All rights reserved. WebRTC 27 https://www.flickr.com/photos/noaaphotolib/5041457573 29. Copyright NTT Communications Corporation. All rights reserved. WebRTC 28 30. Copyright NTT Communications Corporation. All rights reserved. WebRTC 29 WebRTC ICE P2P 31. Copyright NTT Communications Corporation. All rights reserved. ICE(Interactive Connectivity Establishment) 3030 NAT NAT STUN Signaling STUN WebRTC Cli WebRTC Cli WebRTCP2P STUN IP UDP NAT TURN NAT WebRTC 89%TURN TURN 32. Copyright NTT Communications Corporation. All rights reserved. UDP 31 NAT STUN NAT NAT Type 33. Copyright NTT Communications Corporation. All rights reserved. UDP 32 IP 111.111.111.111 50000 NAT STUN NAT NAT Type 34. Copyright NTT Communications Corporation. All rights reserved. UDP 33 IP 222.222.222.222 20000 NAT STUN NAT IP:111.111.111.111 PORT:10000 NAT Type 35. Copyright NTT Communications Corporation. All rights reserved. UDP 34 NAT STUN NAT IP:111.111.111.111 PORT:10000 IP:222.222.222.222 PORT:20000 IPPORT NAT Type 36. Copyright NTT Communications Corporation. All rights reserved. UDP 35 NAT STUN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 NAT Type 37. Copyright NTT Communications Corporation. All rights reserved. UDP 36 NAT STUN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 NAT Type 38. Copyright NTT Communications Corporation. All rights reserved. UDP 37 NAT STUN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 NAT Type 39. Copyright NTT Communications Corporation. All rights reserved. TURN 38 NATTURN NAT Type STUN STUN STUN STUN STUN STUN STUN TURN STUN STUN STUN TURN STUN TURN TURN TURN NAT Type http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc 40. Copyright NTT Communications Corporation. All rights reserved. TURN 39 NAT TURN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 TURN P2P IP:11.11.11.11 PORT:3478 IP:11.11.11.11 PORT:3478 41. Copyright NTT Communications Corporation. All rights reserved. TURN 40 NAT TURN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 TURN IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 TCPTCP FW FW TCP443 42. Copyright NTT Communications Corporation. All rights reserved. TURN 41 NAT TURN NAT IP:222.222.222.222 PORT:20000 IP:111.111.111.111 PORT:10000 IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 Proxy Proxy Proxy 43. Copyright NTT Communications Corporation. All rights reserved. WebRTC 42 WebRTC ICE P2P 44. Copyright NTT Communications Corporation. All rights reserved. 43 NAT NAT STUN Signaling STUN WebRTC Cli WebRTC Cli ICE WebSocket XHR SDP IP 45. Copyright NTT Communications Corporation. All rights reserved. WebRTC 44 WebRTC ICE P2P 46. Copyright NTT Communications Corporation. All rights reserved. P2P 4545 P2P SRTP AES DTLSDTLS-SRTP TCP UDP DTLS DTLS NAT NAT STUN Signaling STUN WebRTC Cli WebRTC Cli IP UDP SCTPSRTP DTLS 47. Copyright NTT Communications Corporation. All rights reserved. P2P WebRTCP2P 46 48. Copyright NTT Communications Corporation. All rights reserved. P2P MCUMultipoint Control Unit 47 MCU 49. Copyright NTT Communications Corporation. All rights reserved. P2P SFUSelective Forwarding Unit 48 SFU 50. Copyright NTT Communications Corporation. All rights reserved. WebRTC 49 WebRTC ICE P2P 51. Copyright NTT Communications Corporation. All rights reserved. 50 WebRTCPC Web getUserMediaWebAPI W3CAPI VideoVP8H.264 AudioOpusG.711 PCMA & PCMU / / WebRTC API WebAPIW3C P.301 52. Copyright NTT Communications Corporation. All rights reserved. 51 WebRTC/ORTC WebRTC WebRTC SkyWay 53. Copyright NTT Communications Corporation. All rights reserved. WebRTC 52 WebRTCIETF W3C Web Real-Time Communications Working Group http://www.w3.org/2011/04/webrtc/ WebAPI IETF Real-Time Communication in WEB-browsers Working Group http://tools.ietf.org/wg/rtcweb/ JSEPICE W3C 54. Copyright NTT Communications Corporation. All rights reserved. W3C 53 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTCs Statistics API W3CWorking draft 2013/9/3 WD 2013 2013/9/10 WD 2013/2/5 WD 2013/7/9 WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 CR PR WDWorking Doraft / CR :Candidate Recomendation / PRProposed Recommendation / RecRecommendation / 1Q : 13 2Q46 3Q79 4Q1012 Rec CR PR 2017/1Q Rec 2017 2018 2017/1Q RecCR PR 3Q Rec CR 2017/2Q PR 3Q Rec CR 2017/2Q PR CR PR 2017/1Q Rec http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 WD 2014/10/21 WD 55. Copyright NTT Communications Corporation. All rights reserved. W3C 54 Audio Oputpu Devices API Screen Capture WebRTC Next Version W3CWorking draft 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 PR Rec 2017 Media Capture from DOM Elements CR PR Rec WDWorking Doraft / CR :Candidate Recomendation / PRProposed Recommendation / RecRecommendation / 1Q : 13 2Q46 3Q79 4Q1012 http://www.w3.org/2015/06/webrtc-charter.html CR CR PR Rec 2016/1Q WD 2017/2Q CR 2017/4Q PR 2018/1Q Rec 2018 2015/2/10 WD 2015/2/10 WD 2015/2/19 WD 56. Copyright NTT Communications Corporation. All rights reserved. W3C 55 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTCs Statistics API W3CWorking draft 2013/9/3 WD 2013 2013/9/10 WD 2013/2/5 WD 2013/7/9 WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 CR PR WDWorking Doraft / CR :Candidate Recomendation / PRProposed Recommendation / RecRecommendation / 1Q : 13 2Q46 3Q79 4Q1012 Rec CR PR 2017/1Q Rec 2017 2018 2017/1Q RecCR PR 3Q Rec CR 2017/2Q PR 3Q Rec CR 2017/2Q PR CR PR 2017/1Q Rec http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 WD 2014/10/21 WD getUserMedia P2P API API API 57. Copyright NTT Communications Corporation. All rights reserved. W3C 56 Audio Oputpu Devices API Screen Capture WebRTC Next Version W3CWorking draft 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 PR Rec 2017 Media Capture from DOM Elements CR PR Rec WDWorking Doraft / CR :Candidate Recomendation / PRProposed Recommendation / RecRecommendation / 1Q : 13 2Q46 3Q79 4Q1012 http://www.w3.org/2015/06/webrtc-charter.html CR CR PR Rec 2016/1Q WD 2017/2Q CR 2017/4Q PR 2018/1Q Rec 2018 2015/2/10 WD 2015/2/10 WD 2015/2/19 WD API 58. Copyright NTT Communications Corporation. All rights reserved. 57 59. Copyright NTT Communications Corporation. All rights reserved. 58 WebRTCGoogleMozilla FIX 60. Copyright NTT Communications Corporation. All rights reserved. WebRTC 59 WebRTCNext Version WebRTC 1.12.0 ORTC WebRTC Next Version 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 2017 2016/1Q WD 2017/2Q CR 2017/4Q PR 2018/1Q Rec 2018 61. Copyright NTT Communications Corporation. All rights reserved. ORTC ORTC WebRTC1.0 RTC API ORTC(Object Real-time Communications) Community Group https://www.w3.org/community/ortc/ Draft2015/6/23 http://ortc.org/wp-content/uploads/2015/06/ ortc.html 60 62. Copyright NTT Communications Corporation. All rights reserved. ORTC 61 WebRTC SDPJavaScript API H.264/SVC WebRTC SDK ORTC Client STUN/TURN 63. Copyright NTT Communications Corporation. All rights reserved. ORTC 62 http://dev.modern.ie/platform/status/multicolumnfullsupport?filter=f3f0000bf&search=RTC Microsoft Edge 64. Copyright NTT Communications Corporation. All rights reserved. 63 WebRTC/ORTC WebRTC WebRTC SkyWay 65. Copyright NTT Communications Corporation. All rights reserved. 64 WebRTCWeb 64 64 66. Copyright NTT Communications Corporation. All rights reserved. SkyWay 65 n WebRTC 2013125 API STUN/TURN API JavaScriptPeerJS iOS/Android https://skyway.io 67. Copyright NTT Communications Corporation. All rights reserved. 66 SkyWay SkyWayAPI WebRTC STUN API Signaling API STUN API API TURN API 68. Copyright NTT Communications Corporation. All rights reserved. 67 https://skyway.io 69. Copyright NTT Communications Corporation. All rights reserved. 68 API n API n n n SkyWay n SkyWay API n n n 127.0.0.1 n localhost n n dev.domain.jp n n www.domain.jp n iOSAndroid 70. Copyright NTT Communications Corporation. All rights reserved. 69 JavaScript n STEP0 - n STEP1 - Peer var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05; var peer = new Peer({ key: APIKEY}); 71. Copyright NTT Communications Corporation. All rights reserved. 70 JavaScript n STEP2 - peer.on('open', function(){ //PeerID }); peer.on('call', function(call){ // call.answer(window.localStream); }); peer.on('error', function(err){ // console.log(err.message); }); 72. Copyright NTT Communications Corporation. All rights reserved. 71 n STEP3 - navigator.getUserMedia({audio: true, video: true}, function(stream){ //Video $('#my-video').prop('src', URL.createObjectURL(stream)); // window.localStream = stream; }, function(err){ // console.log(err); }); getUserMedia JavaScript 73. Copyright NTT Communications Corporation. All rights reserved. 72 JavaScript n STEP4 - var call = peer.call(PeerId, window.localStream); call.on('stream', function(stream){ //Video $('#their-video').prop('src', URL.createObjectURL(stream)); }); call.on('close,function(){ // }); PeerID peer.listAllPeers() 74. Copyright NTT Communications Corporation. All rights reserved. 73 http://nttcom.github.io/skyway/docs/ 75. Copyright NTT Communications Corporation. All rights reserved. 74 GitHub https://github.com/nttcom/ 76. Copyright NTT Communications Corporation. All rights reserved. 75 SkyWay Technical Forum WebRTC http://goo.gl/enBkcF 77. Copyright NTT Communications Corporation. All rights reserved. 76 WebRTC/ORTC WebRTC WebRTC SkyWay 78. Copyright NTT Communications Corporation. All rights reserved. 77