This document summarizes a talk given by Cristiano Betta at CodeMotion Rome 2014 about hacking with HTML5 video, real-time communications (RTC), and shared web workers. Specifically, it discusses how these web technologies can be used to build applications for peer-to-peer video calling and recording, as well as performing background uploads of recorded media to servers without disrupting the user experience. Examples of open-source projects demonstrating these techniques are also provided.

1. The Web Can Do That Better!
Hacking with HTML5 Video, RTC
and Shared Web Workers
Cristiano Betta
CodeMotion Rome, 2014

2. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta

3. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal

4. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser

5. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepreneur

6. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian

7. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian
100% Ferrari Lover

8. Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian
100% Ferrari Lover
0% Ferrari owner

14. 15s

20. Complicated setup

21. Complicated setup
Network sensitive

22. Complicated setup
Network sensitive
Data lock-in

28. 28s

29. We Can Do This Better

30. The Web Can Do This Better

38. RTCPeerConnection

39. RTCPeerConnection
Peer-to-Peer Data API

40. RTCPeerConnection
Peer-to-Peer Data API
Peer-to-Peer DTMF

41. Peer-to-Server?

42. WebSockets?

43. WebSockets?

49. webrtc-experiment.com

50. RecordRTC.js
github.com/muaz-khan/WebRTC-Experiment/
tree/master/RecordRTC

51. RecordRTC is a server-less JavaScript
library can be used to record WebRTC audio/
video media streams. It supports cross-
browser audio/video recording

52. stream

53. stream

54. stream
<canvas>

55. stream
<canvas> <audio>

56. stream
<canvas> <audio>
video blob

57. stream
<canvas> <audio>
video blob audio blob

59. video blob
audio blob

60. gif blob

66. +

67. +

69. 13mb for 30s!

70. 30-90 seconds to upload
30 seconds of video

73. bgrins.github.io/videoconverter.js
!
webrtc-experiment.com/ffmpeg/merging-
wav-and-webm-into-mp4.html

74. Background Uploads

76. HTML Web Workers

77. Web Workers

78. Shared Web Workers

79. Web Workers Shared Web Workers

80. Web Workers Shared Web Workers
Separate Threads

81. Web Workers Shared Web Workers
Separate Threads
Alive when referenced

82. Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation

83. Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Separate references

84. Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Separate references Shared references

85. Web Workers

91. Shared Web Workers

99. /recorder

100. background-upload.js

101. background-upload.js

102. github.com/broofa/node-uuid
stackoverflow.com/questions/13870853

103. /server

106. Was it worth it?

109. Chrome Only (for now)

110. Client side conversion

111. Firefox Nightly now has
MediaStreamRecorder API

112. www.w3.org/TR/mediastream-recording

113. Streaming vs Uploading

114. Real background uploads

115. It’s live!

118. battlehack.org
Istanbul, Berlin, Warsaw,
London, Moscow

121. @cbetta
slideshare.net/paypal