Skip to main content

Implementing Client Side WebRTC using Sipml5 javascript


Step 1:

Download and require Sipml5 library function.

Step 2:

Initialize sipml5 Engine in your web page :

var readyCallback = function(e) {
  // function called when sipml is successfully initialised.
  createSipStack(); // calling this function to create sip stack(see below)
};

var errorCallback = function(e) {
  // function called when error occured during sipml initialisation.
};

SIPml.init(readyCallback, errorCallback);

Step 3:

Create Sip Stack :-
Sip Stack is an object that must be created before making/receiving call and sms. Creating Sip stack is an asynchronous process, so you need to create an event listener function to get state change notification.

var sipStack;

function EventListener(e) {

  /*
  * e.type ;type of event listener
  * e.session ; current event session
  * e.getSipResponseCode() ; event response code
  * e.description ; event description
  */

  if(e.type == 'started'){
     // successfully started the stack.
     register();
  } else if(e.type == 'i_new_call'){
     // when new incoming call comes.
        // incoming call Id ; e.newSession.getRemoteFriendlyName()

     if(callSession || incomingCallSession) {

        e.newSession.hangup(); // hanging up new call when caller is in another outgoing call.

     } else {

        e.newSession.getRemoteFriendlyName();
        incomingCallSession = e.newSession;
        incomingCallSession.setConfiguration({
                          audio_remote: document.getElementById('audio-remote'),
                          video_remote:document.getElementById('video-remote'),
                          video_local:document.getElementById('audio-remote'),
                          events_listener: { events: '*', listener: EventListener }
                    });
        acceptCall(); // accepts call

     }
  } else if(e.type == 'connecting') {

        if(e.session == registerSession) {
           // registering session.
        } else if(e.session == callSession) {
           // connecting outgoing call.
        } else if(e.session == incomingCallSession) {
           // connecting incoming call.
        }

  } else if(e.type == 'connected') {

        if(e.session == registerSession) {
           // successfully registed.
        } else if(e.session == callSession) {
           // successfully connected call
        } else if(e.session == incomingCallSession) { 
           // incoming call connected
        }

  } else if(e.type == 'terminated') {

     /*
     * e.getSipResponseCode()=603 ; call declined without any answer
     * e.getSipResponseCode()=487 ; caller terminated the call
     * e.getSipResponseCode()=-1 ; call answered and hanguped by caller/callee 
     * e.getSipResponseCode()=200 ; user unregistered
     */

        if(e.session == registerSession) {
           // client unregistered
        } else if(e.session == callSession) {
           callSession = null;
           //outgoing call terminated.
        } else if(e.session == incomingCallSession) { 
           incomingCallSession = null;
           // incoming call terminated
        }

  }
}

function createSipStack() {
  sipStack = new SIPml.Stack({
                    realm: 'example.com', // mandatory domain name
                    impi: 'test', // mandatory authorisation name
                    impu: 'sip:test@example.com', // mandatory sip uri
                    password: 'password', //optional
                    display_name: ' test name', // optional
                    websocket_proxy_url: 'wss://sipml5.org:10062)', // optional
                    outbound_proxy_url: 'udp://example.com:5060', // optional
                    enable_rtcweb_breaker: true, // optional
                    events_listener: { events: '*', listener: EventListener } /* optional , '*' means all events */
              });

     sipStack.start(); // starting sip stack
}

Step 4:

Register :-
Register is used to register the sip to server. It is not mandatory to register to receive call/sma.

var registerSession;

function register() { // register function
  registerSession = sipStack.newSession('register', {
                       expires: 300, // expire time, optional
                        events_listener: { events: '*', listener: EventListener } /* optional, '*' means all events. */
                       });
   registerSession.register(); // registering session.
}

Step 5:
Make Outgoing call.

var callSession;

function makeCall() {
  callSession = sipStack.newSession('call-audiovideo', {
  /* audio and video will not be played if you didnt give values to audio_remote,video_remote and for video_local. */
                          audio_remote: document.getElementById('video-remote'),
                          video_remote:document.getElementById('video-remote'),
                          video_local:document.getElementById('audio-remote'),
                          events_listener: { events: '*', listener: EventListener }
                 });
    callSession.call("test2");
}

Step 6:

Receiving incoming call :-
"i_new_call" event is generated when a new incoming call arrives. This event handler should be added when sip stack is created.

function acceptCall() {
  // accept incoming call.
  incomingCallSession.accept();
}

Step 7:

Hangup or Reject a call

function hangupCall() { // call this function to hangup /reject a call.
  if(callSession) {
     callSession.hangup(); // hangups outgoing call.
  } else if(incomingCallSession) {
     incomingCallSession.reject(); // rejects incoming call.
  }
}

Step 8:

Unregistering Client.

function unregister() { // call this function to unregister this function
  registerSession.unregister();
}

Comments


  1. Nice article.
    bigo live is great app. it helps users to relax, connect friends.
    Download and install the application here
    BIGO LIVE APK

    ReplyDelete
  2. Nice Article...NICE GAME Thanks for the sharing..

    Bigo live is a Wonderfull APK. it helps users to relax, connect friends.
    Download and install the application here

    Bigo Live Mac PC

    Wonderful Platform


    ReplyDelete
  3. Great Article..Thanks for the sharing..

    Bigo live is a GooD APK.Connect friends.
    Install the application here.....
    Bigo Live Mac PC

    Wonderful Platform




    ReplyDelete

Post a Comment

Popular posts from this blog

Setup Asterisk 13 with FreePBX 13 in CentOS 7

Launch CentOS 7 AWS Ec2 InstanceLog in to your aws consoleGo to ec2 management page and click Launch Instance on Instance pageIn Choose AMI step, go to AWS MarketPlace tab and search CentOS 7 on search field. List of centos 7 ami's will be available.Select CentOS 7 (x86_64) ami which is free tier eligible. Select your instance type and click configure instance. Keep default values from Configure Instance to Add Tags stepsIn configure security group, create a security group which allow minimum ports openSSH : port 22HTTP : port 80Custom UDP Rule : 10000-20000 (if you are giving RTP ports 10000-20000)Custom UDP Rule : 5060 (ChanSIP port)Custom TCP Rule : 5060 (ChanSIP Port)Click Launch Instance. Select your key file and accept terms to launch instance.
Setup CentOS Server SSH into newly created CentOS server with username centos and your key file.Update all existing packagessudo yum update -yNow start http service(you can access your server via browser by going to your server ip addres…

Start an android activity from cordova plugin

We all need to start an android activity from a cordova plugin. Here is a small and complete code to start an activity from cordova plugin
1. Install plugman to create cordova plugin npm install -g plugman2. Create cordova plugin using plugman plugman create --name PluginName --plugin_id com.example.sample.plugin --plugin_version 0.0.1
N.B : plugin id never start with Uppercase Now PluginName directory will be created. Plugin structure will be
> PluginName/

> |- plugin.xml

> |- src/

> |- www/PluginName.js

3. Add android platform to plugin
plugman platform add --platform_name android
Now plugin structure will be

> PluginName/

> |- plugin.xml

> |- src/android/PluginName.java

> |- www/PluginName.js

4. Now create a java file named NewActivity.java in src/android diretory
This activity will be shown using our plugin. Write sample activity in NewActivity.java
package com.example.sample.plugin; import android.app.Activity; import android.os.Bundle;…