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