test-sdk2121 v1.0.6-beta13

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) 1) Call reconnect feature in case of network failure 2) Handling all predefined error codes 3) Way to dump logs into a file for debugging purposes 4) Advance call features like merge/swap/add call. 5) 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.

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:

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)  

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

 Rtc555Voice.hold(callId)  

 Rtc555Voice.unhold(callId)  

 Rtc555Voice.mute(callId)  

Rtc555Voice.unmute(callId) 

Rtc555Voice.sendDTMF(tone) 

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

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

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

   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:

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

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

localStream callback will be called when local stream is created

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

Parameters

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

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

Parameters

4) Ending Call

Rtc555Video.end(callId) 

Parameters

5) Rendering Video

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

Props

Parameters

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) 

Rtc555Video.unmute(callId) 

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

Notification payload :

Callbacks

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

Below is the subscription object need to be populated:

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

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

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