Complete JsSIP.js Tutorial for Beginners

---

1️⃣ Understanding the Basics

What is JsSIP.js?

• JsSIP.js is a JavaScript SIP client library.
• It allows your browser to connect to a SIP server (like Asterisk) over WebSockets.
• Supports WebRTC audio and video calls directly in the browser.
• Handles SIP signaling: REGISTER, INVITE, ACK, BYE, etc.

---

Key Concepts

Term	Meaning
SIP	Session Initiation Protocol, manages call signaling.
UA (User Agent)	The SIP client (your browser) connecting to SIP server.
WebSocket (WS/WSS)	How browser communicates with SIP server.
MediaConstraints	Browser audio/video access.
RTCSession	Represents a call session (outgoing or incoming).

---

WebRTC Flow with JsSIP

1. Browser requests microphone access.
2. JsSIP creates a SIP INVITE via WebSocket to Asterisk.
3. Browser and Asterisk exchange SDP (audio parameters) via WebRTC.
4. Media (audio) streams go through Asterisk or directly (if peer-to-peer).
5. JsSIP handles call events: accepted, ended, failed.

---

2️⃣ Setup Your Environment

Requirements

• Asterisk with PJSIP and WebSocket support.
• Modern browser (Chrome, Firefox).
• Local LAN for testing (no ICE/STUN needed for LAN).

---

Basic Asterisk Configuration

http.conf:

[general]
enabled=yes
bindaddr=0.0.0.0
bindport=8088

pjsip.conf (WebRTC client):

[transport-ws]
type=transport
protocol=ws
bind=0.0.0.0
local_net=192.168.0.0/24

[webrtc-client]
type=aor
max_contacts=1

[webrtc-client]
type=auth
auth_type=userpass
username=webrtc-client
password=webrtcpass

[webrtc-client]
type=endpoint
aors=webrtc-client
auth=webrtc-client
context=from-internal
disallow=all
allow=opus,ulaw,alaw
direct_media=no
media_encryption=no
ice_support=no

extensions.conf:

[from-internal]
exten => 1000,1,Answer()
 same => n,Playback(hello-world)
 same => n,Hangup()

Reload Asterisk:

asterisk -rx "pjsip reload"
asterisk -rx "dialplan reload"

---

3️⃣ Start Coding With JsSIP

Step 1 – Include JsSIP Library

<script src="https://cdnjs.cloudflare.com/ajax/libs/jssip/3.11.0/jssip.min.js"></script>

---

Step 2 – Configure the User Agent

const socket = new JsSIP.WebSocketInterface('ws://192.168.0.10:8088/ws'); // Your Asterisk WS
const ua = new JsSIP.UA({
  sockets: [socket],
  uri: 'sip:webrtc-client@192.168.0.10',
  password: 'webrtcpass',
  session_timers: false
});

• uri: Your SIP account
• password: SIP password
• sockets: WebSocket connection to Asterisk
• session_timers: Disable SIP timers (optional)

---

Step 3 – Start the UA

ua.start();

• Connects your browser to the SIP server.
• Events you can listen to:

ua.on('connected', () => console.log('Connected to SIP server'));
ua.on('disconnected', () => console.log('Disconnected'));
ua.on('registered', () => console.log('Registered with SIP server'));
ua.on('registrationFailed', (e) => console.log('Registration failed:', e.cause));

---

Step 4 – Make an Outgoing Call

let session = ua.call('sip:1000@192.168.0.10', {
  mediaConstraints: { audio: true, video: false },
  rtcOfferConstraints: { offerToReceiveAudio: 1 }
});

session.connection.addEventListener('track', (e) => {
  document.getElementById('remoteAudio').srcObject = e.streams[0];
});

session.on('ended', () => console.log('Call ended'));
session.on('failed', (e) => console.log('Call failed', e.cause));

---

Step 5 – Handle Incoming Calls

ua.on('newRTCSession', (e) => {
  const session = e.session;
  if (e.originator === 'remote') {
    session.answer({ mediaConstraints: { audio: true, video: false } });
    session.connection.addEventListener('track', (event) => {
      document.getElementById('remoteAudio').srcObject = event.streams[0];
    });
  }
});

---

Step 6 – Hang Up a Call

if(session) session.terminate();

---

4️⃣ Full HTML Example

<audio id="remoteAudio" autoplay></audio>
<button id="callBtn">Call 1000</button>
<button id="hangupBtn">Hang Up</button>

<script>
// Include JsSIP code here (from Steps 2-6)
</script>

• Clicking Call 1000 starts an outgoing call.
• Clicking Hang Up ends the call.
• Incoming calls auto-answer and play audio.

---

5️⃣ Tips for Beginners

1. Always request microphone access:

await navigator.mediaDevices.getUserMedia({ audio: true });

2. Use direct_media=no in Asterisk to prevent one-way audio.
3. Use media_encryption=no for WS on LAN.
4. Listen to UA events (connected, registered, newRTCSession) to debug.
5. Use the browser console for errors.

---

6️⃣ Next Steps to Learn

• Add video calls: set video: true in mediaConstraints.
• Show call status in UI: ringing, connected, ended.
• Handle multiple calls with an array of sessions.
• Add mute/unmute, hold, and transfer features.
• Learn SIP signaling: INVITE, ACK, BYE, REGISTER.

---

✅ Following this guide, a beginner can understand JsSIP workflow, write code, and connect to Asterisk for WebRTC calls.