Szymon Nowak
@szimek
Cowbell Labs
what is
WebRTC
?
capture
capture
audio
capture
video
peer-to-peer
peer-to-peer
audio
peer-to-peer
video
peer-to-peer
data
plugin-free video calls
developers
no infrastructure needed *
users
no plugins
no third-party app accounts
© Sony Pictures
© Sony Pictures
© Sony Pictures
© Sony Pictures
© Sony Pictures
audio / video
conferencing
Nice! #FirefoxOS keeps improving - here testing appear.in between an #iPhone and a FirefoxOS phone :) #webRTC FTW! pic.twitter.com/ZOir8snL4y
— appear.in (@appear_in) August 19, 2014customer support
© Amazon
one-to-one
video calls
demo #1
browser
to
browser
browser
to
phone
demo #2
require "sinatra"
require "twilio-ruby"
get "/" do
capability = Twilio::Util::Capability.new ENV["ACCOUNT_SID"], ENV["ACCOUNT_TOKEN"]
capability.allow_client_outgoing ENV["APP_SID"]
capability.allow_client_incoming "MEETJSSUMMIT2014"
token = capability.generate
erb :index, locals: {token: token}
end
post "/voice" do
content_type "text/xml"
"<Response>
<Dial callerId=\"#{ENV['CALLER_PHONE_NUMBER']}\">
<Number>#{params[:PhoneNumber]}</Number>
</Dial>
</Response>"
end
Twilio.Device.setup("<%= token %>", {debug: true});
function call() {
var params = {"PhoneNumber": $("#number").val()};
Twilio.Device.connect(params);
}
function hangup() {
Twilio.Device.disconnectAll();
}
function anykey() {
var conn = Twilio.Device.activeConnection();
if (conn) conn.sendDigits("1");
}
browser
to
phone
phone
to
browser
demo #3
image processing
motion detection
object tracking
face detection
augmented reality
audio processing
WebAudio API
can use and create
WebRTC media streams
measure volume
change pitch of your voice
mix and broadcast music
demo #4
screensharing
live streaming
games
live streaming
presentations
data
low-latency networking
multiplayer games
BananaBread
file sharing
demo #5
BitTorrent
feross / webtorrent
instant.io
CDN augmentation
app server
PeerServer
how does
WebRTC
work?
SDP Session Description Protocol
ICE Interactive Connectivity Establishment
STUN Session Traversal Utilities for NAT
TURN Traversal Using Relay NAT
RTP Real-time Transport Protocol
SCTP Stream Control Transmission Protocol
© Sony Pictures
© Sony Pictures
// Stir in the WebRTC object
var webrtc = new SimpleWebRTC({
localVideoEl: 'localVideo',
remoteVideosEl: 'remotesVideos',
autoRequestMedia: true
});
// Join when ready
webrtc.on('readyToCall', function () {
webrtc.joinRoom('your awesome room name');
});
// Send data
webrtc.sendDirectlyToAll('data channel name', 'label', message);
// Receive data
webrtc.on('channelMessage', function (peer, channelName, data) {
// Handle message
// data.type -> label
// data.payload -> message
});
browser support
© Sony Pictures
© Sony Pictures
© Sony Pictures