WebRTC: Unicorns, Narwhals and The Real-Time Web

You probably don't know WebRTC as much as you think. I'm not surprised. WebRTC is both amazing and terrifying. No real standards exist between browser vendors. How to integrate WebRTC the right way? WebRTC is but one ingredient to a successful real-time web recipe. This talk discusses lessons learned in the trenches building a next-generation real-time network. In particular, I discuss the bad parts of WebRTC and why it is so crucial to business success. The talk further suggests how to get WebRTC solutions right and build a multidisciplinary software engineering team in the process.

To learn more, visit http://tiandavis.com/talks

Transcript

1. unicorns narwhals WebRTC The Real-Time Web
2. @tiandavis respoke
3. WebRTC
4. WebRTC Why Care?
5. 3,000,000,000 WEBRTC USERS BY 2016
6. VIDEO & AUDIO 88% AUDIO ONLY 41% DATA CHANNEL 26% 1000 DEVELOPERS SURVEYED
7. Zendesk Voice Mayday Service Google Hangouts Handyman Service Slack & Screenhero Apollo by Respoke Talky by &Yet Skype for Web Snapchat
8. WebRTC IS HERE
9. I’M NOT SAYING IT WAS ALIENS… BUT IT WAS ALIENS
10. He sat in the barbers chair and just said, “jack my whole life up fam.”
11. The Browser
12. What’s the browser environment today? questions questions ions ns questions questions ns questions questions ns
13. Google, Mozilla, Microsoft & Apple are working together on the WebRTC SPEC.
14. Google, Mozilla, Microsoft & Apple are working together on the WebRTC SPEC.
15. Google, Mozilla, Microsoft & Apple do not agree on what will be the WebRTC SPEC.
16. Requires Vendor Prefix navigator.getUserMedia({video: true}, successCallback); Opera
17. Requires Vendor Prefix navigator. webkitGetUserMedia({video: true}, successCallback); Chrome
18. Requires Vendor Prefix navigator. mozGetUserMedia({video: true}, successCallback); Firefox
19. Normalize The API navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
20. same thing for RTCPeerConnection RTCIceCandidate RTCSessionDescription MediaStreamTrack RTCDataChannel
21. supports file:// protocol must use http[s]:// protocol
22. Sending Images Over RTCDataChannel
23. Firefox
24. Chrome
26. Not Currently Planned
28. Not Currently Planned
29. WebORTC Planned
31. There is only one WebRTC SPEC
32. There is only one WebRTC SPEC
33. There are two open WebRTC SPECs
34. 2 yikes! webrtc proposals
35. webrtc proposals WebRTC ! Object RTC
36. webrtc does not work in IE or Safari you need a browser library
38. shims polyfills
39. :shims :polyfills ∞ 1 adapter.js
40. What do I do with IE and Safari?
41. You could build a WebRTC polyfill.
42. WebRTC NPAPI ActiveX FireBreath
43. What about WebRTC on Node.js? npm install simple-peer
44. Integrate WebRTC The Right Way
45. All you need to know is JavaScript to be successful with WebRTC
46. All you need to know is JavaScript to be successful with WebRTC
47. You need to grok many disciplines to be successful with WebRTC
48. ICE STUN Signaling TURN
49. Interactive Connectivity Establishment (ICE)
50. Session Traversal Utilities for NAT (STUN)
51. Signaling Server
52. WebSockets
53. Traversal Using Relays around NAT (TURN)
54. TURN
55. STUN
 TURN
56. rfc5766-turn-server Google restund Creytiv Software
57. STUN TURN NAT NAT Peer Peer Candidates Candidates Firewall Firewall
58. STUN TURN NAT NAT Peer Peer Media Media Firewall Firewall
59. STUN TURN NAT NAT Peer Peer Media Media Firewall Firewall
60. WebRTC is just another HTML5 Web API
61. WebRTC is just another HTML5 Web API
62. WEBRTC narwhals s t r i k e b a c k The
63. ACCESS YOUR CAMERA? HOW TO MAKE VIDEO CALLS? TRANSFER DATA?
64. ACCESS YOUR CAMERA? HOW TO
65. getUserMedia getUserMedia( constraints, onMediaStream, noMediaStream );
66. getUserMedia var constraints = { video: true, audio: true };
67. getUserMedia var constraints = { video: false, audio: true };
68. getUserMedia <video id=“localVideo”></video>
69. getUserMedia function onMediaStream(stream) { window.stream = stream; var video = document.getElementById(“localVideo"); video.src = window.URL.createObjectURL(stream); video.play(); }
70. getUserMedia function noMediaStream(error){ console.log("getUserMedia error: ", error); }
71. getUserMedia getUserMedia( constraints, onMediaStream, noMediaStream );
72. MAKE VIDEO CALLS? HOW TO
73. RTCPeerConnection <video id=“localVideo"></video> ! <video id="remoteVideo"></video>
74. RTCPeerConnection var localVideo = document.getElementById("localVideo"); ! var remoteVideo = document.getElementById("remoteVideo");
75. turn on your camera
76. getUserMedia var constraints = { video: true, audio: true };
77. RTCPeerConnection getUserMedia( constraints, onMediaStream, noMediaStream );
78. and save your localStream for later…
79. function onMediaStream(stream) { localVideo.src = URL.createObjectURL(stream); localStream = stream; } RTCPeerConnection
80. then call someone
81. then call someone
82. setup signaling server
83. WebSockets
84. RTCPeerConnection var io = require(“socket.io”).listen(server); ! io.on(“connection”, function (socket) { socket.on(“join”, function(event) {}); socket.on(“candidate”, function(event) {}); socket.on(“offer”, function(event) {}); socket.on(“answer”, function(event) {}); };
85. RTCPeerConnection socket.on(“offer”, onOffer); socket.on(“candidate”, onCandidate); socket.on(“answer”, onAnswer);
86. RTCPeerConnection function onOffer(offer) { var rtcOffer = new RTCSessionDescription(JSON.parse(offer)); peerConnection.setRemoteDescription(rtcOffer); peerConnection.createAnswer( function(answer){ peerConnection.setLocalDescription(answer); socket.emit(“answer”, JSON.stringify(answer)); },
87. RTCPeerConnection function onAnswer(answer) { var rtcAnswer = new RTCSessionDescription(JSON.parse(answer)); peerConnection.setRemoteDescription(rtcAnswer); }
88. RTCPeerConnection function onCandidate(candidate) { var rtcCandidate = new RTCIceCandidate(JSON.parse(candidate)); peerConnection.addIceCandidate(rtcCandidate); }
89. setup RTCPeerConnection & createOffer
90. RTCPeerConnection peerConnection = new RTCPeerConnection(pcConfig, pcConstraints); ! if(localStream) { peerConnection.addStream(localStream); } ! peerConnection.onaddstream = onAddStream; peerConnection.onicecandidate = onIceCandidate;
91. RTCPeerConnection function onAddStream(event) { remoteVideo = document.getElementById('remoteVideo'); remoteVideo.src = window.URL.createObjectURL(event.stream); remoteVideo.play(); getUserMedia(. . .); //If not initiator }
92. RTCPeerConnection function onIceCandidate(event) { if(event.candidate){ socket.emit('candidate', JSON.stringify(event.candidate)); } }
93. RTCPeerConnection createOffer();
94. RTCPeerConnection function createOffer(offer) { peerConnection.createOffer( function(offer){ peerConnection.setLocalDescription(offer); socket.emit(“offer”, JSON.stringify(offer)); }, function(err){ console.log(err); } ); }
95. Create RTC Send Offer Create RTC Send Answer Send/Set ICE Candidate Set/Send ICE Candidate Peer 1 Peer 2
96. SEND DATA? HOW TO
97. RTCDataChannel var peerConnection = new RTCPeerConnection(pcConfig, { optional: [ {DtlsSrtpKeyAgreement: true}, {RtpDataChannels: true} ] });
98. create data channel
99. RTCDataChannel var sendChannel = peerConnection.createDataChannel( “channel-name”, { reliable: true } );
100. RTCDataChannel var sendChannel.onmessage = handleMessage
101. RTCDataChannel function handleMessage(event){ var message = JSON.parse(event.data); . . . element.innerHTML = data; }
102. send data
103. RTCDataChannel sendChannel.send(“Hello World!”);
104. RTCDataChannel sendChannel.send({ key : value });
105. SEND DATA? HOW TO
106. SEND MESSAGES? HOW TO
107. SEND OBJECTS? HOW TO
108. SEND FILES? HOW TO
109. SEND ANYTHING? HOW TO
110. RTCDataChannel getUserMedia RTCPeerConnection
111. but is it safe?
112. Datagram Transport Layer Security (DTLS)
113. isn’t this just websockets again?
114. Browser to Browser Communication RTCDataChannel Browser to Server Communication WebSockets
115. MULTI- DISCIPLINARY TEAMS
116. There is a lot of domain knowledge here
117. There is a lot of domain knowledge here JS
118. There is a lot of domain knowledge here JS
119. There is a lot of domain knowledge here JS
120. There is a lot of domain knowledge here JS
121. There is a lot of domain knowledge here JS
122. There is a lot of domain knowledge here JS
123. There is a lot of domain knowledge here JS
124. There is a lot of domain knowledge here JS
125. There is a lot of domain knowledge here JS
126. There is a lot of domain knowledge here
127. Zendesk Voice Mayday Service Google Hangouts Handyman Service Slack & Screenhero Apollo by Respoke Talky by &Yet Skype for Web Snapchat
130. JS
131. thanks
132. @tiandavis respoke tiandavis.com/talks talk slides & sample WebRTC code