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

Lennart Grahl <lennart.grahl@gmail.com> 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

WebRTC - Use CasesAudio/Video chat

Screen sharing

Direct file sharing

Game multiplayer communication

Examples: Skype for Web, Threema Web

WebRTC - Protocol Stack

Transport (UDP)

ICE, STUN, TURN

Session (DTLS)

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.

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

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

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

Various RFCs and drafts: 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.

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

Look at the SaltyRTC Demo Code for further hints.Lennart Grahl <lennart.grahl@gmail.com> 28

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 :

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

webrtc reborn - cloud expo / webrtc summit

deliverabled2.1 next generation techno-social legal...

webrtc educonf

towards the application of webrtc peer-to-peer to scale live...

peer-to-server media in webrtc (enterprise connect 2014)

webrtc getstats - webrtc meetup tokyo 5 lt

towards the application of webrtc peer-to-peer to scale...

tadsummit comverse webrtc, webrtc is for telcos too. today!

lisboa webrtc - may 21, 2015 - intro to webrtc

webrtc ims systems and webrtc proprietary islands...webrtc...

kranky geek webrtc 2015 - what's next for webrtc?

kranky geek webrtc show: webrtc in the real world

webrtc & ortc

profit from the webrtc revolutionprofit from the webrtc...

webrtc expo | is your business ready for webrtc?

webrtc demystified

webrtc business use cases | webrtc conference & expo iii

expanding webrtc beyond traditional peer-to-peer voice and...

upperside webrtc conference - webrtc intro

webrtc presentation