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
Real World WebRTC
Search
Eric Schoffstall
March 02, 2016
Programming
0
47
Real World WebRTC
Given at dot.js in Paris, 2015
Eric Schoffstall
March 02, 2016
Tweet
Share
More Decks by Eric Schoffstall
See All by Eric Schoffstall
CoffeeScript 101
contra
3
220
Websocket Messaging Patterns
contra
4
1.6k
Warlock : DSTM via Websockets
contra
1
130
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
250
CSC509 Lecture 04
javiergs
PRO
0
300
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
私はどうやって技術力を上げたのか
yusukebe
43
17k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
360
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
3
800
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
株式会社 Sun terras カンパニーデック
sunterras
0
240
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Writing Fast Ruby
sferik
629
62k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Site-Speed That Sticks
csswizardry
11
880
Transcript
Real World WebRTC
WebRTC
WebRTC is rad
WebRTC is cheap
WebRTC is cutting-edge
WebRTC is difficult
WebRTC is difficult Adapters? Plugins? Polyfills? Native? Prefixes? Extensions?
High Level
Camera Access
navigator.getUserMedia
var opt = {video: true}; navigator.getUserMedia(opt, onSuccess, onError);
var opt = {video: true, audio: true}; navigator.getUserMedia(opt, onSuccess, onError);
getUserMedia(opt, onSuccess, onError);
element.srcObject = stream;
codepen.io/contra/full/eyjgf (PLEASE MUTE)
P2P
PeerConnection
PeerConnection - Offer var pc = new PeerConnection(); pc.addStream(stream); pc.createOffer(function(offer)
{ var sdp = new SessionDescription(offer); pc.setLocalDescription(sdp, function() { // TODO: send to other user }); });
PeerConnection - Answer var pc = new PeerConnection(); pc.addStream(stream); var
offer = new SessionDescription(msg); pc.setRemoteDescription(offer, function() { pc.createAnswer(function(answer) { var sdp = new SessionDescription(answer); pc.setLocalDescription(sdp, function() { // TODO: send to other user }); }); });
DataChannel
DataChannel var dataChannel = pc.createDataChannel('cool-stuff'); dataChannel.onopen = function() { dataChannel.send('yo
sup'); };
DataChannel TCP UDP SCTP Reliability reliable unreliable configurable Delivery ordered
unordered configurable Transmission byte-oriented message-oriented message-oriented Flow Control yes no yes
Making a Real Product
Initial Prototype
"Oops" Realization
Do we need to?
Do we need to? YES
Android
Android <3 Crosswalk
iOS
iOS <3 iosrtc
iOS <3 iosrtc
IE/Safari
IE/Safari <3 Temasys
RTC Everywhere
http://rtc.works
http://rtc.works Chrom e Firefox Safari IE Android Edge iOS Node.js
None
None
None
None
None