The Web Can Do That Better!
My adventure with HTML5 Video,
WebRTC and Web Workers
Cristiano Betta
Smashing Borders, Oxford...
Hard to make changes
Data lock-in
Network sensitive
We Can Do This Better
The Web Can Do This Better
RTCPeerConnection
Peer-to-Peer Data API
Peer-to-Peer DTMF
Peer-to-Server?
webrtc-experiment.com
RecordRTC.js
github.com/muaz-khan/WebRTC-Experiment/
tree/master/RecordRTC
RecordRTC is a server-less JavaScript
library can be used to record WebRTC audio/
video media streams. It supports cross-
...
stream
<video> <audio>
video blob audio blob
video blob
audio blob
13mb for 30s!
30-90 seconds to upload
30 seconds of video
bgrins.github.io/videoconverter.js
!
webrtc-experiment.com/ffmpeg/merging-
wav-and-webm-into-mp4.html
www.w3.org/TR/mediastream-recording
Background Uploads
HTML Web Workers
Web Workers
Shared Web Workers
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Only 1 reference ever M...
/recorder
background-upload.js
background-upload.js
github.com/broofa/node-uuid
stackoverflow.com/questions/13870853
/server
Was it worth it?
Chrome Only (for now)
Firefox Nightly now has
MediaStreamRecorder API
Client side conversion
Streaming vs Uploading
Real background uploads
It’s live!
battlehack.org/london
October 11-12
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Upcoming SlideShare
Loading in …5
×

The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

1,836 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,836
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

  1. 1. The Web Can Do That Better! My adventure with HTML5 Video, WebRTC and Web Workers Cristiano Betta Smashing Borders, Oxford, 2014
  2. 2. Hard to make changes Data lock-in Network sensitive
  3. 3. We Can Do This Better
  4. 4. The Web Can Do This Better
  5. 5. RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF
  6. 6. Peer-to-Server?
  7. 7. webrtc-experiment.com
  8. 8. RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/ tree/master/RecordRTC
  9. 9. RecordRTC is a server-less JavaScript library can be used to record WebRTC audio/ video media streams. It supports cross- browser audio/video recording
  10. 10. stream <video> <audio> video blob audio blob
  11. 11. video blob audio blob
  12. 12. 13mb for 30s!
  13. 13. 30-90 seconds to upload 30 seconds of video
  14. 14. bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html
  15. 15. www.w3.org/TR/mediastream-recording
  16. 16. Background Uploads
  17. 17. HTML Web Workers
  18. 18. Web Workers
  19. 19. Shared Web Workers
  20. 20. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Only 1 reference ever Many references
  21. 21. /recorder
  22. 22. background-upload.js
  23. 23. background-upload.js
  24. 24. github.com/broofa/node-uuid stackoverflow.com/questions/13870853
  25. 25. /server
  26. 26. Was it worth it?
  27. 27. Chrome Only (for now)
  28. 28. Firefox Nightly now has MediaStreamRecorder API
  29. 29. Client side conversion
  30. 30. Streaming vs Uploading
  31. 31. Real background uploads
  32. 32. It’s live!
  33. 33. battlehack.org/london October 11-12

×