The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

50
The Web Can Do That Better! My adventure with HTML5 Video, WebRTC and Web Workers Cristiano Betta Smashing Borders, Oxford, 2014

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 of The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Page 1: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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
Page 3: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 4: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 5: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 6: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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
Page 8: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 9: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

We Can Do This Better

Page 10: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

The Web Can Do This Better

Page 11: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 12: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 13: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 14: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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

Peer-to-Server?

Page 16: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 17: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 18: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

webrtc-experiment.com

Page 19: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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

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

stream

<video> <audio>

video blob audio blob

Page 22: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 23: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

video blob audio blob

Page 24: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 25: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 26: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

13mb for 30s!

Page 27: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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
Page 29: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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

www.w3.org/TR/mediastream-recording

Page 31: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Background Uploads

Page 32: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 33: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

HTML Web Workers

Page 34: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Web Workers

Page 35: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Shared Web Workers

Page 36: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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

/recorder

Page 38: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

background-upload.js

Page 39: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

background-upload.js

Page 40: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

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

/server

Page 42: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers
Page 43: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Was it worth it?

Page 44: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Chrome Only (for now)

Page 45: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Firefox Nightly now has MediaStreamRecorder API

Page 46: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Client side conversion

Page 47: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Streaming vs Uploading

Page 48: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

Real background uploads

Page 49: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

It’s live!

Page 50: The web can do that better - My adventure with HTML5 Vide, WebRTC and Shared Workers

battlehack.org/londonOctober 11-12