Your SlideShare is downloading. ×
The web can be do that better: Hacking with HTML5 Video, RTC and Shared Web Workers - Betta
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

207
views

Published on

Slides from Cristiano Betta talk @ codemotion roma 2014

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
207
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 9. 15s
  • 10. Complicated setup
  • 11. Complicated setup Network sensitive
  • 12. Complicated setup Network sensitive Data lock-in
  • 13. 28s
  • 14. We Can Do This Better
  • 15. The Web Can Do This Better
  • 16. RTCPeerConnection
  • 17. RTCPeerConnection Peer-to-Peer Data API
  • 18. RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF
  • 19. Peer-to-Server?
  • 20. WebSockets?
  • 21. WebSockets?
  • 22. webrtc-experiment.com
  • 23. RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/ tree/master/RecordRTC
  • 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. stream
  • 26. stream
  • 27. stream <canvas>
  • 28. stream <canvas> <audio>
  • 29. stream <canvas> <audio> video blob
  • 30. stream <canvas> <audio> video blob audio blob
  • 31. video blob audio blob
  • 32. gif blob
  • 33. +
  • 34. +
  • 35. 13mb for 30s!
  • 36. 30-90 seconds to upload 30 seconds of video
  • 37. bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html
  • 38. Background Uploads
  • 39. HTML Web Workers
  • 40. Web Workers
  • 41. Shared Web Workers
  • 42. Web Workers Shared Web Workers
  • 43. Web Workers Shared Web Workers Separate Threads
  • 44. Web Workers Shared Web Workers Separate Threads Alive when referenced
  • 45. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation
  • 46. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references
  • 47. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references Shared references
  • 48. Web Workers
  • 49. Shared Web Workers
  • 50. /recorder
  • 51. background-upload.js
  • 52. background-upload.js
  • 53. github.com/broofa/node-uuid stackoverflow.com/questions/13870853
  • 54. /server
  • 55. Was it worth it?
  • 56. Chrome Only (for now)
  • 57. Client side conversion
  • 58. Firefox Nightly now has MediaStreamRecorder API
  • 59. www.w3.org/TR/mediastream-recording
  • 60. Streaming vs Uploading
  • 61. Real background uploads
  • 62. It’s live!
  • 63. battlehack.org Istanbul, Berlin, Warsaw, London, Moscow
  • 64. @cbetta slideshare.net/paypal