My presentation at Fosdem 2019 (Brussels - BE) about how to make a sip phone WebRTC using sipML5 and Janus Gateway.

1. sipML5 - Janus Gateway
Asterisk WebRTC frontier:
make client SIP Phone with
Alessandro Polidori
@ale_polidori
Fosdem 2019 - Brussels
Realtime DevRoom

2. Alessandro Polidori
Software Engineer @Nethesis
#Node.js #WebRTC #OpenSource
@ale_polidori
alepolidori
https://medium.com/@ale_polidori

3. ale_polidori
WebRTC: Web Real Time Communication
● 2011 Google project
● Javascript API for audio/video communications
● 3 Components
○ getUserMedia: camera, microphone, screen access
○ RTCPeerConnection: negotiation, encoding, decoding, nat traversal
○ RTCDataChannel: exchange data between browsers
● Other APIs: getStats, MediaRecorder

4. ale_polidori
Protocols
● 2 groups
○ RTP → transport
○ SIP → signaling
● SRTP
○ secure real-time transport protocol
○ encryption
○ message authentication
● SDP - audio & video description
● STUN, TURN, ICE

5. Architecture
VoIP
Provider
Company
network
Web App
Internet
NethVoice PBX (Asterisk)
VoIP Gateway
router
PSTN

6. ale_polidori
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, AV1
○ H.264

7. sipML5

8. ale_polidori
sipML5
● First Open Source HTML5 SIP Client (Doubango Telecom)
● 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
websocket
UDP/TCP/TLS
SRTP/SRTCP/ICE
HTML5 Client
PSTN
Sip Net
NethVoice PBX (Asterisk)

10. ale_polidori
sipML5: how to use
1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

11. ale_polidori
sipML5: how to use
1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

12. ale_polidori
sipML5: how to use
1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

13. ale_polidori
sipML5: how to use
1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

14. ...more code...

15. ale_polidori
sipML5: the library

16. ale_polidori
1. sipML5: engine initialization

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
2. sipML5: start SIP stack

22. ale_polidori
2. sipML5: start SIP stack

23. ale_polidori
3. sipML5: extension registration

24. ale_polidori
4. sipML5: call

25. Janus Gateway

26. ale_polidori
Janus
● Gateway general purpose by Meetecho
● WebRTC audio/video
● JSON messages
● Plugin Architecture → SIP Plugin
● Monitoring
● Interfaces HTTP, WebSocket, RabbitMQ

27. ale_polidori
server
Janus Architecture
janus.js
PBX (Asterisk)
HTTPS
Apache ProxyPass
UDP/TCP/TLS
HTML5 Client
PSTN
Sip Net

28. ale_polidori
Janus: how to use
1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

29. ale_polidori
Janus: how to use
1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

30. ale_polidori
Janus: how to use
1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

31. ale_polidori
Janus: how to use
1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

32. ...more code...

33. ale_polidori
Library
● WebRTC adapter
webrtc/adapter
● Janus Client lib
meetecho/janus-gateway

34. ale_polidori
1. Janus: engine initialization

35. ale_polidori
2. Janus: create a session

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

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

38. VoIP PBX

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

40. Demo

41. ale_polidori
Start your NethServer VoIP PBX1

42. ale_polidori
go to:
https://alepolidori.github.io/janus-webrtc-phone2

44. References
https://github.com/alepolidori/fosdem-2019
https://bloggeek.me

45. @ale_polidori
alepolidori
https://medium.com/@ale_polidori
Thank you !