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
![Page 1: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/1.jpg)
The Web Can Do That Better! My adventure with HTML5 Video,
WebRTC and Web Workers
Cristiano Betta Smashing Borders, Oxford, 2014
![Page 2: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/2.jpg)
![Page 3: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/3.jpg)
![Page 4: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/4.jpg)
![Page 5: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/5.jpg)
![Page 6: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/6.jpg)
Hard to make changes
Data lock-in
Network sensitive
![Page 7: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/7.jpg)
![Page 8: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/8.jpg)
![Page 9: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/9.jpg)
We Can Do This Better
![Page 10: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/10.jpg)
The Web Can Do This Better
![Page 11: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/11.jpg)
![Page 12: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/12.jpg)
![Page 13: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/13.jpg)
![Page 14: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/14.jpg)
RTCPeerConnectionPeer-to-Peer Data APIPeer-to-Peer DTMF
![Page 15: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/15.jpg)
Peer-to-Server?
![Page 16: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/16.jpg)
![Page 17: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/17.jpg)
![Page 18: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/18.jpg)
webrtc-experiment.com
![Page 19: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/19.jpg)
RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/
tree/master/RecordRTC
![Page 20: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/20.jpg)
RecordRTC is a server-less JavaScript library can be used to record WebRTC audio/
video media streams. It supports cross-browser audio/video recording
![Page 21: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/21.jpg)
stream
<video> <audio>
video blob audio blob
![Page 22: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/22.jpg)
![Page 23: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/23.jpg)
video blob audio blob
![Page 24: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/24.jpg)
![Page 25: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/25.jpg)
![Page 26: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/26.jpg)
13mb for 30s!
![Page 27: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/27.jpg)
30-90 seconds to upload 30 seconds of video
![Page 28: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/28.jpg)
![Page 29: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/29.jpg)
bgrins.github.io/videoconverter.js !
webrtc-experiment.com/ffmpeg/merging-wav-and-webm-into-mp4.html
![Page 30: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/30.jpg)
www.w3.org/TR/mediastream-recording
![Page 31: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/31.jpg)
Background Uploads
![Page 32: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/32.jpg)
![Page 33: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/33.jpg)
HTML Web Workers
![Page 34: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/34.jpg)
Web Workers
![Page 35: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/35.jpg)
Shared Web Workers
![Page 36: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/36.jpg)
Web Workers Shared Web Workers
Separate Threads
Alive when referenced
Reference lost on navigation
Only 1 reference ever Many references
![Page 37: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/37.jpg)
/recorder
![Page 38: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/38.jpg)
background-upload.js
![Page 39: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/39.jpg)
background-upload.js
![Page 40: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/40.jpg)
github.com/broofa/node-uuid
stackoverflow.com/questions/13870853
![Page 41: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/41.jpg)
/server
![Page 42: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/42.jpg)
![Page 43: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/43.jpg)
Was it worth it?
![Page 44: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/44.jpg)
Chrome Only (for now)
![Page 45: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/45.jpg)
Firefox Nightly now has MediaStreamRecorder API
![Page 46: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/46.jpg)
Client side conversion
![Page 47: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/47.jpg)
Streaming vs Uploading
![Page 48: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/48.jpg)
Real background uploads
![Page 49: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/49.jpg)
It’s live!
![Page 50: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers](https://reader033.vdocuments.us/reader033/viewer/2022051818/54b6ca354a7959e5268b47ea/html5/thumbnails/50.jpg)
battlehack.org/londonOctober 11-12