The Web Can Do That Better!
Hacking with HTML5 Video, RTC
and Shared Web Workers
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepren...
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepren...
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepren...
Cristiano Betta
CodeMotion Rome, 2014
Cristiano Betta @cbetta
Developer Advocate @ PayPal
Event organiser
Serial entrepren...
15s
Complicated setup
Complicated setup
Network sensitive
Complicated setup
Network sensitive
Data lock-in
28s
We Can Do This Better
The Web Can Do This Better
RTCPeerConnection
RTCPeerConnection
Peer-to-Peer Data API
RTCPeerConnection
Peer-to-Peer Data API
Peer-to-Peer DTMF
Peer-to-Server?
WebSockets?
WebSockets?
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
stream
stream
<canvas>
stream
<canvas> <audio>
stream
<canvas> <audio>
video blob
stream
<canvas> <audio>
video blob audio blob
video blob
audio blob
gif 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
Background Uploads
HTML Web Workers
Web Workers
Shared Web Workers
Web Workers Shared Web Workers
Web Workers Shared Web Workers
Separate Threads
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Separate references
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Separate references Sha...
Web Workers
Shared Web Workers
/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)
Client side conversion
Firefox Nightly now has
MediaStreamRecorder API
www.w3.org/TR/mediastream-recording
Streaming vs Uploading
Real background uploads
It’s live!
battlehack.org
Istanbul, Berlin, Warsaw,
London, Moscow
@cbetta
slideshare.net/paypal
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
Upcoming SlideShare
Loading in …5
×

The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta

410 views
329 views

Published on

Slides from Cristiano Betta talk @ codemotion roma 2014

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

  • Be the first to like this

No Downloads
Views
Total views
410
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta

  1. 1. The Web Can Do That Better! Hacking with HTML5 Video, RTC and Shared Web Workers Cristiano Betta CodeMotion Rome, 2014
  2. 2. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta
  3. 3. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal
  4. 4. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal Event organiser
  5. 5. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal Event organiser Serial entrepreneur
  6. 6. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal Event organiser Serial entrepreneur 50% Italian
  7. 7. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal Event organiser Serial entrepreneur 50% Italian 100% Ferrari Lover
  8. 8. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate @ PayPal Event organiser Serial entrepreneur 50% Italian 100% Ferrari Lover 0% Ferrari owner
  9. 9. 15s
  10. 10. Complicated setup
  11. 11. Complicated setup Network sensitive
  12. 12. Complicated setup Network sensitive Data lock-in
  13. 13. 28s
  14. 14. We Can Do This Better
  15. 15. The Web Can Do This Better
  16. 16. RTCPeerConnection
  17. 17. RTCPeerConnection Peer-to-Peer Data API
  18. 18. RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF
  19. 19. Peer-to-Server?
  20. 20. WebSockets?
  21. 21. WebSockets?
  22. 22. webrtc-experiment.com
  23. 23. RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/ tree/master/RecordRTC
  24. 24. RecordRTC is a server-less JavaScript library can be used to record WebRTC audio/ video media streams. It supports cross- browser audio/video recording
  25. 25. stream
  26. 26. stream
  27. 27. stream <canvas>
  28. 28. stream <canvas> <audio>
  29. 29. stream <canvas> <audio> video blob
  30. 30. stream <canvas> <audio> video blob audio blob
  31. 31. video blob audio blob
  32. 32. gif blob
  33. 33. +
  34. 34. +
  35. 35. 13mb for 30s!
  36. 36. 30-90 seconds to upload 30 seconds of video
  37. 37. bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html
  38. 38. Background Uploads
  39. 39. HTML Web Workers
  40. 40. Web Workers
  41. 41. Shared Web Workers
  42. 42. Web Workers Shared Web Workers
  43. 43. Web Workers Shared Web Workers Separate Threads
  44. 44. Web Workers Shared Web Workers Separate Threads Alive when referenced
  45. 45. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation
  46. 46. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references
  47. 47. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references Shared references
  48. 48. Web Workers
  49. 49. Shared Web Workers
  50. 50. /recorder
  51. 51. background-upload.js
  52. 52. background-upload.js
  53. 53. github.com/broofa/node-uuid stackoverflow.com/questions/13870853
  54. 54. /server
  55. 55. Was it worth it?
  56. 56. Chrome Only (for now)
  57. 57. Client side conversion
  58. 58. Firefox Nightly now has MediaStreamRecorder API
  59. 59. www.w3.org/TR/mediastream-recording
  60. 60. Streaming vs Uploading
  61. 61. Real background uploads
  62. 62. It’s live!
  63. 63. battlehack.org Istanbul, Berlin, Warsaw, London, Moscow
  64. 64. @cbetta slideshare.net/paypal

×