react-native-iris-sdk v3.3.31

react-native-iris-sdk

Getting started

$ npm install react-native-iris-sdk --save

Mostly automatic installation

$ react-native link react-native-iris-sdk

Embed RTCSdk framework

1. Add framework (path: ./node_modules/react-native-iris-sdk/ios/IrisRtcSdk.framework) as embedded binaries in Xcode target settings.
2. Make sure the framework is also listed in <target> ➜ general ➜ Linked framework and libraries
3. Go to your project target ➜ Build Settings ➜ Framework search path and add $(SRCROOT)/../node_modules/react-native-iris-sdk/ios

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-iris-sdk and add RNIrisSdk.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNIrisSdk.a to your project's Build Phases ➜ Link Binary With Libraries
4. Add sdk dependent CocoaPod frameworks - XMPPFramework, CocoaAsyncSocket, CocoaLumberjack, KissXML,libPhoneNumber_iOS
5. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNIrisSdkPackage; to the imports at the top of the file
• Add new RNIrisSdkPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

include ':react-native-iris-sdk'
project(':react-native-iris-sdk').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-iris-sdk/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':react-native-iris-sdk')

Usage

Client can avail direct JS APIs or can use RTCDialer component (which has configurable UI buttons for dial pad and Incall features) to make a PSTN call work.

Using JS APIs

import RTCSdk from 'react-native-iris-sdk';

1) Outgoing Call

• API

RTCSdk.dial(destinationTN, config) --> callId

Dial API return a unique call id number which client needs to use while calling any subsequent sdk api.

• Parameters

Create config json with following parameters.

2) Incoming Call

• API

RTCSdk.accept(notificationPayload, config) --> callId

Accept API return a unique call id number which client needs to use while calling any subsequent sdk api.

• Parameters

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

3) Ending Call

RTCSdk.hangup(callId) 

4) Call Features

RTCSdk.hold(callId) 

RTCSdk.unhold(callId) 

RTCSdk.mute(callId) 

RTCSdk.unmute(callId) 

RTCSdk.sendDTMF(callId,number) 

RTCSdk.reject(String roomId,
                                 String toId,
                                 String traceId,
                                 String rtcServer)

• Parameters

4) SDK callback events

• callback

onStatus(json{callId,status}) 

• Parameters

• callback

onSdkEvents(json{callId,event,param}) 

• Parameters

• callback

onError(json{callId, errorInfo}) 

• Parameters

Using RTCDialer component

This component will consist of a key pad dialer and Incall UI screens. All UI button and views will be configurable i.e. you can set your custom styles. This component will be responsible for creating RTC connection (if not there already) and creating media connection for the voice call when set with required props.

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

Props

Parameters

Notification payload :

Callbacks

RTCDialer Screens sample

How to use RTCDialer example

componentWillMount() { 
    this.setState({
        mode: 'outgoing',
        dialerConfig: 
        {
            "sourceTN": this.state.publicids[0],
            "routingId": this.state.routingId,
            "token": this.state.token,
            "urls": 
            {
                "evm": this.state.config.evmServer,
                "ntm": this.state.config.ntmServer
            }
        }
    });
  }

render() {
    return (
      <View style={{flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'}}>
        <RTCDialer
            config={this.state.dialerConfig}
            mode={this.state.mode}
            notificationPayload={this.state.notificationPayload}
            isShown={true}
            isAnimating={true}
            onStatus={this.onDialerStatus.bind(this)}
            onSdkEvents={this.onDialerSdkEvents.bind(this)}
            onError={this.onDialerError.bind(this)}
        >
        </RTCDialer>
      </View>
      );
 }
 
  // Callbacks
  onDialerStatus(json){
    
  }

  onDialerSdkEvents(json){
    
  }
  
  onDialerError(json){
  
  }
  

RTC Connection

RTC dialer component manage the RTC connection internally but still client has an option to make the RTC connection before hand to save call set up time. If using only JS APIs, RTC connection needs to be created separately by calling specific APIs.

// Call connection method 
RTCSdk.connectUsingServer(eventManagerURL, irisToken, routingId);

• Parameters

//API to know RTC connection state (connecting, connected, disconnected) 
RTCSdk.rtcConnectionState().then(state => { 
      console.log("RTC Connection status is :"+state);
     
  })

• Callback events

// Observe events
RTCSdk.events.addListener('onConnected', function() {
console.log("Connection Successful with iris backend");
// Let's make a call
});
RTCSdk.events.addListener('onDisconnected', function() {
console.log("Connection disconnected from iris backend");

});
RTCSdk.events.addListener('onReconnecting', function() {
console.log("Connection Successful with iris backend");
// Let's make a call
});
RTCSdk.events.addListener('onConnectionError', function(error) {
console.log("Failed with error [" + JSON.stringify(error) + "]");
});

How to listen events from RTCHelper

import {RTCSdkEventEmitter} from 'react-native-iris-sdk/src/sdk/RTCSdkHelper'

RTCSdkEventEmitter.on('onSdkEvents', function(json) {    
console.log(JSON.stringify(json));
});

RTCSdkEventEmitter.on('onStatus', function(json) {  
console.log(JSON.stringify(json));          
});

RTCSdkEventEmitter.on('onError', function(json) {  
console.log(JSON.stringify(json));          
});

Usage - Examples

import RTCSdk from 'react-native-iris-sdk';

1. Make connection using iristoken and routingid

// Observe events
RTCSdk.events.addListener('onConnected', function() {
console.log("Connection Successful with iris backend");
// Let's make a call
});
RTCSdk.events.addListener('onDisconnected', function() {
console.log("Connection disconnected from iris backend");

});
RTCSdk.events.addListener('onReconnecting', function() {
console.log("Connection Successful with iris backend");
// Let's make a call
});
RTCSdk.events.addListener('onConnectionError', function(error) {
console.log("Failed with error [" + JSON.stringify(error) + "]");
});

// Call connection method 
RTCSdk.connectUsingServer("https://evm.iris.comcast.net", irisToken, RoutingId);

2. Make an outgoing PSTN call using IRIS SDK

RTCSdk.events.addListener('onSessionCreated', function(event) {
console.log("onSessionCreated");
});
RTCSdk.events.addListener('onSessionConnected', function(event) {
console.log("onSessionConnected");
});
RTCSdk.events.addListener('onSessionSIPStatus', function(event) {
console.log("onSessionSIPStatus");
});
RTCSdk.events.addListener('onSessionDisconnected', function(event) {
console.log("onSessionDisconnected");
});
// Observe events
RTCSdk.events.addListener('onConnected', function(success) {
console.log("Connection Successful with iris backend");

// Let's make a call
var config = {
sourceTN: '',
notificationPayload: ''
};
RTCSdk.dial("", config);
});

3. Using IrisRoomContainer to initiate/accept video call or to do a chat session

return ( <IrisRoomContainer ref={(IrisRoomContainer) => { this._IrisRoomContainer = IrisRoomContainer; }} Type={state.params.mode} EnablePreview={state.params.EnablePreview} RoomId={state.params.roomId} evmUrl={config.urls.eventManager} routingId={state.params.routingId} token={state.params.token} audioConfig={state.params.audioConfig} videoConfig={state.params.videoConfig} onSessionCreated={this.onSessionCreated.bind(this)} onSessionConnected={this.onSessionConnected.bind(this)} onSessionDisconnected={this.onSessionDisconnected.bind(this)} onSessionSIPStatus={this.onSessionSIPStatus.bind(this)} onSessionError={this.onSessionError.bind(this)} onChatMessage={this.onChatMessage.bind(this)} onChatMessageAck={this.onChatMessageAck.bind(this)} onChatMessageError={this.onChatMessageError.bind(this)} onSessionParticipantJoined={this.onSessionParticipantJoined.bind(this)} onSessionParticipantLeft={this.onSessionParticipantLeft.bind(this)} onSessionParticipantConnected={this.onSessionParticipantConnected.bind(this)} onSessionDominantSpeakerChanged={this.onSessionDominantSpeakerChanged.bind(this)} onStreamError={this.onStreamError.bind(this)} onLocalStream={this.onLocalStream.bind(this)} onRemoteAddStream={this.onRemoteAddStream.bind(this)} onRemoteRemoveStream={this.onRemoteRemoveStream.bind(this)} onEventHistory={this.onEventHistory.bind(this)} /> ...

Please see APIs for video call for additional information on video calling. The example-chat-video-room folder has a working code for this.

APIs

Connection APIs - Make a connection using connectUsingServer

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.connectUsingServer(serverUrl, irisToken, routingId);

Params

• serverUrl {String}: The url to event manager
• irisToken {String}: A valid IRIS token
• routingId {String}: Routing id of the user who is trying to login

Connection APIs - Disconnect using disconnect

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.disconnect();

Params

• None

Stream APIs - Create a audio only stream using createAudioStream

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createAudioStream();

Params

• None

Stream APIs - Create a video stream using createVideoStream

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createVideoStream(useBackCamera, UseHD);

Params

• useBackCamera {boolean}: whether to use back camera or not
• UseHD {boolean}: whether to use HD resolution for the call or not

Stream APIs - Start a preview using startPreview

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.startPreview();

Params

• None

Stream APIs - Stop a preview using stopPreview

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.stopPreview();

Params

• None

Stream APIs - Mute audio using mute

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.mute();

Params

• None

Stream APIs - Un-mute audio using unmute

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.unmute();

Params

• None

Stream APIs - Flip the camera using flip

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.flip();

Params

• None

Session APIs - Dial a number using createAudioSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createAudioSession(roomId, participantId, sourceTN, destinationTN, notifictionData);

Params

• roomId {String}: Room id created using createroom
• participantId {String}: Routing id
• sourceTN {String}: 10 digit telephone number
• destinationTN {String}: 10 digit telephone number
• notifictionData {String}: Notification payload

Session APIs - Accept an incoming call using joinAudioSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.joinAudioSession(roomId, roomToken, roomTokenExpiryTime, rtcServer);

Params

• roomId {String}: Room id to join
• roomToken {String}: Room Token
• roomTokenExpiryTime {Number}: Token expiry time
• rtcServer {Number}: Rtc Server

Session APIs - Hold the call using hold

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.hold(sessionId);

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)

Session APIs - Unhold the call using unhold

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.unhold(sessionId);

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)

Session APIs - Merge the call using mergeCall

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.mergeCall(sessionId, sessionIdToBeMerged);

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)
• sessionIdToBeMerged {String}: Session id to be mereged with

Session APIs - Send a DTMF over the call

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.sendDTMF(sessionId, "1");

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)
• tone {String}: Characters (0-9, A, B, C, D, *, #)

Session APIs - End the call using endAudioSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endAudioSession(sessionId);

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)

Session APIs - Create a video session using createVideoSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createVideoSession(roomId, videoSessionConfig);

Params

• roomId {String}: Session as returned by createroom
• videoSessionConfig {JSON}: Video Session config
• notificationData {String}: Notification payload

Session APIs - Join a video session using joinVideoSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.joinVideoSession(roomId, videoSessionConfig);

Params

• roomId {String}: Session as returned by createroom
• videoSessionConfig {JSON}: Video Session config
• roomToken {String}: Room Token
• roomTokenExpiryTime {Number}: Token expiry time
• rtcServer {Number}: Rtc Server

Session APIs - End the video call using endVideoSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endVideoSession(sessionId);

Params

• sessionId {String}: Session as returned in onSessionCreated (Same as roomid)

Session APIs - Create a chat session using createChatSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createChatSession(RoomId, name);

Params

• roomId {String}: RoomId as returned by createroom
• name {String}: Profile name

Session APIs - End a chat session using endChatSession

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endChatSession(RoomId);

Params

• roomId {String}: RoomId as returned by createroom

Session APIs - Send a chat message using sendChatMessage

Example

import RTCSdk from 'react-native-iris-sdk';
RTCSdk.sendChatMessage(RoomId, message, id);

Params

• roomId {String}: RoomId as returned by createroom
• message {String}: Message to be sent
• id {String}: Message id

Callbacks

Video Calling APIs - IrisVideoCallView react component

Deprecated

Video Calling APIs - IrisRoomContainer react component

This is a react component which gives flexibility to create chat, video and audio session. It allows to upgrade from chat to video and vice versa.

Usage

import {IrisRoomContainer, RTCSdk} from 'react-native-iris-sdk';
<IrisRoomContainer 
ref={(IrisRoomContainer) => { this._IrisRoomContainer = IrisRoomContainer; }}
Type={state.params.mode}
EnablePreview={state.params.EnablePreview}
RoomId={state.params.roomId}
evmUrl={config.urls.eventManager}
routingId={state.params.routingId}
token={state.params.token}
audioConfig={state.params.audioConfig}
videoConfig={state.params.videoConfig}
onSessionCreated={this.onSessionCreated.bind(this)}
onSessionConnected={this.onSessionConnected.bind(this)}
onSessionDisconnected={this.onSessionDisconnected.bind(this)}
onSessionSIPStatus={this.onSessionSIPStatus.bind(this)}
onSessionError={this.onSessionError.bind(this)}
onChatMessage={this.onChatMessage.bind(this)}
onChatMessageAck={this.onChatMessageAck.bind(this)}
onChatMessageError={this.onChatMessageError.bind(this)}
onSessionParticipantJoined={this.onSessionParticipantJoined.bind(this)}
onSessionParticipantLeft={this.onSessionParticipantLeft.bind(this)}
onSessionParticipantConnected={this.onSessionParticipantConnected.bind(this)}
onSessionDominantSpeakerChanged={this.onSessionDominantSpeakerChanged.bind(this)}
onStreamError={this.onStreamError.bind(this)}
onLocalStream={this.onLocalStream.bind(this)}
onRemoteAddStream={this.onRemoteAddStream.bind(this)}
onRemoteRemoveStream={this.onRemoteRemoveStream.bind(this)}
onEventHistory={this.onEventHistory.bind(this)}
/>

The view has following props:

Props

Callback Props

Methods

You can use a ref to access the methods. See an example below:

<IrisRoomContainer ref={(IrisRoomContainer) => { this._IrisRoomContainer = IrisRoomContainer; }} ... /> ... // When user ends the call, call the end call method this._IrisRoomContainer.endVideoSession();