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
E2Eテスト自動化入門
devops_vtj
1
120
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
550
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
190
x86-64 Assembly Essentials
latte72
0
110
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
950
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
240
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.5k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
250
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Code Reviewing Like a Champion
maltzj
521
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Thoughts on Productivity
jonyablonski
69
4.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
KATA
mclloyd
29
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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