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 Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ rtc-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 Phases ➜ Link 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

2. 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')

3. 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 |

 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 | outgoingincoming | 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 : initiatingringingconnecteddisconnected | Status of session during call | | onError(json{callId,errorInfo}) | errorInfo contains following info : codereasonadditionInfo | 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 | widthheight | 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 | outgoingincoming | 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 : initiatingconnecteddisconnected | 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 : codereasonadditionInfo | 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);
  });