For this years Battle Hack series of hackathons I wanted to replace our dated and clunky Mac OS X video recording app with something more modern. As a web native my initial thoughts went to WebRTC and HTML5 video, but things were not that simple and so started my journey that eventually led me to discover MRecordRTC and HTML5 Shared Web Workers.

1. The Web Can Do That Better!
My adventure with HTML5 Video,
WebRTC and Web Workers
Cristiano Betta
Smashing Borders, Oxford, 2014

6. Hard to make changes
Data lock-in
Network sensitive

9. We Can Do This Better

10. The Web Can Do This Better

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

15. Peer-to-Server?

18. webrtc-experiment.com

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

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

21. stream
<video> <audio>
video blob audio blob

23. video blob
audio blob

26. 13mb for 30s!

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

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

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

31. Background Uploads

33. HTML Web Workers

34. Web Workers

35. Shared Web Workers

36. Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Only 1 reference ever Many references

37. /recorder

38. background-upload.js

39. background-upload.js

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

41. /server

43. Was it worth it?

44. Chrome Only (for now)

45. Firefox Nightly now has
MediaStreamRecorder API

46. Client side conversion

47. Streaming vs Uploading

48. Real background uploads

49. It’s live!

50. battlehack.org/london
October 11-12