The Web of Tomorrow

Transcript

1. None

2. @cuerbot elcuervo

3. None
4. None
5. None
6. None
7. None

8. The Past

9. Browsers

10. None

11. Communication

12. None

13. -AJAX

14. -AJAX -WebSockets

15. -AJAX -WebSockets -EventSource

16. and the camera?

17. None
18. None
19. None

20. Real Time Communication

21. None

22. MediaStreams

23. MediaStreams aka “let’s see that ugly face”

24. MediaStreams PeerConnection aka “let’s see that ugly face”

25. MediaStreams PeerConnection aka “let’s see that ugly face” aka “let

    them see that ugly face”

26. MediaStreams PeerConnection DataChannels aka “let’s see that ugly face” aka

    “let them see that ugly face”

27. MediaStreams PeerConnection DataChannels aka “let’s see that ugly face” aka

    “let them see that ugly face” aka “let’s share Game of Thrones”
28. None

29. What is it?

30. What is it? - Camera and/or mic access

31. What is it? - Camera and/or mic access - MediaStreams

    are synchronized between MediaStreamTracks

32. What is it? - Camera and/or mic access - MediaStreams

    are synchronized between MediaStreamTracks - Can be played in <audio> or <video> elements as objectURL

33. ... navigator.getUserMedia({ video: true, audio: true }, function(stream) { });

34. // Shim navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

    navigator.msGetUserMedia;

35. ... navigator.getUserMedia({ video: true, audio: true }, function(stream) { });

36. ... function(stream) { window.URL = URL || webkitURL; var blob

    = URL.createObjectURL(stream); }

37. ... var video = document.createElement("video"); video.autoplay = true; video.src =

    blob; ...

38. DEMO TIME

39. DEMO TIME aka The power of 10:15 gin and tonic

40. None

41. Available out of the box in:

42. Open Source to the rescue!

43. https://github.com/addyosmani/getUserMedia.js/

44. Available out of the box in: all modern browsers and

    IE8+.
45. None

46. Everything based on LATEST implementation of WEBRTC from Google’s repo.

47. None

48. Available out of the box in:

49. What do we need?

50. -Signaling server XMPP, SIP, HTTP, etc What do we need?

51. -Signaling server XMPP, SIP, HTTP, etc -STUN server (optional) Find

    route to IP What do we need?

52. // Peer connection shim var PeerConnection = webkitRTCPeerConnection;

53. var out = new PeerConnection(null); out.addStream(stream);

54. client 1 app app client 2

55. client 1 app app HTTP HTTP client 2

56. client 1 app app HTTP Signaling (HTTP, SIP, XMPP, etc)

    HTTP Signaling (HTTP, SIP, XMPP, etc) client 2

57. client 1 app app HTTP Signaling (HTTP, SIP, XMPP, etc)

    HTTP Signaling (HTTP, SIP, XMPP, etc) P2P client 2

58. client 2 client 1 app

59. client 2 client 1 app

60. client 2 client 1 app

61. client 2 client 1 app websockets

62. client 2 client 1 app

63. client 2 client 1 navigator.getUserMedia({ video: true, audio: true },

    function(stream) { }); app

64. client 2 client 1 out.addStream(stream); out.createOffer( function(session) { out.setLocalDescription( session

    ); sendOffer(); } ); app

65. client 2 client 1 O app

66. client 2 client 1 O app

67. client 2 client 1 app in.setRemoteDescription(offer); in.createAnswer( function(session) { in.setLocalDescription(

    session ); sendAnswer(); } );

68. client 2 client 1 A app

69. client 2 client 1 A app

70. client 2 client 1 C1 app

71. client 2 client 1 C1 app

72. client 2 client 1 Cn app

73. client 2 client 1 Cn app

74. client 2 client 1 app P2P

75. client 1 P2P app client 2

76. client 1 P2P app client 2 ✔

77. DEMO TIME

78. DEMO TIME aka The power of beer and friends

79. None

80. Recap

81. None

82. Local Session Description

83. Local Session Description what is the local configuration?

84. Local Session Description what is the local configuration? Remote Session

    Description

85. Local Session Description what is the local configuration? Remote Session

    Description what is the remote configuration?

86. Local Session Description what is the local configuration? Remote Session

    Description what is the remote configuration? Remote Transport Candidates

87. Local Session Description what is the local configuration? Remote Session

    Description what is the remote configuration? Remote Transport Candidates how to connect to the remote peer?
88. None
89. None
90. None

91. Low Latency

92. Low Latency aka Fast and Furious

93. Low Latency aka Fast and Furious High Throughput

94. Low Latency aka Fast and Furious High Throughput aka send

    ALL the messages

95. Low Latency aka Fast and Furious High Throughput aka send

    ALL the messages Unreliable send

96. Low Latency aka Fast and Furious High Throughput aka send

    ALL the messages Unreliable send aka possible loss (“Call me maybe”)

97. var channel = out.createDataChannel("chat"); channel.send({...});

98. var fn = function(event) { var message = event.data; ...

    } in.addEventListener("datachannel", fn);

99. Practical uses

100. None

101. How can it be done? app client 1 client 2

102. How can it be done? app client 1 client 2

103. How can it be done? app client 1 client 2

     P2P + DataChannel
104. None

105. How can it be done? app client 3 client 4

     client 1 client 2

106. How can it be done? app client 3 client 4

     client 1 client 2

107. How can it be done? app client 3 client 4

     client 1 client 2
108. None

109. How can it be done?

110. app How can it be done?

111. app How can it be done?

112. app 40ms How can it be done?

113. app 40ms How can it be done?

114. app 40ms 200ms How can it be done?

115. app 40ms 200ms 30ms How can it be done?

116. app 40ms 200ms 30ms How can it be done?

117. app 40ms 200ms 30ms How can it be done? 50ms

118. How about Ruby?

119. How about Ruby? - No WebRTC implementation available (yet)

120. How about Ruby? - No WebRTC implementation available (yet) -

     Native C++ API (libjingle)

121. How about Ruby? - No WebRTC implementation available (yet) -

     Native C++ API (libjingle) - Multiple signaling options (goliath, websocket-rack, rack-stream)

122. How about Ruby? - No WebRTC implementation available (yet) -

     Native C++ API (libjingle) - Multiple signaling options (goliath, websocket-rack, rack-stream) interested? ping me

123. One more thing

124. None
125. None
126. None
127. None

128. Not Free 28% Partially Free 43% Free 30% Woldwide Internet

     Freedom http://www.freedomhouse.org/sites/default/files/inline_images/FOTN%202012%20FINAL.pdf

129. How can it be done?

130. None

131. non-free

132. non-free

133. non-free

134. non-free

135. free non-free

136. free non-free ✔

137. free non-free ✔

138. free non-free non-free ✔

139. free non-free non-free non-free non-free non-free non-free ✔

140. None

141. You choose the future of the web

142. The storm is coming… are you ready?

143. Thank you

144. Questions?

145. @cuerbot elcuervo