test-sdk2121

555 RTC React Native SDK provides an inbuilt component for PSTN or video call feature leveraging the 555 platform. Component's UI theme is configurable by providing the custom style props. It also provide JS-based APIs (in case you need to create your component) for PSTN/video call feature.SDK also provides APIs for subscribing notification topics, deregister subscriber and deleting subscribed notification topic.

Usage no npm install needed!

<script type="module">
  import testSdk2121 from 'https://cdn.skypack.dev/test-sdk2121';
</script>

README

555 RTC React Native SDK

Overview

555 RTC React Native SDK provides an inbuilt component for PSTN or video call feature leveraging the 555 platform. Component's UI theme is configurable by providing the custom style props. It also provide JS-based APIs (in case you need to create your component) for PSTN/video call feature.SDK also provides APIs for subscribing notification topics, deregister subscriber and deleting subscribed notification topic.

Feature list

Current

  1. SDK provides component and API for PSTN call
  2. Provided adavance features like mute/unmute, hold/unhold.
  3. SDK analytics and stats support
  4. Way to enable/disable SDK logs

Pending

  1. Updaing SDK APIs(if needed) as per this document)
  2. Call reconnect feature in case of network failure
  3. Handling all predefined error codes
  4. Way to dump logs into a file for debugging purposes
  5. Advance call features like merge/swap/add call.
  6. Video call testing and adding custom renderer.

Installation

npm install rtc-react-native-sdk

iOS

  1. In XCode, in the project navigator, right-click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesrtc-react-native-SDK and add RNRtcReactNativeSdk.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRtcReactNativeSdk.a to your project's Build PhasesLink Binary With Libraries
  4. Add SDK dependent frameworks - WebRTC
  5. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.reactlibrary.RNRtcReactNativeSdkPackage; to the imports at the top of the file
  • Add new RNRtcReactNativeSdkPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
include ':rtc-react-native-sdk'
project(':rtc-react-native-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/rtc-react-native-sdk/android')
  1. Insert the following lines inside the dependencies block in android/app/build.gradle:
implementation project(':rtc-react-native-sdk')

Usage

The client can make use of either component or JS APIs to implement video and PSTN calls in their application.client can make use of JS APIs for subscribing notification topics,deregister subscriber and deleting subscribed notification topic. Before invoking PSTN/Video call API or Notification related APIs, RTC connection should be connected.

RTC Connection


API

Use setConfig API to establish RTC connection.

import {Rtc555Sdk} from 'rtc-react-native-sdk';
const config = { "token": "iristoken",
            "routingId":"routing id of user",
            "eventManagerUrl":"event manager url ",
            "sourceTelephonenum":"telephone number of user"}
Rtc555Sdk.setConfig(config);

Parameters

Parameters that are part of config which will be passed as a parameter to setconfig api.

Property Type Category Values
eventManagerUrl string Required Server URL for event manager
token string Required JWT token
routingId string Required Unique Id for the User
sourceTelephonenum string Required for PSTN calls Telephone number of user
todomain string Required domain name
enableReconnect Bool Optional flag to reconnect incase of network switch
notificationManagerUrl string Required notification manager url for subscribtion of notifications
isAnonymousRoom Bool Required for anonymous calls flag to make connection for anonymous calls

Calllbacks

notification callback gives incoming notification data if client has subscribed for XMPP notification.

    Rtc555Sdk.on("notification", (notificationData) => {
        console.log("notification",JSON.stringify(notificationData))
    }

RTC Stream


API

Use create API to create local stream for Video calls.

import {RtcStream} from 'rtc-react-native-sdk';
RtcStream.create();

create API returns a promise. Response will have stream if stream is successful created otherwise error JSON with code and reason for error.

RtcStream.create()
    .then(function (stream) {
    // stream created    
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

PSTN Call

Using JS APIs


1) Outgoing Call

API

To make outgoing calls, pass destination phone number, and notification data. notification data contains two fields called data and notification. Users can add any custom data as part data key which will get delivered to the remote end as part of the notification. The notification key contains the notification type and federation type of the notification (Both values are already populated in the below example)

import {Rtc555Voice} from 'rtc-react-native-sdk';
Rtc555Voice.dial(targetTN, notificationData)
Handling Response

dial API returns a promise. Response will have callId if call is successful otherwise error JSON with code and reason for error.

Rtc555Voice.dial(targetTN, this.getNotificationPayload())
    .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

getNotificationPayload(){
         let data =  {'cname': <Source Telephone Number>, 'cid': <Source Telephone Number>, 'tar': <Target Telephone Number>} ;
        let notificationpayload =  [{'type': 'pstn'} , {'topic': 'federation/pstn'}];
        let userdata = {
            'data':data,
            'notification' : notificationpayload
        }

        let notificationdata = JSON.stringify(userdata);

        return notificationdata;
}
  

2) Incoming Call

To accept incoming call, pass the notification payload got in notification.

API

  var notificationData = {
      room_id: notificationPayload.roomid,
      trace_id: notificationPayload.traceid,
      to_routing_id: notificationPayload.routingid,
      rtc_server: notificationPayload.rtcserver,
      room_token: notificationPayload.roomtoken,
      room_token_expiry_time: notificationPayload.roomtokenexpirytime,
  };

  Rtc555Voice.accept(notificationData)

Below is the notificationData need to be populated from incoming notification:

Property Type Description
room_id string Unique room id
room_token string Room token
room_token_expiry_time string Expiry time of room token
rtc_server string RTC server
to_routing_id string routingid
trace_id string trace Id
Handling Response
Rtc555Voice.accept(notificationData)
    .then(function (response) {
    // handle success
    console.log(response.callId);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

3) Callbacks

In order to receive callbacks, Pass event name and function to execute everytime when event is triggered to addEventListener api.

Rtc555Voice.addEventListener(event,listener);

Status callback gives call status(initiating/ringing/connected/disconnected)

Rtc555Voice.addEventListener("status",this.onCallStatus.bind(this));

onCallStatus = (callId, status) =>{
  console.log("Call status is",status)
}  

Error callback consists of error code and reason for any error occur during a call.

Rtc555Voice.addEventListener("error",this.onCallError.bind(this));

onCallError = (callId, errorInfo) =>{
  console.log("Call status is",errorInfo.code)
  console.log("Call status is",errorInfo.reason)
}

In order to remove listeners for event, pass callid and event to removeEventListener api.

Rtc555Voice.removeEventListener(callId,event);

4) Terminating Call

Rtc555Voice.hangup(callId) 

5) Call Features

 Rtc555Voice.merge(heldSession)  
Property Type Description

| heldSession | object | session which was held to merge |

 Rtc555Voice.hold(callId)  
Property Type Description
callId string callId is unique id for this call which was returned from dial/accept API
```javascript
Rtc555Voice.unhold(callId)
````
Property Type Description
callId string callId is unique id for this call which was returned from dial/accept API
 Rtc555Voice.mute(callId)  
Property Type Description
callId string callId is unique id for this call which was returned from dial/accept API
Rtc555Voice.unmute(callId) 
Property Type Description
callId string callId is unique id for this call which was returned from dial/accept API
Rtc555Voice.sendDTMF(tone) 
Property Type Description
tone string character to which dtmftone needs to be played

Using Component


This component will consist of a keypad dialer and Incall UI screens. All UI button and views will be configurable i.e. you can set your custom styles.

   import {RTCDialer} from 'rtc-react-native-sdk';

Props

Parameters
Name Type Description
mode
  • outgoing
  • incoming
To decide if outgoing or incoming call
notificationPayload String Notification payload for incoming call
dialerTheme Json Custom style for dial pad screen buttons
inCallViewTheme Json Custom style for Incall screen buttons
Notification payload :

notificationPayload contains two fields called data and notification. Users can add any custom data as part data key which will get delivered to the remote end as part of the notification. The notification key contains the notification type and federation type of the notification (Both values are already populated in the below example)

   var notificationPayload = this.getNotificationPayload()

   getNotificationPayload(){
         let data =  {'cname': <Source Telephone Number>, 'cid': <Source Telephone Number>} ;
        let notificationpayload =  [{'type': 'pstn'} , {'topic': 'federation/pstn'}];
        let userdata = {
            'data':data,
            'notification' : notificationpayload
        }

        let notificationdata = JSON.stringify(userdata);

        return notificationdata;
}

Callbacks

Name Parameter Description
onStatus(json{callId,status}) status contains call status :
  • initiating
  • ringing
  • connected
  • disconnected
Status of session during call
onError(json{callId,errorInfo}) errorInfo contains following info :
  • code
  • reason
  • additionInfo
Error callback invoked if any error during RTC connection or creating session

sample code to integrate Dialer component

   componentWillMount() { 
    this.setState({
        mode: 'outgoing'
    });
  }

render() {
    return (      
        <Dialer
            mode={this.state.mode}
            notificationPayload={this.state.notificationPayload}  
            onStatus={this.onCallStatus.bind(this)}
            onError={this.onDialerError.bind(this)}
        >
        </Dialer>      
      );
 }

Video Call

Using JS APIs


In order to make outgoing video call, pass targetId and notification data.

API
Rtc555Video.call(targetId,notificationData,localStream,isAnonymousRoom) 

Parameters

Property Type Values
targetId string targetroutingid incase of non-anonymous call/room id incase of anaonymous call
notificationData string notification data
localStream object local stream
isAnonymousRoom Bool flag to create/join anonymous calls
   Rtc555Video.call(targetId,notificationData,localStream,isAnonymousRoom)
Handling Response

This API return a promise. Response will have callId if call is successful otherwise error json with code and reson for error.

Rtc555Video.call(targetId,notificationData,localStream,isAnonymousRoom)
    .then(function (response) {
    // handle success
    console.log(response.callId);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

2) Incoming Call

To accept incoming call, pass the notification payload got in notification and local stream

API
  Rtc555Video.accept(notificationPayload,localstream)

Below is the Notification payload need to be populated from incoming notification:

Property Type Description
roomId string Unique room id
roomToken string Room token
roomTokenExpiryTime string Expiry time of room token
rtcServer string RTC server
traceId string trace id

Optional configuration parameters can be passed as mentioned in dial API.

Handling Response

Accept API return a promise. Response will have callId if call is successful otherwise error JSON with code and reason for error.

Rtc555Video.accept(notificationData,localstream)
    .then(function (response) {
    // handle success
    console.log(response.callId);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

3) SDK callback events

status callback gives call status(initiating/connected/disconnected)

Rtc555Video.on("status", (callId, status) => {
  console.log("Call status is",status)
}
Parameters
Property Type Values
callId string Unique Id for the call
status string initiating,connected,disconnected

error callback consists of error code and reason for any error occur during a call.

Rtc555Video.on("error", (callId, errorInfo) => {
  console.log("Call status is",errorInfo.code)
  console.log("Call status is",errorInfo.reason)
}
Parameters
Property Type Values
callId string Unique Id for the call
errorInfo json code, reason, additionalInfo

localStream callback will be called when local stream is created

Rtc555Video.on("localStream", (stream) => {
  
}
Parameters
Property Type Values
stream string local stream

remoteStream callback will be called when remote participant is joined and got remote stream

Rtc555Video.on("remoteStream", (stream) => {
  
}

Parameters
Property Type Values
stream string remote participant stream

4) Ending Call

Rtc555Video.end(callId) 
Parameters
Property Type Description
callId string callId which is returned from call/accept api

5) Rendering Video

RtcRenderer component will be used to render local and remote streams.

Props

Parameters
Name Type Description
stream object local stream and remote stream which we got from localStream and remoteStream callbacks of RTCSession
viewConfig
  • width
  • height
configurations of view which renders the stream
Sample code to integrate RtcRenderer component
import {RtcRenderer} from 'rtc-react-native-sdk'; 

render(){
    <RtcRenderer stream={stream} rendererConfig={rendererConfig}/>
}

6) Call Features

Rtc555Video.mute(callId) 
Property Type Description
callId string callId which is returned from call/accept API
Rtc555Video.unmute(callId) 
Property Type Description
callId string callId which is returned from call/accept API
Rtc555Video.flip() 

Using Component


This component will consist of video call view screen. All UI button and views will be configurable i.e. you can set your custom styles.

   import {RtcVideoCall} from 'rtc-react-native-sdk';

Props

Parameters
Name Type Description
mode
  • outgoing
  • incoming
To decide if outgoing or incoming call
targetId String targetroutingid incase of non-anonymous call/room id incase of anaonymous call
isAnonymous Bool flag to create/join anonymous calls
notificationPayload Json Notification payload for incoming call
videocallViewTheme Json Custom style for videocall view screen
Notification payload :
Property Type Description
roomId string Unique room id
roomToken string Room token
roomTokenExpiryTime string Expiry time of room token
rtcServer string RTC server
traceId string trace id

Callbacks

Name Parameter Description
onCallStatus(json{callId,status}) status contains call status :
  • initiating
  • connected
  • disconnected
Status of session during call
onLocalStream(json{stream}) contains stream local stream
onRemoteStream(json{stream}) contains stream remote stream
onError(json{callId,errorInfo}) errorInfo contains following info :
  • code
  • reason
  • additionInfo
Error callback invoked if any error during
sample code to integrate RTCVideoCall component
   componentWillMount() { 
    this.setState({
        mode: 'outgoing'      
    });
  }

render() {
    return (      
        <RtcVideoCall          
            mode={this.state.mode}
            targetId={this.state.targetEmailId}
            isAnonymous={false}
            notificationPayload={this.state.notificationPayload}  
            onCallStatus={this.onCallStatus.bind(this)}
            onLocalStream={this.onLocalStream.bind(this)}
            onRemoteStream={this.onRemoteStream.bind(this)}     
            onError={this.onSessionError.bind(this)}
        >
        </RtcVideoCall>      
      );
 }

Notification Manager

client can make use of following APIs for subscribing notification topics,deregister subscriber and deleting subscribed notification topic.Before invoking any of these APIs RTC Connection should be connected using setConfig api.

createSubscriptions API

Use createSubscriptions API to create subscriptions for a specific topic and protocol for subscriber.

import Rtc555Ntm from 'rtc-react-native-sdk';
Rtc555Ntm.createSubscriptions(subscriptions,appDomain);
Parameters
Property Type Description
subscriptions array Array of subscription object
appDomain string application domain

Below is the subscription object need to be populated:

Property Type Description
token string device token
protocol string value like "xmpp or "fcm" or "apns" or "webn"
topic string value like "pstn or "video"
Handling Response

createSubscriptions API return a promise.
If call is successful.Response will have an array of objects which contains subscriberId,protocol and array of topics,for each unique subscriberID created.
Otherwise error JSON with code and reason for error.

Rtc555Ntm.createSubscriptions(subscriptions,appDomain)
    .then(function (response) {
    // handle success
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

deleteSubscription API

Use deleteSubscription API to delete a specific subscriber subscription.

import Rtc555Ntm from 'rtc-react-native-sdk';
Rtc555Ntm.deleteSubscription(subscriberId, topic,appDomain);
Parameters
Property Type Description
subscriberId string subscriber id
topic string value like "pstn or "video"
appDomain string application domain
Handling Response

deleteSubscription API return a promise.
If call is successful,object having topic and subscriberId of deleted subscription will be returned as response
Otherwise error JSON with code and reason for error.

Rtc555Ntm.deleteSubscription(subscriberId, topic,appDomain)
    .then(function (response) {
    // handle success
    console.log(response.topic);
    console.log(response.subscriberId);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  })

deleteAllSubscriptions API

Use deleteAllSubscriptions API to deregister a subscriber.

import Rtc555Ntm from 'rtc-react-native-sdk';
Rtc555Ntm.deleteAllSubscriptions(subscriberId);
Parameters
Property Type Description
subscriberId string subscriber id
Handling Response

deleteAllSubscriptions API return a promise.
If call is successful,deleted subscriberId will be returned as response
Otherwise error JSON with code and reason for error.

Rtc555Ntm.deleteAllSubscriptions(subscriberId)
    .then(function (subscriberId) {
    // handle success
    console.log(subscriberId);
  })
  .catch(function (error) {
    // handle error
    console.log(error.code);
    console.log(error.reason);
  });