Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hacking with HTML5 Videp, RTC and Shared Web Wo...
Search
Cristiano Betta
April 11, 2014
Technology
0
59
Hacking with HTML5 Videp, RTC and Shared Web Workers
Cristiano Betta
April 11, 2014
Tweet
Share
More Decks by Cristiano Betta
See All by Cristiano Betta
Docs as Engineering - DevRelCon London 2019
cbetta
0
140
DevRelCon London 2019 - Developer Experience Workshop
cbetta
0
130
DevRelCon London 2019 - Developer Experience Workshop
cbetta
0
270
The 7 Deadly Sins of Developer Experience (DevRelCon Tokyo)
cbetta
0
4k
The State of Encryption
cbetta
0
340
Developer Experience Workshop
cbetta
1
570
The 7 Deadly Sins of Developer Onboarding
cbetta
0
180
A brick by brick guide to developer experience
cbetta
2
620
Hackathons Workshop
cbetta
0
270
Other Decks in Technology
See All in Technology
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
200
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
3
180
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
610
OPENLOGI Company Profile
hr01
0
60k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Raft: Consensus for Rubyists
vanstee
137
6.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Statistics for Hackers
jakevdp
797
220k
Speed Design
sergeychernyshev
27
810
A better future with KSS
kneath
238
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
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
None
None
None
None
None
15s
None
None
None
None
None
Complicated setup
Complicated setup Network sensitive
Complicated setup Network sensitive Data lock-in
None
None
None
None
None
28s
We Can Do This Better
The Web Can Do This Better
None
None
None
None
None
None
None
RTCPeerConnection
RTCPeerConnection Peer-to-Peer Data API
RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF
Peer-to-Server?
WebSockets?
WebSockets?
None
None
None
None
None
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
None
video blob audio blob
gif blob
None
None
None
None
None
+
+
None
13mb for 30s!
30-90 seconds to upload 30 seconds of video
None
None
bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html
Background Uploads
None
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
None
None
None
None
None
Shared Web Workers
None
None
None
None
None
None
None
/recorder
background-upload.js
background-upload.js
github.com/broofa/node-uuid stackoverflow.com/questions/13870853
/server
None
None
Was it worth it?
None
None
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!
None
None
battlehack.org Istanbul, Berlin, Warsaw, London, Moscow
None
None
@cbetta slideshare.net/paypal
None
None
None
None