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
Making WebRTC Awesome, CascadiaJS 2013
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Henrik Joreteg
November 14, 2013
Technology
2.2k
9
Share
Making WebRTC Awesome, CascadiaJS 2013
Henrik Joreteg
November 14, 2013
More Decks by Henrik Joreteg
See All by Henrik Joreteg
SeattleJS May 14, 2015
henrikjoreteg
1
1.1k
The Evolution of the "Web App" - FluentConf 2015
henrikjoreteg
6
1.2k
BackboneConf 2014
henrikjoreteg
3
510
A Single Page Story – http://ffconf.org/
henrikjoreteg
12
1.6k
I've seen the future
henrikjoreteg
1
250
EdgeConf 2013 - Realtime/WebRTC Intro Talk
henrikjoreteg
1
240
WebRTC - JSConf Brazil 2013
henrikjoreteg
10
1.4k
getUserMedia();
henrikjoreteg
1
210
The State of Realtime at &yet
henrikjoreteg
6
440
Other Decks in Technology
See All in Technology
Geek Woman の育ち方 〜コミュニティとAIと〜
chicaco
0
390
GitHub Copilot CLI の Rubber Duck 機能を使ってコーディングの品質をあげよう #techbaton_findy
stefafafan
2
800
最新技術を"今は選ばない"という技術選定
leveragestech
PRO
0
400
論文紹介:Pixal3D (SIGGRAPH 2026)
tenten0727
0
700
自作エディターをOSSにして分かった、一人に刺さる開発が世界を動かす理由
shinyasaita
1
290
AI全盛の今だからこそ、あえてもう一度振り返るAPIの基礎
smt7174
3
160
TSKaigi 2026 - 型プラグインシステムの実装に使われるテクニック
teamlab
PRO
2
310
権限管理設計を完全に理解した
rsugi
1
190
実践 TanStack Start ― 新規プロダクトを開発して確立した、サーバーとクライアント境界の設計パターン / Practical TanStack Start Server-Client Boundary Patterns
kaminashi
2
280
TypeScriptとAngular Signal で実現する保守性の高いアプリケーション設計 - 3層アーキテクチャによる責務分離の実践(たつかわ) https://2026.tskaigi.org/talks/10
nealle
1
320
JaSSTに関わることで変わった人生観 #jasstnano
makky_tyuyan
0
180
checker.tsにチキンレースを仕掛けてみた:型エラー(TS2589)が発生する境界線を求めて
hal_spidernight
1
190
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
220
Designing for humans not robots
tammielis
254
26k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
120
Information Architects: The Missing Link in Design Systems
soysaucechin
0
930
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
4 Signs Your Business is Dying
shpigford
187
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.1k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.3k
Transcript
Making WebRTC Awesome CascadiaJS 2013 @HenrikJoreteg
WHAT DOES WebRTC MAKE YOU THINK OF?
Hype? Is it ready to use? Websockets re-invented What’s the
big deal?
Making animated GIFs! http://chat.meatspac.es
So what’s the big deal? it’s just another new web
technology.
TypedArray Expo 2013!
FlexBox Expo 2013!
NOPE
THIS IS AN ACTUAL THING: WebRTCExpo.com
CLEARLY SOMETHING UNIQUE IS GOING ON HERE
LET’S SORT THIS OUT
WHAT IS WEBRTC REALLY?
new RTCPeerConnection();
new RTCPeerConnection();
WebSockets SERVER CLIENT
WebRTC PEER PEER
low-latency peer-to-peer networking in the browser
WHY WOULD YOU CARE?
BUILD COOL SH!T
WHAT CAN YOU DO?
AUDIO / VIDEO
BUILD YOUR OWN TELECOM WITH JAVASCRIPT
SUPER INEXPENSIVE
PICTURE OF KIDS Talky.io
talky.io/{{ insert anything }}
None
None
~7,000k Video Calls Connected/Week
REAL
NOW
VIDEO or AUDIO or BOTH + SCREENSHARING*
WHAT ELSE?
SURVEILLANCE SYSTEMS BABY MONITORS CONTROL ELECTRON MICROSCOPE INTERCOM SYSTEMS ALWAYS-ON
OFFICE PORTALS DISTRIBUTED TEAM COLLABORATION PEER-REPLICATED BROADCASTING PIRATE RADIO
P.S. THE QUALITY IS IMPRESSIVE
DATA CHANNELS!
HALF-BAKED BUT AMAZING
WHAT CAN YOU DO?
File Transfer?
YEP: https://www.sharefest.me/
WEB-BASED BIT TORRENT?
YEP: https://github.com/feross/webtorrent
PEER-SEEDED CDN?
YEP: https://peercdn.com/
MULTI-PLAYER WEBGL GAMES?
YEP: https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/
{{ YOUR IDEA }}
andyet.com
BUILDING SOFTWARE WE BELIEVE SHOULD EXIST
XMPP: FEDERATED COMMUNICATION
PHONE SYSTEMS ARE FEDERATED
WHO ARE THE NEXT GENERATION OF TELECOMS?
FACEBOOK GOOGLE MICROSOFT APPLE
FB MESSENGER HANGOUTS SKYPE FACETIME
FACETIME VOICE? LOLz!
NONE OF THEM FEDERATE WITH EACH OTHER
WEB-BASED FEDERATED ALTERNATIVE? WEBRTC + XMPP + JINGLE
None
https://otalk.im
Stanza.io https://github.com/legastero/stanza.io ! Jingle.js https://github.com/legastero/jingle.js
WEBRTC IS HERE
WebRTC needs more Open Web hackers
Tinkerability
DOM WebSockets hardware WebRTC jQuery socket.io Arduino SimpleWebRTC
SimpleWebRTC var webrtc = new SimpleWebRTC({! localVideoEl: 'localVideo',! remoteVideosEl: 'remotesVideos',!
autoRequestMedia: true! });! ! webrtc.on('readyToCall', function () {! webrtc.joinRoom('room name');! });!
SimpleWebRTC.com
PeerJS OpenTok RTCMultiConnection (https://www.webrtc-experiment.com)
feedback file bugs improve APIs push for interoperability
IsWebRTCReadyYet.com
CRAZY FAST PROGRESS
NOV. 2011 FIRST HEARD OF WEBRTC FROM CHRIS BLIZZARD AT
FIRST REALTIME CONF
JAN. 2012 FEASIBILITY INQUIRY FROM WORKFACE
JUNE 2012 INTERNAL DEMO FOR AT&T
JAN. 2013 att.js at CES
TODAY 1,000,000,000 WebRTC Capable Browsers
IN LESS THAN 5 YEARS WEBRTC WILL BE THE #1
WAY PEOPLE MAKE VOICE CALLS
THANKS! @HenrikJoreteg