Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hacking with html5 video, rtc and shared web workers

473

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
473
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
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

×