WebRTC - JSConf Brazil 2013

Explains basics of WebRTC and how to use it.

Transcript

1. @HenrikJoreteg
   WebRTC
   Saturday, June 22, 13
   

   View Slide

2. HI!
   Saturday, June 22, 13
   

   View Slide

3. Saturday, June 22, 13
   

   View Slide

4. WEBRTC IS THE
   BIGGEST
   THING TO HAPPEN
   TO THE WEB SINCE
   THE WEB
   Saturday, June 22, 13
   

   View Slide

5. WHY?!
   Saturday, June 22, 13
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. PHONE NUMBER?
   Saturday, June 22, 13
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. ENTER:
    WEBRTC
    Saturday, June 22, 13
    

    View Slide

16. ENDPOINTS
    ARE
    COMMODITIES
    Saturday, June 22, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. PEER TO PEER
    AUDIO/VIDEO
    PEER TO PEER
    DATA STREAMING
    Saturday, June 22, 13
    

    View Slide

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

    View Slide

22. ATT.JS
    Saturday, June 22, 13
    

    View Slide

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

    View Slide

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

    View Slide

25. How does it all work?
    (it’s a tad messy, stay with me)
    Saturday, June 22, 13
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Signaling Server?!
    (sounds more complicated than it is)
    Saturday, June 22, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

36. And we’re done!
    Saturday, June 22, 13
    

    View Slide

37. Saturday, June 22, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. DEMO
    Saturday, June 22, 13
    

    View Slide

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

    View Slide

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
    

    View Slide

43. SimpleWebRTC
    http://simplewebrtc.com/
    https://github.com/HenrikJoreteg/SimpleWebRTC
    https://github.com/andyet/signalmaster
    Saturday, June 22, 13
    

    View Slide

44. Saturday, June 22, 13
    

    View Slide

45. Talky.io
    Saturday, June 22, 13
    

    View Slide

46. FUTURE
    PLANS
    Saturday, June 22, 13
    

    View Slide

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

    View Slide