the web can do that better - my adventure with html5 vide, webrtc and shared workers
DESCRIPTION
For this years Battle Hack series of hackathons I wanted to replace our dated and clunky Mac OS X video recording app with something more modern. As a web native my initial thoughts went to WebRTC and HTML5 video, but things were not that simple and so started my journey that eventually led me to discover MRecordRTC and HTML5 Shared Web Workers.TRANSCRIPT
The Web Can Do That Better! My adventure with HTML5 Video,
WebRTC and Web Workers
Cristiano Betta Smashing Borders, Oxford, 2014
Hard to make changes
Data lock-in
Network sensitive
We Can Do This Better
The Web Can Do This Better
RTCPeerConnectionPeer-to-Peer Data APIPeer-to-Peer DTMF
Peer-to-Server?
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
<video> <audio>
video blob audio blob
video blob audio 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
www.w3.org/TR/mediastream-recording
Background Uploads
HTML Web Workers
Web Workers
Shared Web Workers
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Only 1 reference ever Many references
/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)
Firefox Nightly now has MediaStreamRecorder API
Client side conversion
Streaming vs Uploading
Real background uploads
It’s live!
battlehack.org/londonOctober 11-12