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

WebRTC: Unicorns, Narwhals and The Real-Time Web

Tian Davis
February 21, 2015

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

Tian Davis

February 21, 2015
Tweet

More Decks by Tian Davis

Other Decks in Programming

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

  25. None
  26. Not Currently Planned

  27. None
  28. Not Currently Planned

  29. WebORTC Planned

  30. None
  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
  37. None
  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
  128. None
  129. None
  130. JS

  131. thanks

  132. @tiandavis respoke tiandavis.com/talks talk slides & sample WebRTC code