telecmi / piopiy_client_js

PIOPIY browser JS SDK for voice

PIOPIY Client JS SDK for voice

PIOPIY WebRTC SDK allows you to make and receive voice calls, where making voice calls can be made to a public switched telephone network(PSTN), APP to APP calling and browser to browser calling.

Package Installation

Using NPM

 npm install piopiyjs

Using YARN

 yarn add piopiyjs

Using Bower

 bower install telecmi/piopiy_client_js

Monolithic Import

In Browser

 <script src="dist/piopiy.min.js" type="text/javascript"></script>

In ESM/Typescript

 import PIOPIY from 'piopiyjs';

In CommonJS

 var PIOPIY = require('piopiyjs');

Initializing the PIOPIY Object

var piopiy = new PIOPIY( {
        name: 'Display Name',
        debug: false,
        autoplay: true,
        ringTime: 60
    } );

Configuration Parameters

Below is the configuration parameters

Attribute	Description	Allowed Values	Default Value
name	Your Display Name in App	string	none
debug	Enable debug message in browser console	Boolean	false
autoplay	Handle media stream automatically	Boolean	true
ringTime	Your incoming call ringing time in seconds	number	60

PIOPIY Methods

Login

Using this method user can able to connect with TeleCMI SBC.

piopiy.login('user_id','password','SBC_URI');

Configuration Parameters

Parameter Name	Type	Description
user_id	string	The user login ID
password	string	The user login Password
SBC_URI	url	ASIA - sbcsg.telecmi.com Europe - sbcuk.telecmi.com America - sbcus.telecmi.com India - sbcind.telecmi.com

Make call

Using this method user can able to make call to PSTN or Other user extension.

piopiy.call('PHONE_NUMBER');

Configuration Parameters

Parameter Name	Type	Description
PHONE_NUMBER	string	Enter phone number or user extention number ,Phone number start with country code example '13158050050'

Send DTMF

Using this method user can able to send DTMF tone to ongoing call.

piopiy.sendDtmf('DTMF_TONE');

Configuration Parameters

Parameter Name	Type	Description
DTMF_TONE	string	Your DTMF tone input

Hold Call

Using this method user can able to hold ongoing call.

piopiy.hold();

Unhold Call

Using this method user can able to unhold ongoing call.

piopiy.unHold();

Mute Call

Using this method user can able to mute ongoing call.

piopiy.mute();

Unmute Call

Using this method user can able to unmute ongoing call.

piopiy.unMute();

Answer call

Using this method user can able to answer incoming call.

piopiy.answer();

Reject call

Using this method user can able to reject or disconnect incoming call.

piopiy.reject();

Hangup call

Using this method user can able to hangup ongoing call.

piopiy.terminate();

Logout

Using this method user can able to logout from SBC session.

piopiy.logout();

PIOPIY Call Event Handler

Login

This event will triger when user login sucessfully

piopiy.on( 'login', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'login', function ( object ) {
       
    if(object.code == 200) {
   
        //  Login successfully and do your stuff here.
        
    }   
});

List of event and status

code	status
200	Login Successfully

LoginFailed

This event will trigger when user authentication failed.

piopiy.on( 'loginFailed', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

 piopiy.on( 'loginFailed', function ( object ) {
       
    if(object.code == 401) {

        //  Verify that the user_id and password are correct. 
    }
});

List of event and status

code	status
401	Invalid user_id or password

Trying

This event will trigger when user make call to phone number or extention (Destination Number)

piopiy.on( 'trying', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'trying', function ( object ) {
        
    if(object.code == 100 ) {

        //  The outgoing call is currently being started.
    }
});

List of event and status

code	status	type	call_id
100	trying	ougoing	95ea3424-d77e-123b-0ca1-463d48e96190

Ringing

This event will trigger when call start ringing.

piopiy.on( 'ringing', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'ringing', function ( object ) {
        
    if(object.code == 183) {

        // An incoming or outgoing call is ringing.        
    }
});

List of event and status

code	status	type	call_id
183	ringing	outgoing & incoming	95ea3424-d77e-123b-0ca1-463d48e96190

Answered

This event will trigger when ongoing call was answered.

piopiy.on( 'answered', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'answered', function ( object ) {
        
    if(object.code == 200) {

        // An incoming or outgoing call is answered.
    }
});

List of event and status

code	status	call_id
200	answered	95ea3424-d77e-123b-0ca1-463d48e96190

CallStream

This event will trigger when mediastream established.

piopiy.on( 'callStream', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'callStream', function ( object ) {
          
    // MediaStream has been established.
});

List of event and status

code	status	call_id
200	MediaStream	95ea3424-d77e-123b-0ca1-463d48e96190

InComingCall

This event will trigger when user recive incmoing call.

piopiy.on( 'inComingCall', function ( object ) {

    //  Data is JSON it contain event and status.
});

Hangup

This event will trigger when user reject or hangup incmoing call.

piopiy.on( 'hangup', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'hangup', function ( object ) {
        
    if(object.code == 200 ) {

        //  to hangup the incoming and ongoing calls.
    }
});

List of event and status

code	status	call_id
200	call hangup	95ea3424-d77e-123b-0ca1-463d48e96190

Ended

This event will trigger when ongoing call end.

piopiy.on( 'ended', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'ended', function ( object ) {
        
    if(object.code == 200 ) {

        //  An incoming or outgoing call is ended.
    }
});

List of event and status

code	status	call_id
200	call ended , Unavailable , Busy & Canceled	95ea3424-d77e-123b-0ca1-463d48e96190

Hold

This event will trigger when ongoing call on hold.

piopiy.on( 'hold', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'hold', function ( object ) {
        
    if(object.code == 200 ) {

        //  The call is now being hold.
    }
});

List of event and status

code	status	whom	call_id
200	call on hold	myself	95ea3424-d77e-123b-0ca1-463d48e96190

UnHold

This event will trigger when ongoing call on unhold.

piopiy.on( 'unhold', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'unhold', function ( object ) {
        
    if(object.code == 200 ) {

        //  The call is now being released.
    }
});

List of event and status

code	status	whom	call_id
200	call on active	myself	95ea3424-d77e-123b-0ca1-463d48e96190

Error

This event will trigger when error will occurr.

piopiy.on( 'error', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'error', function ( object ) {
        
    if(object.code == 1001 || object.code == 1002) {

        //  If there are any incorrect commands in the function, displays error.
    }
});

List of event and status

code	status
1001 & 1002	common error

Logout

This event will trigger when user logout .

piopiy.on( 'logout', function ( object ) {

    //  Data is JSON it contain event and status.
});

Example

piopiy.on( 'logout', function ( object ) {
        
    if(object.code == 200 ) {

        //  The user logged out successfully. 
    }
});

List of event and status

code	status
200	logout successfully

piopiy_client_js's Issues

expose auth token

I have intigrated you telecmi in my company dashboard
made a componnet which mount when slick on start call button
but everytime i have to make login before making call.
there is no way that i can store the token and re use when calling to another person

// If Login Success, then make the call
this.piopiy.on('login', (object) => {
console.log("login ok", object, this.piopiy)
this.makeCall()
});

see here neither in call back nor in this.piopy object i am seeing the auth token
while i can see in network call, there is an api hit , and in response it send the auth token
but we need it here some how

How to get call_id for each call

I am initializing pipu client like below

initializePiopiyClient() {
  this.PIOPIY = new PIOPIY({
    name: this.common.localStorageService.userDataObj.UserName,
    debug: false,
    autoplay: true,
    ringTime: 30,
  });

  Object.keys(this.listeners).forEach((eventName) => {
    this.PIOPIY.on(eventName, (eventData) =>
      this.listeners[eventName].next(eventData)
    );
  });

  this.listeners['error'].subscribe((err) => {
    console.log(`PIOPIY ERROR: `, err);
    if (
      err &&
      err.code === 1002 &&
      this.localStorageService.hasValidSession()
    ) {
      // Possibly PIOPIY session logged out. Login again.
      this.login();
    }
  });

  this.listeners['login'].subscribe((data) => {
    if (data?.code === 200) {
      this.callingEnabled = true;
    }
  });

  this.listeners['logout'].subscribe((data) => {
    if (data?.code === 200) {
      this.callingEnabled = false;
    }
  });

  this.listeners['loginFailed'].subscribe((err) => {
    this.callingEnabled = false;
    this.common.OpenNotificationModal(
      'error',
      'Insufficient data.Please contact support.'
    );
  });

  Object.keys(this.listeners).forEach((key) =>
    this.listeners[key].subscribe((data) => {
      if (this.enableDebug) {
        console.log(`EVENT: ${key}, DATA: `, data);
      }
    })
  );

  this.login();
}

FOR making call

 /**
   * @param mobileNo Mobile number with country code. Ex: 917236547890
   */
  call(mobileNo: string) {
    const callid = Date.now().toString() + Math.random().toString(36).substring(2, 8);
    this.PIOPIY.call(mobileNo.replace(/[\D]/g, ''), callid)
  }

My component file

ngOnInit(): void {
    this.duration.subscribe(() => this.common.trackUserActivity.next());
    this.callStatus = this.common.incomingCallData ? 'ringing' : 'trying';

    this.unsubscribers.push(this.piopiy.getListener('trying').subscribe(data => this.updateCallStatus(data.status)));
    this.unsubscribers.push(this.piopiy.getListener('ringing').subscribe(data => {
      this.processRingTime('ringing');
      this.updateCallStatus(data.status);
    }));
    this.unsubscribers.push(this.piopiy.getListener('answered').subscribe(data => {
      this.processRingTime('answered');
      this.updateCallStatus(data.status);
    }));

    this.unsubscribers.push(this.piopiy.getListener('hold').subscribe(data => this.callHold = true));
    this.unsubscribers.push(this.piopiy.getListener('unhold').subscribe(data => this.callHold = false));

    this.unsubscribers.push(this.piopiy.getListener('hangup').subscribe(data => {
      this.processRingTime('hangup');
      this.setNextActivePhonebook();
    }));
    this.unsubscribers.push(this.piopiy.getListener('ended').subscribe(data => {
      console.log('Call ended with ID:', data.call_id);
      this.callLogId = data.call_id;
      this.processRingTime('ended');
      this.setNextActivePhonebook();
    }));

    this.unsubscribers.push(this.piopiy.getSuperListener('answered').subscribe(data => {
      this.updateCallStatus('answered');
    }));

    this.unsubscribers.push(this.piopiy.getSuperListener('hold').subscribe(data => this.callHold = true));
    this.unsubscribers.push(this.piopiy.getSuperListener('unhold').subscribe(data => this.callHold = false));

    this.unsubscribers.push(this.piopiy.getSuperListener('hangup').subscribe(data => this.setNextActivePhonebook()));
    this.unsubscribers.push(this.piopiy.getSuperListener('ended').subscribe(data => {
      this.callLogId = data;this.setNextActivePhonebook()
    }));

    if (this.common.liveCallData && this.common.liveCallData.length) {
      // If liveCallData has more than one Phonebook entry or liveCallData has valid ListName in Phonebook entry, treat it as Campaign mode.
      this.campaignMode = (this.common.liveCallData.length > 1) || !!this.common.liveCallData[0].ListName;
      this.setNextActivePhonebook();
      this.common.apiService.setUserStatus(this.campaignMode ? USERSTATUS.ONCALL : USERSTATUS.MANUALCALL).subscribe();
    }

    // End campaign if user changes his status to anything but Available, OnCall, Offline
    if (this.campaignMode) {
      this.unsubscribers.push(
        this.common.eventsService.userStatusChange
          .pipe(
            filter((status) => (status !== USERSTATUS.AVAILABLE) && (status !== USERSTATUS.ONCALL) && (status !== USERSTATUS.OFFLINE))
          )
          .subscribe((status) => {
            this.previousUserStatus = status;
            this.endEverything();
          })
      );
    }

    if (this.common.incomingCallData?.barge) {
      this.unsubscribers.push(
        this.common.eventsService.callBargingRingTime
          .pipe(
            filter((data) => ((new Date()).getTime() - data.getTime()) < 5000)
          )
          .subscribe(() => this.piopiy.superAnswer())
      );
    }
  }

i have checked all available callback events but nothing has call_id

is there any unique id available for each call whenther status of the call doesnt matter but i want unique id for each

we are following below doc

https://doc.telecmi.com/chub/docs/browser-sdk

We have teleCMI account for multiple clients

callstats API

Need Callstate API for ongoing call quality info

Call Transfer Event

Need a call transfer event when transferring a call to another leg