When VoIP meets WebThe Revolution of WebRTC

1

Giacomo Vacca, gv@rtcsoft.net

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

Founder of rtcsoft.net, consulting and development services.

https://www.linkedin.com/in/giacomovaccahttp://www.twitter.com/giavac

About me

2

Popular VoIP apps

- Viber- Skype- Google Hangouts- Truphone- Libon

3

Classical VoIP

- The “Trapezoid”: Signalling vs Media- Security IS an option

- TLS & SRTP- Client applications

- Desk, desktop, mobile- Interoperability- Standard vs Proprietary

4

Recent announcements

Whatsapp (800M users) launching ‘calls for Android’(PJSIP)

“An inspection of the binary using the strings tool shows both PJSIP and several strings hinting at the use of elements from the webrtc.org voice engine such as the acoustic echo cancellation (AEC), AECM, gain control (AGC), noise suppression and the high-pass filter.”http://www.theverge.com/2015/3/31/8318821/whatsapp-voice-calls-android-ioshttps://webrtchacks.com/whats-up-with-whatsapp-and-webrtc/

5

The WebRTC Approach

- The Client is in the browser*- P2P- No Plugins- Audio/Video/Data- Security

* Nov 2014: 400M users on Chrome mobilehttp://venturebeat.com/2014/11/19/googles-chrome-browser-hits-400m-monthly-active-users-on-mobile-up-from-300m-in-june/

6

http://www.webrtc.org/architecture7

WebRTC APIs

- getUserMedia: access to mic & camera- RTCPeerConnection: media transport- DataChannel: data transmission

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

8

Signalling: choose your own

No mandatory signalling protocol

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

9

The Mythological SDP

- Global- Audio/Video- ICE candidates- DTLS

10

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

Punch a hole in that NAT!

- STUN- ICE (RFC 5245)

- Trickle ICE- TURN

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

12

Codecs

- Audio- Opus (VBR, FEC)- G.711

- Video- VP8- H.264

13

Embedded Security

- DTLS SRTP- RFC 5764- Integrates key management on SRTP

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

14

The tricky part: Multiparty

- Full Mesh- SFU (e.g. Jitsi* VideoBridge)- Simulcast- Media mixers (openMCU)

* recently acquired by Atlassian, http://blogs.atlassian.com/2015/04/atlassian-acquires-blue-jimp-jitsi-org/

15

Interoperability (Web/SIP/PSTN)

- FreeSWITCH- Asterisk (Respoke)- Janus GW- Kurento- opentok

16

A long way to gohttp://iswebrtcreadyyet.com/(20/4/2015)

17

Open Source Components

- node.js- Kamailio- FreeSWITCH- Asterisk (+ Respoke)- JsSIP (& SIPjs)- coturn

18

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- “WebRTC for Business People”, T. Levent-Levi,

http://www.amazon.co.uk/WebRTC-Business-People-Unraveling-opportunities-ebook/dp/B00PKLJOA6

- “WebRTC Update, Jan 2015”, https://youtu.be/iBNCAaVoks0- http://rtcbits.blogspot.fr/2014/09/using-native-webrtc-simulcast-support.

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

19

Q&A

gv@rtcsoft.nethttps://twitter.com/giavacwww.linkedin.com/in/giacomovacca

20

The Workshop

Building a videochat client in less than an hour…

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

- Run a webserver- Local machine or any other VM will do

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

21

Level 1 - Access local media

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

22

Grab 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");

window.stream = stream;

if (window.URL) {

// Convert stream into Blob URL, for Chrome

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

}

video.play();

} 23

Level 2

Send & receive video!

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

Feel free to fork & share

24

Workshop - architecture

25

Videochat - the Caller

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

26

Videochat - The Callee

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

27

Videochat - signalling server

WebSocket server available at:ws://xxx.xxx.xxx.xxx:xxxx(Unsecure ws to simplify set up)

Use responsibly during the workshop!

28

Videochat - A rudimentary protocol

- { ‘command’: ‘register’, ‘user_id’: ‘alice’ }- { ‘command’: ‘call’, ‘callee’: ‘bob’, ‘caller’:

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

‘v=0\n...’}

29

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

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

Thanks!

32

When VoIP meets Web