How to use JsSIP to make audio calls over web?(1)

Nowadays there are lots of free applications in the market which service video and audio calls and instant messaging over the web.

In this article I want to name the framework for this purpose and explain the main concepts to stablish a call between one callee and caller. In the next article I will explain how to implement an application using JsSIP and React JS according to the concepts and frameworks that I will introduce them in this article.

Consider two participants, to establish a call these steps should be passed.(We guess that callee and caller has been registered).

1. Caller sends an invitation to the intended callee.
2. Callee accepts the session invitation.
3. The session will start between callee and caller.
4. Media types will transfer.There are different media types codecs which is different between audio and video media like below

For audio: Opus, G722, PCMA, PCMU For video: H264, VP8 Now let’s talk more about the protocols and frameworks we can use to create a client-side real-time application to establish a call.

SIP

A useful protocol for this purpose is SIP.

SIP (Session Initiation Protocol) is an application-layer-signaling protocol for creating, maintaining and terminating real-time sessions with one or more participants that include audio, video and instant messaging over applications. There are different frameworks we can use in client-side such as JsSIP, SIPJs, RTMP, … In this article, I talk about JsSIP.

JsSIP

JsSIP is a simple to use JavaScript library which leverages the latest developments in SIP and WebRTC to provide a fully-featured SIP endpoint in any website.

With JsSIP any website can get Real-Time Communications features using audio, video and more with just a few lines of code.Features are JsSIP:

• Runs in the browser and Node.js
• SIP over WebSocket (use real SIP in your web apps)
• Audio/video calls (WebRTC) and instant messaging
• Lightweight!
• 100% pure JavaScript built from the ground up
• Easy to use and powerful user API
• Works with OverSIP, Kamailio, Asterisk, OfficeSIP and more.

Main concepts of JsSIP to establish and debug a simple call are:

• Module JsSIP.debug
• Class JsSIP.UA
• Class JsSIP.OutgoingRequest
• Class JsSIP.IncomingRequest

Module JsSIP.debug

• To see the request and responses and to be able to debug in the browser and NodeJs, this module should be enabled at the first of rendering the application like this:

JsSIP.debug.enable('JsSIP:*');

For example, to register the user this logs will be shown in the browser.

JsSIP:UA — authorization_user: “webphone”

JsSIP:UA — password: NOT SHOWN

JsSIP:UA — realm: null

and more.

JsSip.UA:

JsSIP user agent is the core element in JsSIP. The SIP account will convert to SIP client. It has specific configuration parameters that referred in below:

var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com');
var configuration = {
  sockets  : [ socket ],
  uri      : 'sip:alice@example.com',
  password : 'superpassword'
};

User Agent Instance:

var coolPhone = new JsSIP.UA(configuration);

Class JsSIO.OutgoingRequest:

When the user sends a SIP request an instance of this class holds the request and it contains instance attributes and instance methods. Instance attributes are: method, Ruri, cseq, call_id, from, to, body For example, the log of JsSIP “register” method is like this:

REGISTER sip:admin SIP/2.0

Via: SIP/2.0/WSS 14uvneipfu5c.invalid;branch=z9hG4bK7848104

Max-Forwards: 69

To: <sip:alice@example>

From: <sip:alice@example>;tag=hg6smdrn0s

Call-ID: deg27nprfbo88i9hk8kue3

CSeq: 1 REGISTER

Contact: <sip:[la9bhq04@14uvneipfu5c.invalid](mailto:la9bhq04@14uvneipfu5c.invalid);transport=ws>;+sip.ice;reg-id=1;+sip.instance="<urn:uuid:1a2b003a-ca91-4482-86a1-7d601d1d2a0c>";expires=600

Class JsSIP.IncomingMessage:

This instance has it’s attributes and methods and holds the received SIP request or response. It’s distance attributes contains: Method, from, to, body the incoming response in browser console for the register method is like this:

REGISTER sip:admin SIP/2.0

To: <sip:alice@example>

From: <sip:alice@example>;tag=hg6smdrn0s

Contact: <sip:[la9bhq04@14uvneipfu5c.invalid](mailto:la9bhq04@14uvneipfu5c.invalid);transport=ws>;+sip.ice;reg-id=1;+sip.instance="<urn:uuid:1a2b003a-ca91-4482-86a1-7d601d1d2a0c>";expires=600

Now you know the main concepts of JsSIP to create an application to establish a call over the web. In the next article, I will tell more about JsSIP and related methods to make a call. Good luck! :)