Making WebRTC Awesome, CascadiaJS 2013

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