when voip meets web - the revolution of webrtc
TRANSCRIPT
![Page 2: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/2.jpg)
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
![Page 3: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/3.jpg)
Popular VoIP apps
- Viber- Skype- Google Hangouts- Truphone- Libon
3
![Page 4: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/4.jpg)
Classical VoIP
- The “Trapezoid”: Signalling vs Media- Security IS an option
- TLS & SRTP- Client applications
- Desk, desktop, mobile- Interoperability- Standard vs Proprietary
4
![Page 5: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/5.jpg)
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
![Page 6: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/6.jpg)
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
![Page 7: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/7.jpg)
http://www.webrtc.org/architecture7
![Page 8: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/8.jpg)
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
![Page 9: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/9.jpg)
Signalling: choose your own
No mandatory signalling protocol
- SIP- XMPP- Invent one! (see the workshop)
9
![Page 10: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/10.jpg)
The Mythological SDP
- Global- Audio/Video- ICE candidates- DTLS
10
![Page 12: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/12.jpg)
Punch a hole in that NAT!
- STUN- ICE (RFC 5245)
- Trickle ICE- TURN
- See https://code.google.com/p/coturn/
12
![Page 13: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/13.jpg)
Codecs
- Audio- Opus (VBR, FEC)- G.711
- Video- VP8- H.264
13
![Page 14: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/14.jpg)
Embedded Security
- DTLS SRTP- RFC 5764- Integrates key management on SRTP
- Ephemeral Authentication- Deal with client-side JS risks- Kamailio auth_ephemeral module
14
![Page 15: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/15.jpg)
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
![Page 16: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/16.jpg)
Interoperability (Web/SIP/PSTN)
- FreeSWITCH- Asterisk (Respoke)- Janus GW- Kurento- opentok
16
![Page 17: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/17.jpg)
A long way to gohttp://iswebrtcreadyyet.com/(20/4/2015)
17
![Page 18: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/18.jpg)
Open Source Components
- node.js- Kamailio- FreeSWITCH- Asterisk (+ Respoke)- JsSIP (& SIPjs)- coturn
18
![Page 19: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/19.jpg)
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
![Page 21: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/21.jpg)
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
![Page 22: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/22.jpg)
Level 1 - Access local media
- Static HTML with a video element- JS script to call getUserMedia()- Attach local stream to video when available
22
![Page 23: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/23.jpg)
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
![Page 24: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/24.jpg)
Level 2
Send & receive video!
Reference code: https://github.com/giavac/webrtc-workshop
Feel free to fork & share
24
![Page 25: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/25.jpg)
Workshop - architecture
25
![Page 26: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/26.jpg)
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
![Page 27: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/27.jpg)
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
![Page 28: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/28.jpg)
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
![Page 29: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/29.jpg)
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
![Page 30: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/30.jpg)
The caller accesses her media description & sends it to the callee30
![Page 31: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/31.jpg)
The callee receives the caller’s session description & answers with his31
![Page 32: When VoIP meets Web - The revolution of WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a940d41a28ab0b5d8b45f5/html5/thumbnails/32.jpg)
Thanks!
32
When VoIP meets Web