hacking with html5 video, rtc and shared web workers
TRANSCRIPT
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 entrepreneur
Cristiano Betta CodeMotion Rome, 2014
Cristiano Betta @cbetta Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian
Cristiano Betta CodeMotion Rome, 2014
Cristiano Betta @cbetta Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian
100% Ferrari Lover
Cristiano Betta CodeMotion Rome, 2014
Cristiano Betta @cbetta Developer Advocate @ PayPal
Event organiser
Serial entrepreneur
50% Italian
100% Ferrari Lover
0% Ferrari owner
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
RTCPeerConnectionPeer-to-Peer Data API
RTCPeerConnectionPeer-to-Peer Data APIPeer-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-browser audio/video recording
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 Shared references
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.orgIstanbul, Berlin, Warsaw,
London, Moscow
@cbetta slideshare.net/paypal
