rtc-react-native-sdk

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)
}  

Call Stats callback gives call quality during the call(i.e. 4,3,2,1), which presents { 1: "very bad", 2: "bad", 3: "good",4: "very good" }

Rtc555Voice.addEventListener("callStats",this.onCallStats.bind(this));

onCallStats = (callId, status) =>{
  console.log("Call quality is", status.callQuality)
}  

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	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);
  });