WebRTC - JSConf Brazil 2013

WebRTC - JSConf Brazil 2013

Explains basics of WebRTC and how to use it.

229ec15028bae7f1d4cdcfe91e2380b0?s=128

Henrik Joreteg

June 22, 2013
Tweet

Transcript

  1. @HenrikJoreteg WebRTC Saturday, June 22, 13

  2. HI! Saturday, June 22, 13

  3. Saturday, June 22, 13

  4. WEBRTC IS THE BIGGEST THING TO HAPPEN TO THE WEB

    SINCE THE WEB Saturday, June 22, 13
  5. WHY?! Saturday, June 22, 13

  6. BETTER COMMUNICATION MEANS A BETTER WEB Saturday, June 22, 13

  7. WHAT IS A PHONE? Saturday, June 22, 13

  8. DEVICE CAPABLE OF REALTIME AUDIO COMMUNICATION Saturday, June 22, 13

  9. PHONE NUMBER? Saturday, June 22, 13

  10. IT’S AN ADDRESS FOR A PHONE Saturday, June 22, 13

  11. IN THE OLD DAYS Saturday, June 22, 13

  12. ONE PHONE/ENDPOINT = ONE NUMBER Saturday, June 22, 13

  13. ENTER: MOBILE PHONES Saturday, June 22, 13

  14. ONE NUMBER = ONE PERSON Saturday, June 22, 13

  15. ENTER: WEBRTC Saturday, June 22, 13

  16. ENDPOINTS ARE COMMODITIES Saturday, June 22, 13

  17. BUT THERE IS NO STANDARD ADDRESSING SCHEME Saturday, June 22,

    13
  18. SO IT’S THE WILD WILD WEST Saturday, June 22, 13

  19. SO WHAT DO YOU GET? Saturday, June 22, 13

  20. PEER TO PEER AUDIO/VIDEO PEER TO PEER DATA STREAMING Saturday,

    June 22, 13
  21. YOU CAN NOW BUILD A TELECOM WITH HTML, JAVASCRIPT, AND

    A SIMPLE SERVER Saturday, June 22, 13
  22. ATT.JS Saturday, June 22, 13

  23. WHO ARE THE NEXT TELECOMS? Saturday, June 22, 13

  24. Google Facebook Microsoft Apple Saturday, June 22, 13

  25. How does it all work? (it’s a tad messy, stay

    with me) Saturday, June 22, 13
  26. https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13

  27. Step #1 Decide you want to call your mother Saturday,

    June 22, 13
  28. Henrik pc = new RTCPeerConnection() Henrik’s Mom Step #2 You,

    and your mother both create a peer connection object pc = new RTCPeerConnection() Saturday, June 22, 13
  29. Step #3 getUserMedia var localVideo = document.getElementById(‘local’); navigator.getUserMedia( { video:

    true, audio: true }, function (stream) { peerConnection.addStream(stream); attachMediaStream(localVideoEl, stream); }, function () { console.log("failed to get local media"); } ); Saturday, June 22, 13
  30. Henrik // establish socket.io connection conn = io.connect(“http://sigserver.com”); // identify

    yourself to the server conn.emit(“id”, “henrik”); Henrik’s Mom Step #4 Signaling Server Signaling Server Saturday, June 22, 13
  31. Signaling Server?! (sounds more complicated than it is) Saturday, June

    22, 13
  32. var io = require(‘socket.io’).listen(3000), users = {}; io.on(‘connection’, function (client)

    { client.on(‘id’, function (name) { users[name] = client; client.name = name; }); client.on(‘message’, function (msg) { var otherClient = users[msg.to]; if (otherClient) { delete msg.to; msg.from = client.name; otherClient.emit(‘message’, msg); } }); }); Saturday, June 22, 13
  33. // create a new peer connection var pc = new

    RTCPeerConnection(); // tell our browser to describe our session pc.createOffer(function (sessionDescription) { // send it through our socket.io connection conn.emit(“message”, { to: “mom”, type: “offer”, body: sessionDescription }); }); Step #5 Send offer to mom Saturday, June 22, 13
  34. // socket.io handler for incoming message conn.on(“message”, function (msg) {

    if (msg.type === “offer”) { var desc = new RTCSessionDescription(msg.payload); pc.setRemoteDescription(desc); pc.createAnswer(function (sessionDescription) { pc.setLocalDescription(sessionDescription); conn.emit(“message”, { to: msg.from, type: “answer”, payload: sessionDescription }); }); } }); Step #6 Mom answers (if she still loves you) Saturday, June 22, 13
  35. // socket.io handler for incoming message conn.on(“message”, function (msg) {

    if (msg.type === “answer”) { var desc = new RTCSessionDescription(msg.payload); pc.setRemoteDescription(desc); } }); Step #7 Process mom’s reply Saturday, June 22, 13
  36. And we’re done! Saturday, June 22, 13

  37. Saturday, June 22, 13

  38. pc.onicecandidate = function (event) { if (event.candidate) { conn.emit(“message”, {

    type: “ice”, to: “mom”, payload: { label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate } }); } }; Step #7 Make the ice flow Saturday, June 22, 13
  39. Step #7.1 process the ice messages // socket.io handler for

    incoming message conn.on(“message”, function (msg) { if (msg.type === “ice”) { var candidate = new RTCIceCandidate({ sdpMLineIndex: message.payload.label, candidate: message.payload.candidate }); pc.addIceCandidate(candidate); } }); Saturday, June 22, 13
  40. DEMO Saturday, June 22, 13

  41. THE CODE https://github.com/HenrikJoreteg/jsconfbr Saturday, June 22, 13

  42. DATA CHANNELS var pc = new RTCPeerConnection(servers, { optional: [{RtpDataChannels:

    true}] }); pc.ondatachannel = function(event) { var channel = event.channel; channel.onmessage = function(event){ console.log(‘got data’, event.data); }; }; var sendChannel = pc.createDataChannel("sendDataChannel", {reliable: true}); Saturday, June 22, 13
  43. SimpleWebRTC http://simplewebrtc.com/ https://github.com/HenrikJoreteg/SimpleWebRTC https://github.com/andyet/signalmaster Saturday, June 22, 13

  44. Saturday, June 22, 13

  45. Talky.io Saturday, June 22, 13

  46. FUTURE PLANS Saturday, June 22, 13

  47. THANKS! @HenrikJoreteg, @andyet on twitter Saturday, June 22, 13