JSSIP Webrtc React Frmework Client

Webrtc SIP over Websoket Communicates to Kamailio SIP websocket Server React framework (jsx)

Install dependencies:

get all node modules

$ npm install

Globally install the NPM gulp-cli package:

$ npm install -g gulp-cli

Build JSSIP Lib

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Cloen jssip repo

> gulp tasks
 Tasks for ~/JsSIP/gulpfile.js
  lint
  babel
  browserify
  uglify
  test
  grammar
  devel
   <series>
     grammar
  dist
   <series>
     lint
     babel
     test
     browserify
     uglify
  default
    <series>
      dist
        <series>
          lint
          babel
          test
          browserify
          uglify

Change settings inside index.html

window.SETTINGS =
{
	display_name        : null,
	uri                 : null,
	password            : null,
	socket              :
	{
		uri           : 'wss://<kamailio_ip>:443',
		via_transport : 'auto',
	},
	registrar_server    : null,
	contact_uri         : null,
	authorization_user  : null,
	instance_id         : null,
	session_timers      : true,
	use_preloaded_route : false,
	pcConfig            :
	{
		rtcpMuxPolicy : 'negotiate',
		iceServers    :
		[
			{ urls : [ 'stun:stun.l.google.com:19302' ] }
		]
	},
	callstats           :
	{
		enabled   : false,
		AppID     : null,
		AppSecret : null
	}
};

Run Gulp develop

Once built, the out/ directory is created with all the HTML, CSS and JavaScript files to be deployed in your own server. Note : Everything inside out fodler is autogenerated from gulp , do not change that dircetly

All gulp scripts included

gulp prod - production/minified mode.
gulp dev - development mode.
gulp live - development mode, opens the local website and watches for changes in the source code.

gulp --tasks
 Tasks for ~/jssipwebrtc/gulpfile.js
  clean
  env:dev
  env:prod
  lint
  css
  html
  resources
  sounds
  bundle
  bundle:watch
  openbrowser
  watch
  prod
   <series>
     env:prod
     clean
     lint
     bundle
     html
     css
     resources
  dev
   <series>
     env:dev
     clean
     lint
     bundle
     html
     css
     resources
  live
   <series>
     env:dev
     clean
     lint
     bundle:watch
     html
     css
     resources
     watch
     openbrowser
  default
    <series>
      prod
        <series>
          env:prod
          clean
          lint
          bundle
          html
          css
          resources

> gulp live
[Browsersync] Access URLs:
 ---------------------------------------
       Local: https://localhost:3000
    External: https://172.16.19.168:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[Browsersync] Serving files from: out

Browser

https://localhost:3000/

Monitor

Websockst - chrome Developer tools -> Network -> WS Callstats.io -

Hardcoded settings

The app allows entering settings via an HTTP form in the Login section. However, the developer can hardcode some specific settings (for example the callstats.io settings) by defining a window.SETTINGS variable before the tryit-jssip.js is loaded.