Your SlideShare is downloading. ×
0
WebRTC
Amitesh Madhur (@amiteshawa)
Cisco Systems
Agenda
1. Media Stream
2. Constraints
3. RTCPeerConnection
4. Network (STUN, TURN)
5. DataChannel
6. Ephemeral password
Peer to peer, plugin free!

X

Server
WebRTC
1. MediaStream
2. RTCPeerConnection

3. DataChannel
Media Stream
1.
2.
3.
4.
5.

getUserMedia
Collects audio, video, screen inputs
Synchronizes Audio & Video
Noise Cancellati...
<video id=“me" autoplay></video>

navigator.getUserMedia

=

navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
nav...
Demo
Confused Left/Right?
<style>
video {
-webkit-transform: scaleX(-1);

}
</style>
canvasContext.translate(width, 0);
canvasC...
<video id=“me" autoplay></video>

navigator.getUserMedia

=

navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
nav...
Constraints (audio, video)

{audio: true, video: true}
Constraints (video height, width)
{
audio: true,
video: {
mandatory: {
maxWidth: 320,
maxHeight: 180
}
}
}
Constraints for screen capture

getUserMedia({video: {
mandatory: {
chromeMediaSource: 'screen'
}
}, audio: false},
onSucc...
chromeMediaSource: 'screen'
1. Works only on https
2. chrome://flags/#enable-usermedia-screencapture
Peer Connection
1.
2.
3.
4.

Establish a connection though Signaling
Pass the user media stream
Other side gets the stream
Add the receive...
Demo
github.com/amiteshawa/learn-rtc
<video id=“me" autoplay></video>
<video id=“other" autoplay></video>
peer = new RTCPeerConnection(servers);
peer.onaddstre...
<video id=“me" autoplay></video>
<video id=“other" autoplay></video>
peer = new RTCPeerConnection(servers);
peer.onaddstre...
User 1
Page Load
Renders Invite
Button

Websocket

User 2
Page Load

Renders Invite
Button
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load
User 1
Page Load

Websocket
Open connection

GUM

Clicks Invite
Button

Create Invite

User 2

Open connection

Page Load
User 1
Page Load

Websocket
Open connection

Open connection

GUM

Create Invite

User 2

Broadcast Invite

Page Load
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load

GUM

Create Invite

Ignored Invite

Broad...
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load

GUM

Create Invite

Broadcast Invite

Ign...
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load

GUM

Create Invite

Broadcast Invite

Ign...
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load

GUM

Create Invite

Broadcast Invite

Ign...
User 1
Page Load

User 2

Websocket
Open connection

Open connection

Page Load

GUM

Create Invite

Broadcast Invite

Ign...
User 1
Page Load

Websocket
Open connection

User 2

Open connection

Page Load

GUM

Create Invite

Broadcast Invite

Ign...
STUN/TURN and ICE
S
T
U
N

N
A
T

N
A
T
S
T
U
N

N
A
T

Not 100% Reliable
N
A
T
T
U
R
N

N
A
T

S
E
C
U
R
E
N
A
T
T
U
R
N

Expensive & Slow
N
A
T

S
E
C
U
R
E

N
A
T
TURN

ICE

STUN

S
E
C
U
R
E
N
A
T

N
A
T
Public STUN
stun.l.google.com:19302
stun1.l.google.com:19302
stun2.l.google.com:19302
stun3.l.google.com:19302
stun4.l.goo...
Wanna Setup your own?

slideshare.net/amiteshawa/webrtc-media-stra
Data Channel
RTCDataChannel
1.
2.
3.
4.

Peer to peer data sharing
Works with RTCPeerConnection
Secure
Websocket like APIs
webkitRTCPeerConnection(config,
{optional:
[{RtpDataChannels: true}]});
channel =
peer.createDataChannel("sendDataChanne
l...
Demo
Ephemeral password
IN JAVASCRIPT
var turn;
turn = {

url: 'turn:<user-name>@<IP>:<PORT>',
credential: ‘password‘

};
// for chrome 28 and abo...
Ephemeral password
1.
2.
3.
4.
5.
6.

Limited time TURN credentials
Based on REST Service
Webserver creates password
Share...
long-term credentials
User

TURN
User sends request to TURN without password
long-term credentials
User

TURN
User sends request to TURN without password

TURN send Error 401, with realm and nonce
long-term credentials
User

TURN
User sends request to TURN without password

TURN send Error 401, with realm and nonce
Us...
long-term credentials
User

TURN
User sends request to TURN without password

TURN send Error 401, with realm and nonce

U...
long-term credentials
User

TURN
User sends request to TURN without password

TURN send Error 401, with realm and nonce

U...
long-term credentials
User

TURN
User sends request to TURN without password

TURN send Error 401, with realm and nonce

U...
Long-term password alone does not
solve the problem for WebRTC
Ephemeral credentials
User

TURN

REST Server

my-svc/get-turn-auth
Creates username, password

Shared Secret

Sends usern...
Create Tables
CREATE TABLE turnusers_lt (
name varchar(512) PRIMARY KEY,
hmackey char(32)
);

CREATE TABLE turn_secret (
v...
Create REST API
Generate username and credential
username= <USER NAME> + ":" + <timestamp>
password = base64(hmac-sha1(sec...
{
"username" : "user1:1393412082",
"password" : "NGFmNzUzZDIxOWE1OWI0NTBmZGZiNg==",
"ttl" : 86400,
"uris" : [
"turn:1.2.3....
Config
1. In turnserver.conf Uncomment/Enable
1.
2.
3.
4.

lt-cred-mech
use-auth-secret
static-auth-secret
mysql-userdb="h...
Create User & Secret
Create Secret
$ turnadmin --mysql-userdb="host=127.0.0.1
dbname=turn user=root password=
connect_time...
>= 21

>= 20

>= 12
WebRTC4all…
Thank you
Twitter: @amiteshawa
Upcoming SlideShare
Loading in...5
×

Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code

2,063

Published on

TURN is used for relaying data from source to target. TURN consumes bandwidh and it is expensive.

Therefore there is a need for authorizing the TURN connection. However given that the connection is made from a client using javascript, use of a static username/password can be easily compromised.

Ephemeral password comes to the rescue here.


Learn WebRTC in 200 Line of code:
You will need a lot of patience going through libraries that are present today simply because they have thousands of line of code. So I will highly encourage you all to refer the source code located here: github.com/amiteshawa/learn-rtc

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,063
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
48
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code"

  1. 1. WebRTC Amitesh Madhur (@amiteshawa) Cisco Systems
  2. 2. Agenda 1. Media Stream 2. Constraints 3. RTCPeerConnection 4. Network (STUN, TURN) 5. DataChannel 6. Ephemeral password
  3. 3. Peer to peer, plugin free! X Server
  4. 4. WebRTC 1. MediaStream 2. RTCPeerConnection 3. DataChannel
  5. 5. Media Stream 1. 2. 3. 4. 5. getUserMedia Collects audio, video, screen inputs Synchronizes Audio & Video Noise Cancellation Image Enhancement
  6. 6. <video id=“me" autoplay></video> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, onSuccess, onError); } window.URL = window.URL || window.webkitURL; var me = document.getElementById('me'); function onSuccess(stream) { me.src = window.URL.createObjectURL(stream); } function onError(e) { // error }
  7. 7. Demo
  8. 8. Confused Left/Right? <style> video { -webkit-transform: scaleX(-1); } </style> canvasContext.translate(width, 0); canvasContext.scale(-1, 1); <video id=“me" autoplay></video>
  9. 9. <video id=“me" autoplay></video> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia( {video: true}, onSuccess, onError); window.URL = window.URL || window.webkitURL; if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, onSuccess, onError); } var me = document.getElementById('me'); function onSuccess(stream) { me.src = window.URL.createObjectURL(stream); } Constraints function onError(e) { // error }
  10. 10. Constraints (audio, video) {audio: true, video: true}
  11. 11. Constraints (video height, width) { audio: true, video: { mandatory: { maxWidth: 320, maxHeight: 180 } } }
  12. 12. Constraints for screen capture getUserMedia({video: { mandatory: { chromeMediaSource: 'screen' } }, audio: false}, onSuccess, onError);
  13. 13. chromeMediaSource: 'screen' 1. Works only on https 2. chrome://flags/#enable-usermedia-screencapture
  14. 14. Peer Connection
  15. 15. 1. 2. 3. 4. Establish a connection though Signaling Pass the user media stream Other side gets the stream Add the received stream to <video> tag
  16. 16. Demo
  17. 17. github.com/amiteshawa/learn-rtc
  18. 18. <video id=“me" autoplay></video> <video id=“other" autoplay></video> peer = new RTCPeerConnection(servers); peer.onaddstream = gotRemoteStream; peer.addStream(localStream); if(host) { peer.createOffer(callGotOffer, null, {mandatory: { OfferToReceiveAudio: true, OfferToReceiveVideo: true}}); } else { peer.createAnswer(peer.remoteDescription, callGotOffer); } function callGotOffer(sd) { peer.setLocalDescription(sd); } function gotAnswer(desc) { peer.setRemoteDescription(new RTCSessionDescription(desc)); } function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream); }
  19. 19. <video id=“me" autoplay></video> <video id=“other" autoplay></video> peer = new RTCPeerConnection(servers); peer.onaddstream = gotRemoteStream; peer.addStream(localStream); if(host) { peer.createOffer(callGotOffer, null, {mandatory: { OfferToReceiveAudio: true, var STUN, TURN, config = {}; OfferToReceiveVideo: true}}); } STUN {= { url: “stun:stun.l.google.com:19302”}; else peer.createAnswer(peer.remoteDescription, callGotOffer); TURN = { username: “turn-user", } credential: "NGFmNGRlMOWZmMTVmZGZiNg==", function callGotOffer(sd) { url: "turn:10.5.7.13:3333?transport=udp“ peer.setLocalDescription(sd); } }; function gotAnswer(desc) { config.iceServers = [STUN, TURN]; peer.setRemoteDescription(new RTCSessionDescription(desc)); } function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream); }
  20. 20. User 1 Page Load Renders Invite Button Websocket User 2 Page Load Renders Invite Button
  21. 21. User 1 Page Load Websocket Open connection User 2 Open connection Page Load
  22. 22. User 1 Page Load Websocket Open connection GUM Clicks Invite Button Create Invite User 2 Open connection Page Load
  23. 23. User 1 Page Load Websocket Open connection Open connection GUM Create Invite User 2 Broadcast Invite Page Load
  24. 24. User 1 Page Load Websocket Open connection User 2 Open connection Page Load GUM Create Invite Ignored Invite Broadcast Invite Invite Button Changed to “Join”
  25. 25. User 1 Page Load Websocket Open connection User 2 Open connection Page Load GUM Create Invite Broadcast Invite Ignored Invite Offer SDP Offer SDP Invite Button Changed to “Join” Clicked Join Button GUM
  26. 26. User 1 Page Load Websocket Open connection User 2 Open connection Page Load GUM Create Invite Broadcast Invite Ignored Invite Remote Desc Offer SDP Answer SDP Offer SDP Answer SDP Invite Button Changed to “Join” Clicked Join Button GUM Remote Desc
  27. 27. User 1 Page Load Websocket Open connection User 2 Open connection Page Load GUM Create Invite Broadcast Invite Ignored Invite Remote Desc Offer SDP Answer SDP ICE Candidate Offer SDP Answer SDP ICE Candidate Invite Button Changed to “Join” Clicked Join Button GUM Remote Desc
  28. 28. User 1 Page Load User 2 Websocket Open connection Open connection Page Load GUM Create Invite Broadcast Invite Ignored Invite Remote Desc Offer SDP Answer SDP Offer SDP Answer SDP ICE Candidate ICE Candidate ICE Candidate ICE Candidate Add Stream Add Stream Invite Button Changed to “Join” Clicked Join Button GUM Remote Desc
  29. 29. User 1 Page Load Websocket Open connection User 2 Open connection Page Load GUM Create Invite Broadcast Invite Ignored Invite Remote Desc Offer SDP Answer SDP Offer SDP Answer SDP ICE Candidate Add Stream ICE Candidate ICE Candidate Invite Button Changed to “Join” Clicked Join Button GUM Remote Desc ICE Candidate Add Stream
  30. 30. STUN/TURN and ICE
  31. 31. S T U N N A T N A T
  32. 32. S T U N N A T Not 100% Reliable N A T
  33. 33. T U R N N A T S E C U R E N A T
  34. 34. T U R N Expensive & Slow N A T S E C U R E N A T
  35. 35. TURN ICE STUN S E C U R E N A T N A T
  36. 36. Public STUN stun.l.google.com:19302 stun1.l.google.com:19302 stun2.l.google.com:19302 stun3.l.google.com:19302 stun4.l.google.com:19302
  37. 37. Wanna Setup your own? slideshare.net/amiteshawa/webrtc-media-stra
  38. 38. Data Channel
  39. 39. RTCDataChannel 1. 2. 3. 4. Peer to peer data sharing Works with RTCPeerConnection Secure Websocket like APIs
  40. 40. webkitRTCPeerConnection(config, {optional: [{RtpDataChannels: true}]}); channel = peer.createDataChannel("sendDataChanne l", {reliable: false}); channel.onopen = manageChannel; channel.onclose = manageChannel; }, sendData = function(data){ channel.send(data); }, onMsg = function(e){ obj.innerHTML += 'He: ' + e.data ; }, manageChannel = function(){
  41. 41. Demo
  42. 42. Ephemeral password
  43. 43. IN JAVASCRIPT var turn; turn = { url: 'turn:<user-name>@<IP>:<PORT>', credential: ‘password‘ }; // for chrome 28 and above turn = { url: 'turn:<IP-address>:<PORT>', username: ‘<user-name>‘, credential: ‘<password>' };
  44. 44. Ephemeral password 1. 2. 3. 4. 5. 6. Limited time TURN credentials Based on REST Service Webserver creates password Shared secret TURN Server does NOT implement the REST API Based on long-term credentials mechanism
  45. 45. long-term credentials User TURN User sends request to TURN without password
  46. 46. long-term credentials User TURN User sends request to TURN without password TURN send Error 401, with realm and nonce
  47. 47. long-term credentials User TURN User sends request to TURN without password TURN send Error 401, with realm and nonce User Checks 401 and extracts realm and nonce
  48. 48. long-term credentials User TURN User sends request to TURN without password TURN send Error 401, with realm and nonce User Checks 401 and extracts realm and nonce User generates MD5 key with user, realm
  49. 49. long-term credentials User TURN User sends request to TURN without password TURN send Error 401, with realm and nonce User Checks 401 and extracts realm and nonce User generates MD5 key with user, realm User sends new request to TURN with password
  50. 50. long-term credentials User TURN User sends request to TURN without password TURN send Error 401, with realm and nonce User Checks 401 and extracts realm and nonce User generates MD5 key with user, realm User sends new request to TURN with password TURN Validates Matches? Then connected
  51. 51. Long-term password alone does not solve the problem for WebRTC
  52. 52. Ephemeral credentials User TURN REST Server my-svc/get-turn-auth Creates username, password Shared Secret Sends username, password MySQL Send connection request to TURN After this it same as long term auth
  53. 53. Create Tables CREATE TABLE turnusers_lt ( name varchar(512) PRIMARY KEY, hmackey char(32) ); CREATE TABLE turn_secret ( value varchar(512) ); CREATE TABLE allowed_peer_ip ( ip_range varchar(256) ); CREATE TABLE denied_peer_ip ( ip_range varchar(256) );
  54. 54. Create REST API Generate username and credential username= <USER NAME> + ":" + <timestamp> password = base64(hmac-sha1(secret, username))
  55. 55. { "username" : "user1:1393412082", "password" : "NGFmNzUzZDIxOWE1OWI0NTBmZGZiNg==", "ttl" : 86400, "uris" : [ "turn:1.2.3.4:3333?transport=udp" ] } var i, uri, iceServer, config = {"iceServers": []}; for (i = 0; i < response.uris.length; ++i) { uri = response.uris[i]; iceServer = { "username":response.username, "credential":response.password, "uri":uri }; config.iceServers.push(iceServer); } var pc = new PeerConnection(config);
  56. 56. Config 1. In turnserver.conf Uncomment/Enable 1. 2. 3. 4. lt-cred-mech use-auth-secret static-auth-secret mysql-userdb="host=127.0.0.1 dbname=turn user=root password= port=3306 connect_timeout=60" 5. realm=foobar 6. fingerprint 7. Start turn: turnserver -c /usr/local/etc/turnserver.conf
  57. 57. Create User & Secret Create Secret $ turnadmin --mysql-userdb="host=127.0.0.1 dbname=turn user=root password= connect_timeout=10" --set-secret=no1knows
  58. 58. >= 21 >= 20 >= 12
  59. 59. WebRTC4all…
  60. 60. Thank you Twitter: @amiteshawa
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×