This document discusses integrating WebRTC phone capabilities into a browser using sipML5 and Janus. sipML5 is an open-source HTML5 SIP client that uses WebRTC for audio and video calls without plugins. Janus is a general purpose WebRTC gateway that can be used with a SIP plugin to enable calls. The document outlines how sipML5 uses WebRTC protocols for signaling and media, and provides code examples for initialization and calls. It then explains how Janus acts as a gateway between a browser-based client and a PBX, and provides similar code examples. Overall, the document proposes using sipML5 for a browser phone with Janus as a gateway to enable calls to a NethServer VoIP PBX.

1. WebRTC Phone into your browser
from sipML5 to Janus
@ale_polidori
...
Alessandro Polidori

2. ale_polidori
SIP Phone into the Browser
Asterisk WebRTC

3. ale_polidori
Why ?
● Nethesis - Italian Open Source since 2003
● NethVoice Enterprise PBX
● NethCTI - Web Application
○ WebRTC SIP Phone
○ Conferencing, Presence
○ Customer Cards, Instant Messaging
○ Video sources, ...

4. ale_polidori
WebRTC: Web Real Time Communication
● 2011 Google project
● Javascript API for audio/video communications
● Native browser support
● Real-Time p2p communication
● 3 Components
○ getUserMedia: camera, microphone and screen access
○ RTCPeerConnection: negotiation, encoding, decoding, nat traversal
○ RTCDataChannel: exchange data between browsers

5. ale_polidori
Protocols
● 2 protocol groups
○ transport - RTP
○ signaling - SIP (Session Initiation Protocol)
● RTP - SRTP (Secure Real-time Transport Protocol)
○ secure real-time transport protocol
○ encryption
○ message authentication
● SDP - audio & video description
● STUN, TURN, ICE

6. ale_polidori
Scheme
NethVoice PBX
Asterisk
VoIP gateway
PSTN
router
Internet
VoIP
Provider
Company
network
Web App

7. ale_polidori
sipML5

8. ale_polidori
sipML5
● First Open Source HTML5 SIP Client (Doubango Telecom 2012)
● 100% Javascript: NO PLUGIN !!!
● Media stack on WebRTC
● SIP over WebSocket (UDP, TCP, TLS)
● Audio / Video Calls / Instant Messaging / Screen share
● Desktop & Mobile
● Google I/O 2012

9. ale_polidori
sipML5: architecture
Javascript SIP
Javascript SDP
WebRTC
NethVoice PBX
Asterisk
HTML5 Client
websocket
PSTN
SIP Net
UDP/TCP/TLS
SRTP/SRTCP/ICE

10. ale_polidori
sipML5: CoDec
● Reduction / Compression / Decompression of data flow
● Bandwidth / Quality (MOS) / Latency
● Audio
○ G.711 (64 kbps)
○ Opus (6-510 kbps - dynamic bitrate)
● Video
○ VP8, VP9
○ H.264

11. ale_polidori
sipML5: some code
1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call
S I P m l global object
SIPml.init
new SIPml.Stack
newSession(‘register’..
newSession(‘call-audio’..

12. ale_polidori
sipML5: library

13. ale_polidori
1. sipML5: engine initialization

14. ale_polidori
2. sipML5: start SIP stack

15. ale_polidori
2. sipML5: start SIP stack

16. ale_polidori
2. sipML5: start SIP stack

17. ale_polidori
2. sipML5: start SIP stack

18. ale_polidori
2. sipML5: start SIP stack

19. ale_polidori
2. sipML5: start SIP stack

20. ale_polidori
2. sipML5: start SIP stack

21. ale_polidori
3. sipML5: extension registration

22. ale_polidori
4. sipML5: call

23. ale_polidori
VoIP PBX

24. ale_polidori
NethServer VoIP PBX
● NethServer Linux distro
● Asterisk & FreePBX based
● Open Source - community.nethserver.org
● NethVoice Enterprise version
● NethCTI WebApp

25. ale_polidori
Vagrant
$ git clone https://github.com/alepolidori/vagrant-files.git
$ cd vagrant-files/nethserver-freepbx-14.0.3.6
$ vagrant up

26. ale_polidori

27. ale_polidori
Janus Gateway

28. ale_polidori
Janus
● Gateway general purpose by Meetecho
● WebRTC audio/video
● JSON message exchange
● Plugin Architecture → SIP Plugin
● Usable even on poor devices
● Monitoring
● Interfaces: HTTP, WebSocket, RabbitMQ

29. ale_polidori
HTML5 Client
server
Janus: architecture
janus.js
PBX (Asterisk)
HTTPS
PSTN
SIP Net
Apache ProxyPass
UDP/TCP/TLS

30. ale_polidori
Janus: some code
1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call
J a n u s global object
Janus.init
new Janus({...});
Janus.attach({...});
pluginHandle.createOffer

31. ale_polidori
Janus: library
● WebRTC adapter
webrtc/adapter
● Janus Client lib
meetecho/janus-gateway

32. ale_polidori
1. Janus: engine initialization

33. ale_polidori
2. Janus: create a session

34. ale_polidori
3. Janus: link SIP plugin
Handle to interact with plugin

35. ale_polidori
4. Janus: audio/video call
Call destination

36. ale_polidori
5. Janus: call answer
Accept the incoming call

37. ale_polidori
Demo

38. ale_polidori
start your NS VoIP PBX...
$ git clone https://github.com/alepolidori/vagrant-files.git
$ cd vagrant-files/nethserver-freepbx-14.0.3.6
$ vagrant up
1

39. ale_polidori
https://alepolidori.github.io/janus-webrtc-phone
2
https://github.com/alepolidori/janus-webrtc-phone

40. ale_polidori
Technical choices
● sipML5
○ bleeding edge
○ github
○ community
○ new functions
● Janus
○ communication with Apache webserver
○ technical support (meetecho)
○ same configuration for all extensions
○ cross-browser
○ monitoring

41. ale_polidori

42. ale_polidori
References
● Astricon 2018: https://github.com/alepolidori/astricon-2018
● WebRTC Phone Demo
○ https://alepolidori.github.com/janus-webrtc-phone
● sipML5
○ https://groups.google.com/forum/#!forum/doubango
○ https://github.com/DoubangoTelecom/sipml5
● Janus Gateway
○ https://groups.google.com/forum/#!forum/meetecho-janus
○ https://github.com/NethServer/janus-gateway
● NethCTI 3 demo: http://bit.do/nethcti3
● NethServer VoIP PBX: http://bit.do/nethserver-voip-pbx

43. @ale_polidori
alepolidori
Thank you !
medium.com/@ale_polidori