webrtc - overvie · webrtc - overview real-time communication in the browser peer-to-peer...

Lennart Grahl <[email protected]> 1

WebRTC - OverviewReal-Time Communication in the browser

Peer-to-Peer connection (even in NATed environments)

Web API specified by W3C

Protocols specified by IETF


https://w3c.github.io/webrtc-pc/

https://datatracker.ietf.org/wg/rtcweb/documents/

WebRTC - Use CasesAudio/Video chat

Screen sharing

Direct file sharing

Game multiplayer communication

Examples: Skype for Web, Threema Web


https://web.skype.com/

https://web-beta.threema.ch/#/welcome

WebRTC - Protocol Stack

SRTP

Transport (UDP)

ICE, STUN, TURN

Session (DTLS)

SCTP

Data ChannelMedia Streams

Network (IP)


WebRTC - How It Works

Peer A Peer B

SignallingSignalling

NAT NATData

TURN ServerData Data



Peer A Peer B

OfferOffer

NAT NATData




Peer A Peer B

AnswerAnswer

NAT NATData




Peer A Peer B

CandidatesCandidates

NAT NATData




Peer A Peer B


NAT NATData



WebRTC - Web API

dictionary RTCConfiguration sequence<RTCIceServer> iceServers; ...;

dictionary RTCIceServer (String or sequence<String>) urls; String username; String credential; RTCIceCredentialType credentialType = "password";;

const configuration = iceServers: [ 'urls': ['stun:stun.services.mozilla.com'] ];


WebRTC - Web API

[Constructor(optional RTCConfiguration configuration)]interface RTCPeerConnection Promise<RTCSessionDescriptionInit> createOffer(...); Promise<RTCSessionDescriptionInit> createAnswer(...); Promise<void> setLocalDescription(RTCSessionDescriptionInit description); RTCSessionDescription? localDescription; Promise<void> setRemoteDescription(RTCSessionDescriptionInit description); RTCSessionDescription? remoteDescription; Promise<void> addIceCandidate((RTCIceCandidateInit or RTCIceCandidate)? candidate) EventHandler onnegotiationneeded; EventHandler onicecandidate; EventHandler onicecandidateerror; EventHandler onsignalingstatechange; EventHandler oniceconnectionstatechange; EventHandler onicegatheringstatechange; EventHandler onconnectionstatechange;;


WebRTC - Web API - Offer

let role = '...';let pc = new RTCPeerConnection(configuration);

// Send offerpc.onnegotiationneeded = (event) => if (role == 'initiator (A)') pc.createOffer() .then((description) => console.log('Setting local description:', description); return pc.setLocalDescription(description); ) .then(() => console.log('Local description set, sending offer'); signalling.sendOffer(pc.localDescription); ) .catch((error) => console.error('Error on creating offer:', error); ); ;


WebRTC - Web API - Offer

Peer A Peer B

OfferOffer

NAT NATData



WebRTC - Web API - Answer

// Handle offer and send answersignalling.handleOffer = (description) => if (role == 'responder (B)') pc.setRemoteDescription(description) .then(() => console.log('Remote description set, creating answer'); return pc.createAnswer(); ) .then((description) => console.log('Setting local description:', description); return pc.setLocalDescription(description); ) .then(() => console.log('Local description set, sending answer'); signalling.sendAnswer(pc.localDescription); ) .catch((error) => console.error('Error on creating answer:', error); ); ;



Peer A Peer B

AnswerAnswer

NAT NATData




// Handle answersignalling.handleAnswer = (description) => if (role == 'initiator (A)') pc.setRemoteDescription(description) .then(() => console.log('Remote description set'); ) .catch((error) => console.error('Error on setting remote description:', error); ); ;


WebRTC - Web API - Candidates

// Handle local ICE candidatespc.onicecandidate = (event) => console.debug('Sending local ICE candidate:', event.candidate); signalling.sendCandidate(event.candidate);;

// Handle remote ICE candidatessignalling.onCandidate = (candidate) => pc.addIceCandidate(candidate) .then(() => console.log('Remote candidate set:', candidate); ) .catch((error) => console.error('Error on setting remote candidate:', error); );;


WebRTC - Web API - Candidates

Peer A Peer B

CandidatesCandidates

NAT NATData



WebRTC - Web API - P2P Connection

Peer A Peer B


NAT NATData



WebRTC - Web API - Audio/Video

partial interface RTCPeerConnection RTCRtpSender addTrack(MediaStreamTrack track, MediaStream... streams); void removeTrack(RTCRtpSender sender); EventHandler ontrack; ...;

MediaStream and MediaStreamTrack are part of the W3C Media Capture and Streams API.


https://www.w3.org/TR/mediacapture-streams/

WebRTC - Web API - Audio/Video

// Add local audio and video tracksnavigator.mediaDevices.getUserMedia( audio: true, video: true ).then((stream) => pc.addTrack(stream.getAudioTracks()[0], stream); pc.addTrack(stream.getVideoTracks()[0], stream);).catch((error) => console.error('Error on adding media stream:', error););

// Set local audio and video trackslet videoElement = document.querySelector('video');pc.ontrack = (event) => videoElement.srcObject = event.streams[0];;


WebRTC - Web API - Data Channels

partial interface RTCPeerConnection RTCDataChannel createDataChannel( String? label, RTCDataChannelInit? dataChannelOptions ); EventHandler ondatachannel;;

dictionary RTCDataChannelInit boolean ordered = true; uint16? maxPacketLifeTime; uint16? maxRetransmits; String protocol = ""; boolean negotiated = false; uint16? id;;


WebRTC - Web API - Data Channels

let dc = pc.createDataChannel('todosync', ordered: true, protocol: 'v1.todosync.zwuenf.org', negotiated: true, id: 1;


WebRTC - SignallingDeliberately not specified

Offer, Answer and Candidates need to be transmitted to the other peer

We'll use SaltyRTC


http://saltyrtc.org/

SaltyRTCAn end-to-end encrypted signalling protocol.

class YourClient extends SimpleSaltyRTCClient constructor() super(); this.initiatorPrivateKey = '...'; this.responderPrivateKey = '...';

initWebRTC(role) // Role is either 'initiator' or 'responder' // You must return the peer connection instance //return this.pc;

handleOffer(description)

handleAnswer(description)

handleCandidate(candidate)


Demo1. https://webrtc.github.io/samples/

2. https://github.com/saltyrtc/saltyrtc-demo


https://webrtc.github.io/samples/

https://github.com/saltyrtc/saltyrtc-demo

ReferencesWebRTC 1.0 API: https://www.w3.org/TR/webrtc/

Various RFCs and drafts: https://datatracker.ietf.org/wg/rtcweb/documents/


https://www.w3.org/TR/webrtc/

https://datatracker.ietf.org/wg/rtcweb/documents/

Task1. Download the necessary files.

2. Generate two SaltyRTC key pairs you will use for your clients:

u8aToHex(nacl.box.keyPair().secretKey);

3. Use the SaltyRTC Signalling Protocol by extending the SimpleSaltyRTCClient toestablish a WebRTC P2P connection to another browser instance.

4. Create a reliable WebRTC Data Channel and use it to send data to the other peer.

5. (Optional) Synchronise To Do items of either the AngularJS or the EmberJS projectsbetween two peers.

Hints

Use stun.services.mozilla.com in the STUN server configuration of WebRTC.

Look at the SaltyRTC Demo Code for further hints.Lennart Grahl <[email protected]> 28

https://vcs.zwuenf.org/droelf/lgrahl-web-2.0/raw/master/saltyrtc-peer.zip

https://github.com/saltyrtc/saltyrtc-client-js

https://github.com/saltyrtc/saltyrtc-demo

Usage in EmberJS1. Copy dependencies.js into vendor directory.

2. Add the following to emberclibuild.js :

app.import('vendor/dependencies.js');

3. Create an instance of your client in an EmberJS adapter.


Usage in Angular1. Copy dependencies.js into project directory.

2. Create a new file peer.js and extend SimpleSaltyRTCClient .

3. Add the following to index.html :

<script src="dependencies.js"></script> <script src="peer.js"></script>

4. Create an instance of your client in an Angular service.


webrtc - overvie · webrtc - overview real-time communication in the browser peer-to-peer...

Documents