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

What is WebRTC? What can I do with it?

danjenkins
February 05, 2015

What is WebRTC? What can I do with it?

Talk given at CodeHarbour meetup about WebRTC, what we can do with it. Aimed at the WebRTC basics.

danjenkins

February 05, 2015
Tweet

More Decks by danjenkins

Other Decks in Programming

Transcript

  1. What is WebRTC? What can I do with it? Dan

    Jenkins Founder of Nimble Ape Ltd Developer at Respoke 1
  2. / Who am I? Dan Jenkins Node.js Developer Love Lego

    & Technic General Geek Founder of Nimble Ape Ltd ❤️ open source 3
  3. / Who am I? Got into VoIP years ago VoIP

    is difficult Spent the past year working on a platform called Respoke Respoke makes WebRTC easier 8 WebRTC & I
  4. / What is WebRTC? “WebRTC (Web Real-Time Communication) is an

    API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need of either internal or external plugins.” 23 According to wikipedia:
  5. / Ok, but what is it? 25 Enables Video, Audio

    and Data Sharing in your browser, peer to peer, with no plugins
  6. / Ok, but what is it? / Video 28 A

    browser friendly camera…
  7. / Ok, but what is it? / Video But you

    need a “plugin” for this… shhh! Don’t tell anyone… It’s for security 29 Your screen…
  8. / Ok, but what is it? / Audio Audio APIs

    32 An audio stream from an in browser source
  9. / Ok, but what is it? / Data Sharing 34

    This can be pretty much anything…
  10. / Ok, but what is it? / Data Sharing 35

    An image from canvas…
  11. / Peer to Peer 44 But we’ve had peer to

    peer technology before, what’s different?
  12. / Awesome! / Signalling It might not be very real

    time though… 51 You could use carrier pigeons!
  13. / var RTCPeerConnection = null; var getUserMedia = null; var

    attachMediaStream = null; var reattachMediaStream = null; var webrtcDetectedBrowser = null; function trace(text) { // This function is used for logging. if (text[text.length - 1] == '\n') { text = text.substring(0, text.length - 1); } console.log((performance.now() / 1000).toFixed(3) + ": " + text); } if (navigator.mozGetUserMedia) { console.log("This appears to be Firefox"); webrtcDetectedBrowser = "firefox"; // The RTCPeerConnection object. RTCPeerConnection = mozRTCPeerConnection; // The RTCSessionDescription object. RTCSessionDescription = mozRTCSessionDescription; // The RTCIceCandidate object. RTCIceCandidate = mozRTCIceCandidate; // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.mozGetUserMedia.bind(navigator); // Attach a media stream to an element. attachMediaStream = function(element, stream) { console.log("Attaching media stream"); element.mozSrcObject = stream; element.play(); }; reattachMediaStream = function(to, from) { console.log("Reattaching media stream"); to.mozSrcObject = from.mozSrcObject; to.play(); }; Awesome! / Browser APIs Google has one 57
  14. / Awesome! / Browser APIs Used to ask your user

    whether the website can use your media, among other things 60 getUserMedia
  15. / Awesome! / Browser APIs Handles the underlying technology to

    stream media between 2 peers 61 RTCPeerConnection
  16. / Awesome! / Browser APIs Transfer arbitrary data between peers.

    This is what’s really exciting about WebRTC. It makes WebRTC use cases expand infinitely 62 RTCDataChannel
  17. / Awesome! / Browser APIs 63 (1) getUserMedia (2) send

    offer (3) receive Offer (4) getUserMedia (5) send answer (5) receive answer (6) media starts streaming A Simple Diagram…
  18. / Firewalls A method to go off to a server

    and get your IP as seen by the world 66 STUN
  19. / Firewalls A server to relay your media through, if

    a peer to peer connection can’t be established Generally, you need to run one (or more) of these yourself to get good quality 67 TURN
  20. / Where can I use it? PeerConnection API ✔ ✔

    ✔ ✔ ✗ ✗ ✔ ORTC API ✗ ✗ ✗ ✗ ✗ ✗ getUserMedia ✔ ✔ ✔ ✔ ✗ ✔ simulcast ✔ ✗ ✗ ✗ ✗ ✗ mediaConstraints ✗ ✗ ✗ TURN support ✔ ✔ ✔ ✔ ✗ ✗ ✔ MediaStream API ✔ ✔ ✗ ✗ ✔ WebAudio Integration ✔ ✔ ✔ ✔ ✗ ✗ ✔ dataChannels ✔ ✔ ✔ ✔ ✗ ✗ ✔ Screen Sharing ✗ ✗ ✗ ✗ Stream re-broadcasting ✗ ✗ ✗ ✗ ✗ Multiple Streams ✔ ✔ ✗ ✗ ✗ ✗ ✔ Solid Interop ✗ ✗ Echo cancellation ✔ ✔ ✗ ✗ It’s complicated 71
  21. / What can I do with it? Enable easier remote

    working in Contact Centres 76
  22. / What can I do with it? Peer to Peer

    data transfers in games 77
  23. / What can I do with it? Sales 78 Look

    at products in real time
  24. / What can I do with it? And many, many

    more, you just need imagination 79
  25. / What can I do with it? None of these

    ideas are new But they’re being enabled by the open standard They’ve also got a higher possibility of success as it’s now cheaper to run the service 80
  26. / Not talked about But it’s not as complicated as

    VoIP Everyone can get into it 94
  27. Want to get started with WebRTC without having to deal

    with signalling and browser differences? 95