The revolutionary WebRTCWhen Web and VoIP Meet

1

Giacomo Vacca gv@rtcsoft.net

I'm a developer of Real-Time Communications solutions, with particular emphasis on server-side, Linux-based applications.

RTCSoft, consulting and development

https://www.linkedin.com/in/giacomovacca

http://www.twitter.com/giavac

gv@rtcsoft.net

About me

2

WebRTC“WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs.” (from webrtc.org)

- Released in 2011 by Google- Initially developed by Google and Mozilla- Standardized by IETF and W3C

3

Classical VoIP- The “Trapezoid”:

Signalling vs Media- Security IS an option

- TLS & SRTP

- Client applications- Desk, desktop, mobile

- Interoperability- Standard vs Proprietary- No specific focus on web

4

The WebRTC Approach- The Client is in the browser

- Desktop- Mobile

- JavaScript APIs + HTML5- Peer-to-peer- No Plugins- High quality Audio/Video- Data channels- Security is mandatory

5

Services enabled by WebRTC- Web/Web audio/video calls (FB Messenger, Snapchat,

Whatsapp, Hangout)- Web video conferences (appear.in)- Web/VoIP/PSTN interaction (Skype for Web)- Web to call center (Amazon Mayday)- Team Collaboration (sneek.io, Slack)- Health care applications- ...

6

http://www.webrtc.org/architecture 7

Architecture

Main WebRTC APIs- getUserMedia: access mic, camera, screen

- RTCPeerConnection: p2p connections management, capability negotiation, etc

- RTCDataConnection: data transmission

A JS wrapper for different browsers: https://github.com/webrtc/samples/blob/master/src/js/adapter.js

http://w3c.github.io/webrtc-pc/8

Signaling: choose your ownNo mandatory signalling protocol

- SIP- XMPP- Invent one! (see the workshop)

9

SDP for the offer/answer mechanism(RFC 4566)

- Global settings- Audio/Video settings- ICE candidates

- Host- Server reflexive- Relayed

- DTLS info

10

(Very informative: https://webrtchacks.com/sdp-anatomy/)11

Punch a hole in that NAT!WebRTC goes to a great extent to find the best connectivity options.

- ICE (RFC 5245)- Trickle ICE

- STUN- TURN

- See https://code.google.com/p/coturn/

12

Codecs- Audio

- Opus* (HD, VBR, FEC)- G.711

- Video- VP8- H.264

* http://www.giacomovacca.com/2016/09/opus-negotiation-for-practical-man.html

13

Embedded Security- DTLS SRTP

- RFC 5764- Integrates key management on SRTP

- Ephemeral Authentication- Deals with client-side JS risks- Kamailio auth_ephemeral module

14

Multiparty architectures- Full Mesh- MCU- SFU- Simulcast

https://www.chriskranky.com/slack-video-technology/

Slack + Janus GW == video conferences15

WebRTC media servers

16

http://webrtcbydralex.com/index.php/2016/12/13/overview-of-webrtc-media-servers/

Interoperability (Web/SIP/PSTN)- Kamailio/opensips- FreeSWITCH (Verto)- Asterisk (Respoke)- Janus GW- Kurento- opentok

17

WebRTC readiness in April 2015http://iswebrtcreadyyet.com/

(20/4/2015)

18

WebRTC readiness, November 2016http://iswebrtcreadyyet.com/

(13/12/2016)

19

Browsers market share

https://www.w3counter.com/globalstats.php (11/2016)20

References & Nice To Read/Watch- https://bloggeek.me/

- "Real-Time Communication with WebRTC: Peer-To-Peer in the Browser", Loreto & Romano, http://www.amazon.com/gp/product/1449371876

- https://webrtcglossary.com/

- “WebRTC Update, Jan 2015”, https://youtu.be/iBNCAaVoks0

- http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

- https://hpbn.co/webrtc/

21

Q&Agv@rtcsoft.net

https://twitter.com/giavac

www.linkedin.com/in/giacomovacca

22

The WorkshopBuild a video-chat, in less than an hour and without wrappers

- Use Chome/FF- Keep a tab open on chrome://webrtc-internals/- Open Console (e.g. ‘Cmd Alt I’ on Mac)

- Run a web server- Local machine or any other VM will do

- Get workshop code on github- https://github.com/giavac/webrtc-workshop

23

Accessing local media- Static HTML with a video element- JS script to call getUserMedia()- Attach local stream to video when available

https://github.com/giavac/webrtc-workshop

cp website/index_getUserMedia.html website/index.html

24

Accessing local media - components

webserver/website/index_getUserMedia.html:

A div with a JS script, a button and a video element.

webserver/website/js/webrtc_workshop_getUserMedia.js:

Sets the callbacks and calls getUserMedia().

25

Access local media - getUserMedia() navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};

navigator.getUserMedia(constraints, successCallBack, errorCallBack);

function successCallBack(stream) {

var video = document.querySelector("video#myVideo");

window.stream = stream;

if (window.URL) {

// Convert stream into Blob URL, for Chrome

video.src = window.URL.createObjectURL(stream);

}

video.play();

}

26

Play with getUserMedia()1. Run the webserver2. Connect to the website3. Launch getUserMedia() and enjoy your local video

27

The video chatExchange session properties and create a video session.

https://github.com/giavac/webrtc-workshop

- cp website/index_videochat.html website/index.html- Edit webserver/website/js/webrtc_workshop_videochat.js

with websocket URL.

28

The web client structure- Static HTML with a local and a remote video element- JS script to call getUserMedia(), create an

RTCPeerConnection- Attach local stream to local video when available, then

remote stream to remote video element

29

Video chat - system architecture

30

Video chat - the Caller- Caller

- Access local media- Attach local stream to local video element- Create Offer- Collect ICE candidates- Send Offer SDP- Receive Answer SDP- Attach remote stream to remote video element

31

Video chat - The Callee- Callee

- Receive offer SDP- Access local media- Attach local stream to local video element- Create Answer- Collect ICE candidates- Send Answer SDP- Attach remote stream to remote video element

32

A rudimentary signalling protocol- { ‘command’: ‘register’, ‘user_id’: ‘alice’ }- { ‘command’: ‘call’, ‘callee’: ‘bob’, ‘caller’: ‘alice’,

‘SDP’: ‘v=0\n...’}- { ‘command’: ‘answer’, ‘caller’: ‘alice’, ‘SDP’:

‘v=0\n...’}

33

The caller accesses her media description & sends it to the callee34

The callee receives the caller’s session description & answers with his35

Let’s make the video chat work now1. Choose a name and register into the signaling server2. Enter a name to call and click on Call button3. Have a chat then hang up

The standard configuration has audio disabled for practical reasons during the workshop. How can we add audio?

36

Thanks!

37

The Revolutionary WebRTC