Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus - - PowerPoint PPT Presentation

▶
asterisk webrtc frontier make client sip phone with
SMART_READER_LITE
LIVE PREVIEW

Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus - - PowerPoint PPT Presentation

Nov 01, 2023 198 likes •667 views

Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus Gateway Alessandro Polidori Fosdem 2019 - Brussels @ale_polidori Realtime DevRoom Alessandro Polidori Software Engineer @Nethesis #Node.js #WebRTC #OpenSource alepolidori

slide-1
SLIDE 1

sipML5 - Janus Gateway

Asterisk WebRTC frontier: make client SIP Phone with

Alessandro Polidori @ale_polidori

Fosdem 2019 - Brussels Realtime DevRoom

slide-2
SLIDE 2

Alessandro Polidori

Software Engineer @Nethesis #Node.js #WebRTC #OpenSource

@ale_polidori alepolidori https://medium.com/@ale_polidori

slide-3
SLIDE 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
slide-4
SLIDE 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
slide-5
SLIDE 5

Architecture

VoIP Provider

Company network

Web App

Internet NethVoice PBX (Asterisk) VoIP Gateway router PSTN

slide-6
SLIDE 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

slide-7
SLIDE 7

sipML5

slide-8
SLIDE 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
slide-9
SLIDE 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)

slide-10
SLIDE 10

ale_polidori

sipML5: how to use

1. Engine initialization 2. Start SIP Stack 3. Extension registration 4. Start Audio/Video call

slide-11
SLIDE 11

ale_polidori

sipML5: how to use

1. Engine initialization 2. Start SIP Stack 3. Extension registration 4. Start Audio/Video call

slide-12
SLIDE 12

ale_polidori

sipML5: how to use

1. Engine initialization 2. Start SIP Stack 3. Extension registration 4. Start Audio/Video call

slide-13
SLIDE 13

ale_polidori

sipML5: how to use

1. Engine initialization 2. Start SIP Stack 3. Extension registration 4. Start Audio/Video call

slide-14
SLIDE 14

...more code...

slide-15
SLIDE 15

ale_polidori

sipML5: the library

slide-16
SLIDE 16

ale_polidori

  • 1. sipML5: engine initialization
slide-17
SLIDE 17

ale_polidori

  • 2. sipML5: start SIP stack
slide-18
SLIDE 18

ale_polidori

  • 2. sipML5: start SIP stack
slide-19
SLIDE 19

ale_polidori

  • 2. sipML5: start SIP stack
slide-20
SLIDE 20

ale_polidori

  • 2. sipML5: start SIP stack
slide-21
SLIDE 21

ale_polidori

  • 2. sipML5: start SIP stack
slide-22
SLIDE 22

ale_polidori

  • 2. sipML5: start SIP stack
slide-23
SLIDE 23

ale_polidori

  • 3. sipML5: extension registration
slide-24
SLIDE 24

ale_polidori

  • 4. sipML5: call
slide-25
SLIDE 25

Janus Gateway

slide-26
SLIDE 26

ale_polidori

Janus

  • Gateway general purpose by Meetecho
  • WebRTC audio/video
  • JSON messages
  • Plugin Architecture → SIP Plugin
  • Monitoring
  • Interfaces HTTP, WebSocket, RabbitMQ
slide-27
SLIDE 27

ale_polidori

server

Janus Architecture

janus.js

PBX (Asterisk)

HTTPS Apache ProxyPass UDP/TCP/TLS

HTML5 Client

PSTN Sip Net

slide-28
SLIDE 28

ale_polidori

Janus: how to use

1. Engine initialization 2. Create a session 3. Link SIP plugin 4. Start Audio/Video call

slide-29
SLIDE 29

ale_polidori

Janus: how to use

1. Engine initialization 2. Create a session 3. Link SIP plugin 4. Start Audio/Video call

slide-30
SLIDE 30

ale_polidori

Janus: how to use

1. Engine initialization 2. Create a session 3. Link SIP plugin 4. Start Audio/Video call

slide-31
SLIDE 31

ale_polidori

Janus: how to use

1. Engine initialization 2. Create a session 3. Link SIP plugin 4. Start Audio/Video call

slide-32
SLIDE 32

...more code...

slide-33
SLIDE 33

ale_polidori

Library

  • WebRTC adapter

webrtc/adapter

  • Janus Client lib

meetecho/janus-gateway

slide-34
SLIDE 34

ale_polidori

  • 1. Janus: engine initialization
slide-35
SLIDE 35

ale_polidori

  • 2. Janus: create a session
slide-36
SLIDE 36

ale_polidori

  • 3. Janus: link SIP plugin

Handle to interact with plugin

slide-37
SLIDE 37

ale_polidori

  • 4. Janus: audio/video call

Call destination

slide-38
SLIDE 38

VoIP PBX

slide-39
SLIDE 39

ale_polidori

NethServer VoIP PBX

  • NethServer Linux distro
  • Asterisk & FreePBX based
  • Open Source - community.nethserver.org
  • NethVoice Enterprise version
  • NethCTI WebApp
slide-40
SLIDE 40

Demo

slide-41
SLIDE 41

ale_polidori

Start your NethServer VoIP PBX

1

slide-42
SLIDE 42

ale_polidori

go to:

https://alepolidori.github.io/janus-webrtc-phone

2

slide-43
SLIDE 43
slide-44
SLIDE 44

References

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

slide-45
SLIDE 45

@ale_polidori alepolidori https://medium.com/@ale_polidori

Thank you !