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
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Hacking with html5 video, rtc and shared web workers
Upcoming SlideShare
Loading in …5
×

Hacking with html5 video, rtc and shared web workers

957 views
788 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
957
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hacking with html5 video, rtc and shared web workers

  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

×