Hacking with HTML5 Videp, RTC and Shared Web Workers

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
14. 15s
20. Complicated setup
21. Complicated setup Network sensitive
22. Complicated setup Network sensitive Data lock-in
28. 28s
29. We Can Do This Better
30. The Web Can Do This Better
38. RTCPeerConnection
39. RTCPeerConnection Peer-to-Peer Data API
40. RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF
41. Peer-to-Server?
42. WebSockets?
43. WebSockets?
49. webrtc-experiment.com
50. RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/ tree/master/RecordRTC
51. RecordRTC is a server-less JavaScript library can be used to record WebRTC audio/ video media streams. It supports cross- browser audio/video recording
52. stream
53. stream
54. stream <canvas>
55. stream <canvas> <audio>
56. stream <canvas> <audio> video blob
57. stream <canvas> <audio> video blob audio blob
59. video blob audio blob
60. gif blob
66. +
67. +
69. 13mb for 30s!
70. 30-90 seconds to upload 30 seconds of video
73. bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html
74. Background Uploads
76. HTML Web Workers
77. Web Workers
78. Shared Web Workers
79. Web Workers Shared Web Workers
80. Web Workers Shared Web Workers Separate Threads
81. Web Workers Shared Web Workers Separate Threads Alive when referenced
82. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation
83. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references
84. Web Workers Shared Web Workers Separate Threads Alive when referenced Reference lost on navigation Separate references Shared references
85. Web Workers
91. Shared Web Workers
99. /recorder
100. background-upload.js
101. background-upload.js
102. github.com/broofa/node-uuid stackoverflow.com/questions/13870853
103. /server
106. Was it worth it?
109. Chrome Only (for now)
110. Client side conversion
111. Firefox Nightly now has MediaStreamRecorder API
112. www.w3.org/TR/mediastream-recording
113. Streaming vs Uploading
114. Real background uploads
115. It’s live!
118. battlehack.org Istanbul, Berlin, Warsaw, London, Moscow
121. @cbetta slideshare.net/paypal