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

Making WebRTC Awesome, CascadiaJS 2013

Henrik Joreteg
November 14, 2013

Making WebRTC Awesome, CascadiaJS 2013

Henrik Joreteg

November 14, 2013
Tweet

More Decks by Henrik Joreteg

Other Decks in Technology

Transcript

  1. Making WebRTC Awesome
    CascadiaJS 2013
    @HenrikJoreteg

    View Slide

  2. WHAT DOES
    WebRTC
    MAKE YOU
    THINK OF?

    View Slide

  3. Hype?
    Is it ready to use?
    Websockets re-invented
    What’s the big deal?

    View Slide

  4. Making animated GIFs!
    http://chat.meatspac.es

    View Slide

  5. So what’s the big deal?
    it’s just another new web technology.

    View Slide

  6. TypedArray Expo 2013!

    View Slide

  7. FlexBox Expo 2013!

    View Slide

  8. NOPE

    View Slide

  9. THIS IS AN ACTUAL THING:
    WebRTCExpo.com

    View Slide

  10. CLEARLY
    SOMETHING UNIQUE
    IS GOING ON HERE

    View Slide

  11. LET’S SORT
    THIS OUT

    View Slide

  12. WHAT IS
    WEBRTC
    REALLY?

    View Slide

  13. new RTCPeerConnection();

    View Slide

  14. new RTCPeerConnection();

    View Slide

  15. WebSockets
    SERVER CLIENT

    View Slide

  16. WebRTC
    PEER PEER

    View Slide

  17. low-latency
    peer-to-peer
    networking
    in the browser

    View Slide

  18. WHY WOULD
    YOU CARE?

    View Slide

  19. BUILD COOL SH!T

    View Slide

  20. WHAT CAN YOU DO?

    View Slide

  21. AUDIO / VIDEO

    View Slide

  22. BUILD YOUR OWN
    TELECOM
    WITH JAVASCRIPT

    View Slide

  23. SUPER INEXPENSIVE

    View Slide

  24. PICTURE OF KIDS
    Talky.io

    View Slide

  25. talky.io/{{ insert anything }}

    View Slide

  26. View Slide

  27. View Slide

  28. ~7,000k Video Calls Connected/Week

    View Slide

  29. REAL

    View Slide

  30. NOW

    View Slide

  31. VIDEO or AUDIO or BOTH
    + SCREENSHARING*

    View Slide

  32. WHAT ELSE?

    View Slide

  33. SURVEILLANCE SYSTEMS
    BABY MONITORS
    CONTROL ELECTRON MICROSCOPE
    INTERCOM SYSTEMS
    ALWAYS-ON OFFICE PORTALS
    DISTRIBUTED TEAM COLLABORATION
    PEER-REPLICATED BROADCASTING
    PIRATE RADIO

    View Slide

  34. P.S. THE QUALITY
    IS IMPRESSIVE

    View Slide

  35. DATA CHANNELS!

    View Slide

  36. HALF-BAKED
    BUT AMAZING

    View Slide

  37. WHAT CAN YOU DO?

    View Slide

  38. File Transfer?

    View Slide

  39. YEP:
    https://www.sharefest.me/

    View Slide

  40. WEB-BASED
    BIT TORRENT?

    View Slide

  41. YEP:
    https://github.com/feross/webtorrent

    View Slide

  42. PEER-SEEDED CDN?

    View Slide

  43. YEP:
    https://peercdn.com/

    View Slide

  44. MULTI-PLAYER
    WEBGL GAMES?

    View Slide

  45. YEP:
    https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/

    View Slide

  46. {{ YOUR IDEA }}

    View Slide

  47. andyet.com

    View Slide

  48. BUILDING
    SOFTWARE
    WE BELIEVE
    SHOULD EXIST

    View Slide

  49. XMPP: FEDERATED
    COMMUNICATION

    View Slide

  50. PHONE SYSTEMS
    ARE FEDERATED

    View Slide

  51. WHO ARE THE
    NEXT GENERATION
    OF TELECOMS?

    View Slide

  52. FACEBOOK
    GOOGLE
    MICROSOFT
    APPLE

    View Slide

  53. FB MESSENGER
    HANGOUTS
    SKYPE
    FACETIME

    View Slide

  54. FACETIME VOICE?
    LOLz!

    View Slide

  55. NONE OF THEM
    FEDERATE WITH
    EACH OTHER

    View Slide

  56. WEB-BASED
    FEDERATED
    ALTERNATIVE?
    WEBRTC + XMPP + JINGLE

    View Slide

  57. View Slide

  58. https://otalk.im

    View Slide

  59. Stanza.io
    https://github.com/legastero/stanza.io
    !
    Jingle.js
    https://github.com/legastero/jingle.js

    View Slide

  60. WEBRTC IS HERE

    View Slide

  61. WebRTC needs more
    Open Web hackers

    View Slide

  62. Tinkerability

    View Slide

  63. DOM
    WebSockets
    hardware
    WebRTC
    jQuery
    socket.io
    Arduino
    SimpleWebRTC

    View Slide

  64. SimpleWebRTC
    var webrtc = new SimpleWebRTC({!
    localVideoEl: 'localVideo',!
    remoteVideosEl: 'remotesVideos',!
    autoRequestMedia: true!
    });!
    !
    webrtc.on('readyToCall', function () {!
    webrtc.joinRoom('room name');!
    });!

    View Slide

  65. SimpleWebRTC.com

    View Slide

  66. PeerJS
    OpenTok
    RTCMultiConnection
    (https://www.webrtc-experiment.com)

    View Slide

  67. feedback
    file bugs
    improve APIs
    push for interoperability

    View Slide

  68. IsWebRTCReadyYet.com

    View Slide

  69. CRAZY FAST
    PROGRESS

    View Slide

  70. NOV. 2011
    FIRST HEARD OF WEBRTC
    FROM CHRIS BLIZZARD AT FIRST REALTIME CONF

    View Slide

  71. JAN. 2012
    FEASIBILITY INQUIRY
    FROM WORKFACE

    View Slide

  72. JUNE 2012
    INTERNAL DEMO
    FOR AT&T

    View Slide

  73. JAN. 2013
    att.js at CES

    View Slide

  74. TODAY
    1,000,000,000
    WebRTC Capable Browsers

    View Slide

  75. IN LESS THAN 5 YEARS
    WEBRTC WILL BE THE
    #1 WAY PEOPLE
    MAKE VOICE CALLS

    View Slide

  76. THANKS!
    @HenrikJoreteg

    View Slide