Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hacking with HTML5 Videp, RTC and Shared Web Wo...

Avatar for Cristiano Betta Cristiano Betta
April 11, 2014
Technology
0
62

Hacking with HTML5 Videp, RTC and Shared Web Workers

Avatar for Cristiano Betta

Cristiano Betta

April 11, 2014
Tweet

More Decks by Cristiano Betta

See All by Cristiano Betta
Docs as Engineering - DevRelCon London 2019
Avatar for Cristiano Betta cbetta
0
140
DevRelCon London 2019 - Developer Experience Workshop
Avatar for Cristiano Betta cbetta
0
130
DevRelCon London 2019 - Developer Experience Workshop
Avatar for Cristiano Betta cbetta
0
330
The 7 Deadly Sins of Developer Experience (DevRelCon Tokyo)
Avatar for Cristiano Betta cbetta
0
4.1k
The State of Encryption
Avatar for Cristiano Betta cbetta
0
370
Developer Experience Workshop
Avatar for Cristiano Betta cbetta
1
590
The 7 Deadly Sins of Developer Onboarding
Avatar for Cristiano Betta cbetta
0
190
A brick by brick guide to developer experience
Avatar for Cristiano Betta cbetta
2
640
Hackathons Workshop
Avatar for Cristiano Betta cbetta
0
300

Other Decks in Technology

See All in Technology
新規プロダクト開発、AIでどう変わった？ #デザインエンジニアMeetup
Avatar for 弁護士ドットコム bengo4com
0
490
Model Mondays S2E02: Model Context Protocol
Avatar for Nitya Narasimhan, PhD nitya
0
160
キャディでのApache Iceberg, Trino採用事例　-Apache Iceberg and Trino Usecase in CADDi--
Avatar for recruiting@caddi.jp caddi_eng
0
170
DB 醬，嗨！哪泥嘎斯基？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
1.2k
IAMのマニアックな話 2025を執筆して、​ 見えてきたAWSアカウント管理の現在
Avatar for NRI Netcom nrinetcom
PRO
4
630
[TechNight #90-1] 本当に使える？ ZDMの 新機能を実践検証してみた
Avatar for oracle4engineer oracle4engineer
PRO
3
110
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん！HCP Terraformって何？
Avatar for Minoru Nakabayashi mnakabayashi
0
290
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
Cloud Native Scalability for Internal Developer Platforms
Avatar for hhiroshell hhiroshell
2
490
Azure AI Foundryでマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
130

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M

Transcript

  1. The Web Can Do That Better! Hacking with HTML5 Video,

    RTC and Shared Web Workers Cristiano Betta CodeMotion Rome, 2014

  2. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta

  3. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal

  4. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal Event organiser

  5. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal Event organiser Serial entrepreneur

  6. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal Event organiser Serial entrepreneur 50% Italian

  7. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal Event organiser Serial entrepreneur 50% Italian 100% Ferrari Lover

  8. Cristiano Betta CodeMotion Rome, 2014 Cristiano Betta @cbetta Developer Advocate

    @ PayPal Event organiser Serial entrepreneur 50% Italian 100% Ferrari Lover 0% Ferrari owner
  9. None
  10. None
  11. None
  12. None
  13. None

  14. 15s

  15. None
  16. None
  17. None
  18. None
  19. None

  20. Complicated setup

  21. Complicated setup Network sensitive

  22. Complicated setup Network sensitive Data lock-in

  23. None
  24. None
  25. None
  26. None
  27. None

  28. 28s

  29. We Can Do This Better

  30. The Web Can Do This Better

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None

  38. RTCPeerConnection

  39. RTCPeerConnection Peer-to-Peer Data API

  40. RTCPeerConnection Peer-to-Peer Data API Peer-to-Peer DTMF

  41. Peer-to-Server?

  42. WebSockets?

  43. WebSockets?

  44. None
  45. None
  46. None
  47. None
  48. None

  49. webrtc-experiment.com

  50. RecordRTC.js github.com/muaz-khan/WebRTC-Experiment/ tree/master/RecordRTC

  51. RecordRTC is a server-less JavaScript library can be used to

    record WebRTC audio/ video media streams. It supports cross- browser audio/video recording

  52. stream

  53. stream

  54. stream <canvas>

  55. stream <canvas> <audio>

  56. stream <canvas> <audio> video blob

  57. stream <canvas> <audio> video blob audio blob

  58. None

  59. video blob audio blob

  60. gif blob

  61. None
  62. None
  63. None
  64. None
  65. None

  66. +

  67. +

  68. None

  69. 13mb for 30s!

  70. 30-90 seconds to upload 30 seconds of video

  71. None
  72. None

  73. bgrins.github.io/videoconverter.js ! webrtc-experiment.com/ffmpeg/merging- wav-and-webm-into-mp4.html

  74. Background Uploads

  75. None

  76. HTML Web Workers

  77. Web Workers

  78. Shared Web Workers

  79. Web Workers Shared Web Workers

  80. Web Workers Shared Web Workers Separate Threads

  81. Web Workers Shared Web Workers Separate Threads Alive when referenced

  82. Web Workers Shared Web Workers Separate Threads Alive when referenced

    Reference lost on navigation

  83. Web Workers Shared Web Workers Separate Threads Alive when referenced

    Reference lost on navigation Separate references

  84. Web Workers Shared Web Workers Separate Threads Alive when referenced

    Reference lost on navigation Separate references Shared references

  85. Web Workers

  86. None
  87. None
  88. None
  89. None
  90. None

  91. Shared Web Workers

  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None

  99. /recorder

  100. background-upload.js

  101. background-upload.js

  102. github.com/broofa/node-uuid stackoverflow.com/questions/13870853

  103. /server

  104. None
  105. None

  106. Was it worth it?

  107. None
  108. None

  109. Chrome Only (for now)

  110. Client side conversion

  111. Firefox Nightly now has MediaStreamRecorder API

  112. www.w3.org/TR/mediastream-recording

  113. Streaming vs Uploading

  114. Real background uploads

  115. It’s live!

  116. None
  117. None

  118. battlehack.org Istanbul, Berlin, Warsaw, London, Moscow

  119. None
  120. None

  121. @cbetta slideshare.net/paypal

  122. None
  123. None
  124. None
  125. None