we need reliable, distributed, encrypted, direct communication - simple to use
cc-by eff.org
WebRTC: Theory and Practice
Jan Lelis | Marius Melzer
WebRTC: Theory and Practice
@happycode | @faraoso
WebRTC: Theory and Practice
BerlinJS | June 20, 2013
Client-Server-Client?
Client-Client!
Initially by Global IP Solutions (GIPS) 2010
Upcoming Standard
World Wide Web Consortium
Internet Engineering Task Force
Initial Parts Developed By
Global IP Solutions
Bought by Google in 2010
getUserMedia Demo
getUserMedia Demo
<video id="example1-video" autoplay="autoplay">
<script>
navigator.webkitGetUserMedia(
{video: true, audio: false},
function(stream) {
document.getElementById('example1-video').src =
webkitURL.createObjectURL(stream);
}
);
</script>
WebRTC: Theory
Features
Session Establishment
Low Level Protocols
WebRTC Features
Feature
Standardized Protocols
NAT Hole Punching
Media Streams
Data Channels
Feature
Standardized Codecs
Video: VP8
Audio: Opus
and "independence"
Feature
Platform Interoperability
Different OSs / Browsers
Different Devices / VOIP / Land Lines
Feature
Well-defined Communication Channel
Adaptive to Network Conditions / Renegotiation
Encrypted by Default
Session Establishment
Session Establishment
Signaling Channel
Free to choose: XHR, WS, ...
Developer implements Details
Session Establishment
Signaling Channel
Session Establishment
Contact Server
Session Establishment
Ensure Agreement
Renegotiation Possible. Developer not supposed to edit sdp, but can
Session Establishment
SDP
Session Description Protocol
Details about Media Capabilities
Session Establishment
SDP Example Token
v=0 o=- 3869962025294249707 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqd m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:BEu7Lja6FjAY0e9f a=ice-pwd:j7e1RG5lkZglnryHeqB4drYn a=ice-options:google-ice a=fingerprint:sha-256 CE:D3:47:15:E8:5D:64:35:30:32:F7:14:FD:18:17:9C:E1:3A:F2:0B:0B:90:FF:26:90:21:B1:40:68:9C:EA:E7 a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=sendrecv a=mid:audio a=rtcp-mux a=crypto:1 AESCM128HMACSHA180 inline:gFszjZPHhEfqGehRrfnSrGtNqMlzYglKuvewCInq a=rtpmap:111 opus/48000/2 a=fmtp:111 minptime=10 a=rtpmap:103 ISAC/16000 a=rtpmap:104 ISAC/32000 a=rtpmap:0 PCMU/8000 a=rtpmap:8 PCMA/8000 a=rtpmap:107 CN/48000 a=rtpmap:106 CN/32000 a=rtpmap:105 CN/16000 a=rtpmap:13 CN/8000 a=rtpmap:126 telephone-event/8000 a=maxptime:60 a=ssrc:2710618532 cname:aqZgznSt7eFJwMlw a=ssrc:2710618532 msid:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqd Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqda0 a=ssrc:2710618532 mslabel:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqd a=ssrc:2710618532 label:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqda0 m=video 1 RTP/SAVPF 100 116 117 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:BEu7Lja6FjAY0e9f a=ice-pwd:j7e1RG5lkZglnryHeqB4drYn a=ice-options:google-ice a=fingerprint:sha-256 CE:D3:47:15:E8:5D:64:35:30:32:F7:14:FD:18:17:9C:E1:3A:F2:0B:0B:90:FF:26:90:21:B1:40:68:9C:EA:E7 a=extmap:2 urn:ietf:params:rtp-hdrext:toffset a=sendrecv a=mid:video a=rtcp-mux a=crypto:1 AESCM128HMACSHA180 inline:gFszjZPHhEfqGehRrfnSrGtNqMlzYglKuvewCInq a=rtpmap:100 VP8/90000 a=rtcp-fb:100 ccm fir a=rtcp-fb:100 nack a=rtcp-fb:100 goog-remb a=rtpmap:116 red/90000 a=rtpmap:117 ulpfec/90000 a=ssrc:1347190094 cname:aqZgznSt7eFJwMlw a=ssrc:1347190094 msid:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqd Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqdv0 a=ssrc:1347190094 mslabel:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqd a=ssrc:1347190094 label:Yhb3bAbcbJfG3I2gQ1CSKyZ1YxLbdP4pPJqdv0
NAT: The IP4 World is not Ideal...
Session Establishment
Hole Punching
Hole Punching
STUN
Session Traversal Utilities for NAT
How are you reachable from the outside world?
Hole Punching
STUN
Hole Punching
ICE
Interactive Connectivy Establishment
Send as many ways to reach each other as possible
Hole Punching
ICE
Session Establishment
Success
Hole Punching
TURN
Traversal Using Relays around NAT
Use a "relay" server for video data, which is not behind NAT
Hole Punching
TURN
Solutions: Limit ICE candidates: Only TURN IP / Public IP
Session Establishment
Privacy Considerations
Participants learns IPs of peers (not only of server)
Private IP (behind NAT) might become known by others
Even if session not established
Low Level Protocols
Low Level Protocols
Transport Layer
Datagram Transport Layer Security (DTLS)
TLS Transport over UDP
IETF / Used in many VOIP Infrastructures
Low Level Protocols
Secure Real-time Transport Protocol
SRTP transports Video / Audio Packets
Contains Codecs / Timestamps / Sequence Numbers
Low Level Protocols
Stream Control Transmission Protocol
Used for Data Channels
Alternative to TCP/UDP
Comes with congestion control
SCTP over DTLS over UDP
WebRTC: Practice
Browser Support
Session Flow
Example Workarounds
Opera plans full support
Supported Browsers
Chrome Stable
API still changing
Firefox Stable
June 25, 2013
Opera
Currently only getUserMedia()
Session Flow
Obtain Local Media
Setup PeerConnection / Handle Streams
Connect to Signaling Server / Join Room
Exchange SDP
Exchange Ice Candidates
Session Flow
Obtain Local Media
var onLocalStreamReady = function(localStream) {
...
};
navigator.webkitGetUserMedia(
{video: true, audio: false},
function(stream) {
console.log("Got localstream");
onLocalStreamReady(stream);
}
);Session Flow
Setup PeerConnection / Handle Streams
var onLocalStreamReady = function(localStream) {
var pc = new webkitRTCPeerConnection(
{iceServers: [{url: "stun:93.186.193.18"}]},
{optional: [{DtlsSrtpKeyAgreement: true}]}
);
pc.addStream(localStream);
pc.onaddstream = function(event) {
console.log("Add stream");
$('#example2')[0].src =
webkitURL.createObjectURL(event.stream);
};
// continues in next code example...Session Flow
Connect to Signaling Server / Join Room
// ... continued from last code example
var peerId;
var server = new WebSocket('wss:palava.tv:4233');
server.onopen = function() {
server.onmessage = function(msg) {
... // react on joined_room, answer & ice_candidate
};
... // send own ice_candidates
console.log("Send message: 'join_room'");
server.send(JSON.stringify({
event: 'join_room',
room_id: 'berlinjs'
}));
};
};Session Flow
Exchange SDP
server.onmessage = function(msg) {
msg = JSON.parse(msg.data);
console.log("Got message: " + msg.event);
if(msg.event === 'joined_room') {
peerId = msg.peer_ids[0];
pc.createOffer(function(sdp) {
console.log("Created offer for peer" + peerId);
pc.setLocalDescription(sdp);
server.send(JSON.stringify({
event: 'send_to_peer',
peer_id: peerId,
data: {
event: 'offer',
sdp: sdp
}
}));
});
...
}
};server.onmessage = function(msg) {
msg = JSON.parse(msg.data);
console.log("Got message: " + msg.event);
...
if(msg.event === 'answer') {
pc.setRemoteDescription(
new RTCSessionDescription(msg.sdp)
);
}
...
};Session Flow
Exchange Ice Candidates
server.onmessage = function(msg) {
msg = JSON.parse(msg.data);
console.log("Got message: " + msg.event);
...
if(msg.event === 'ice_candidate') {
var candidate = new RTCIceCandidate({candidate: msg.candidate...});
pc.addIceCandidate(candidate);
}
};
pc.onicecandidate = function(event) {
if(event.candidate) {
console.log("Send ice candidate");
server.send(JSON.stringify({
event: 'send_to_peer',
peer_id: peerId,
data: {event:'ice_candidate', candidate:event.candidate.candidate...}
}));
}
};PeerConnection Demo
Nobody is in https://palava.tv/berlinjs, so this demo won't work!
Workarounds
2 Examples
Problem
Firefox and Chrome don't want to talk with each other
Workaround
Hardcode Crypto Headers
sdpHandler = (sd) =>
if window.mozRTCPeerConnection
sd.sdp += (
'a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:' +
'BAADBAADBAADBAADBAADBAADBAADBAADBAADBAAD\r\n'
)
# ...Problem
When you mute one media stream in Chrome,
it will mute all of the other media streams!
Workaround
Manage all video "muted" states yourself!
When a stream gets (un)muted, always mute all streams
Then manually turn on all streams, where the mute state is "unmuted"