README
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
- Add framework (path:
./node_modules/react-native-iris-sdk/ios/IrisRtcSdk.framework
) as embedded binaries in Xcode target settings. - Make sure the framework is also listed in
<target>
➜general
➜Linked framework and libraries
- Go to your project target ➜
Build Settings
➜Framework search path
and add$(SRCROOT)/../node_modules/react-native-iris-sdk/ios
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-iris-sdk
and addRNIrisSdk.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNIrisSdk.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Add sdk dependent CocoaPod frameworks - XMPPFramework, CocoaAsyncSocket, CocoaLumberjack, KissXML,libPhoneNumber_iOS
- Run your project (
Cmd+R
)<
Android
- 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 thegetPackages()
method
- 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')
- 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
Property | Type | Description |
---|---|---|
destinationTN | string | Destination telephone number |
config | json | Configuration JSON with below mentioned parameters |
Create config json with following parameters.
Property | Type | Description |
---|---|---|
routingId | string | Unique Id of the user |
token | string | JWT token |
urls.evm | string | Event manager URL |
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
Property | Type | Description |
---|---|---|
notificationPayload | json | Notification payload received when getting incoming call notification |
config | json | Configuration JSON as described above |
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 |
RemoteTN | string | Caller TN |
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
Property | Type | Description |
---|---|---|
roomId | string | RoomId received in incoming notification |
toId | string | Target routingId received in incoming notification payload |
traceId | string | traceId received in incoming notification payload |
rtcServer | string | rtcServer received in incoming notification payload |
4) SDK callback events
- callback
onStatus(json{callId,status})
- Parameters
Property | Type | Values |
---|---|---|
callId | string | Unique Id for the call |
status | string | initializing,ready,dialing,ringing,accepting,connected,disconnected |
- callback
onSdkEvents(json{callId,event,param})
- Parameters
Property | Type | Values |
---|---|---|
callId | string | Unique Id for the call |
event | string | onSessionCreated, onSessionJoined, onSessionParticipantJoined, onSessionConnected, onSessionParticipantLeft, onSessionParticipantProfile, onSessionDominantSpeakerChanged, onSessionRemoteParticipantActivated, onSessionParticipantNotResponding, onSessionEarlyMedia, onLogAnalytics |
param | json | Parameters corresponding to each sdk events. e.g routingId, roomId etc. |
- callback
onError(json{callId, errorInfo})
- Parameters
Property | Type | Values |
---|---|---|
callId | string | Unique Id for the call |
errorInfo | json | code, reason, additionalInfo |
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
Name | Type | Description |
---|---|---|
config | Json |
|
isAnimating | Bool | Enable/Disable any animation while moving to different state inside * onStatus * prop |
destinationTN | String | If set this prop, InCallView component will be directly rendered. e.g. If call is initiated from recent list where no need to show dialer pad. |
isShown | Bool | If set to false, no UI component will be rendered. e.g. If call initiated from recent list and while ending comes back on recent list instead of dialer screen. |
mode |
|
To decide if outgoing or incoming call. |
notificationPayload | Json | Notification payload for incoming call |
dialerTheme | Json | Custom style for dial pad and Incall screen buttons |
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 |
RemoteTN | string | Caller TN |
Callbacks
Name | Parameter | Description |
---|---|---|
onStatus(json{callId,status}) |
|
Status for the component during various stages |
onSdkEvents(json{callId,event,param}) | event contains current SDK callbacks :
|
This will include all the SDK callbacks currently gets invoked for each event. param will include event info like routingId etc |
onError(json{callId,errorInfo}) |
|
Error callback invoked if any error during RTC connection or creating session. |
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
Property | Type | Values |
---|---|---|
evm | string | Server URL for event manager |
irisToken | string | JWT token |
routingId | string | Unique Id for the User |
//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';
- Make connection using
iristoken
androutingid
// 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);
- 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);
});
- Using
IrisRoomContainer
to initiate/accept video call or to do a chat session
return (
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
connectUsingServer
Connection APIs - Make a connection using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.connectUsingServer(serverUrl, irisToken, routingId);
Params
serverUrl
{String}: The url to event manageririsToken
{String}: A valid IRIS tokenroutingId
{String}: Routing id of the user who is trying to login
disconnect
Connection APIs - Disconnect using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.disconnect();
Params
- None
createAudioStream
Stream APIs - Create a audio only stream using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createAudioStream();
Params
- None
createVideoStream
Stream APIs - Create a video stream using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createVideoStream(useBackCamera, UseHD);
Params
useBackCamera
{boolean}: whether to use back camera or notUseHD
{boolean}: whether to use HD resolution for the call or not
startPreview
Stream APIs - Start a preview using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.startPreview();
Params
- None
stopPreview
Stream APIs - Stop a preview using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.stopPreview();
Params
- None
mute
Stream APIs - Mute audio using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.mute();
Params
- None
unmute
Stream APIs - Un-mute audio using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.unmute();
Params
- None
flip
Stream APIs - Flip the camera using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.flip();
Params
- None
createAudioSession
Session APIs - Dial a number using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createAudioSession(roomId, participantId, sourceTN, destinationTN, notifictionData);
Params
roomId
{String}: Room id created usingcreateroom
participantId
{String}: Routing idsourceTN
{String}: 10 digit telephone numberdestinationTN
{String}: 10 digit telephone numbernotifictionData
{String}: Notification payload
joinAudioSession
Session APIs - Accept an incoming call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.joinAudioSession(roomId, roomToken, roomTokenExpiryTime, rtcServer);
Params
roomId
{String}: Room id to joinroomToken
{String}: Room TokenroomTokenExpiryTime
{Number}: Token expiry timertcServer
{Number}: Rtc Server
hold
Session APIs - Hold the call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.hold(sessionId);
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
unhold
Session APIs - Unhold the call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.unhold(sessionId);
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
mergeCall
Session APIs - Merge the call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.mergeCall(sessionId, sessionIdToBeMerged);
Params
sessionId
{String}: Session as returned inonSessionCreated
(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 inonSessionCreated
(Same as roomid)tone
{String}: Characters (0-9, A, B, C, D, *, #)
endAudioSession
Session APIs - End the call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endAudioSession(sessionId);
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
createVideoSession
Session APIs - Create a video session using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createVideoSession(roomId, videoSessionConfig);
Params
roomId
{String}: Session as returned bycreateroom
videoSessionConfig
{JSON}: Video Session confignotificationData
{String}: Notification payload
joinVideoSession
Session APIs - Join a video session using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.joinVideoSession(roomId, videoSessionConfig);
Params
roomId
{String}: Session as returned bycreateroom
videoSessionConfig
{JSON}: Video Session configroomToken
{String}: Room TokenroomTokenExpiryTime
{Number}: Token expiry timertcServer
{Number}: Rtc Server
endVideoSession
Session APIs - End the video call using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endVideoSession(sessionId);
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
createChatSession
Session APIs - Create a chat session using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.createChatSession(RoomId, name);
Params
roomId
{String}: RoomId as returned by createroomname
{String}: Profile name
endChatSession
Session APIs - End a chat session using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.endChatSession(RoomId);
Params
roomId
{String}: RoomId as returned by createroom
sendChatMessage
Session APIs - Send a chat message using Example
import RTCSdk from 'react-native-iris-sdk';
RTCSdk.sendChatMessage(RoomId, message, id);
Params
roomId
{String}: RoomId as returned by createroommessage
{String}: Message to be sentid
{String}: Message id
Callbacks
Callback | Parameters | Description |
---|---|---|
onConnected |
None | When connection to backend is sucessful |
onDisconnected |
None | When connection to backend is disconnected |
onConnectionError |
None | Called when there is a connection error |
onSessionCreated |
sessionId |
Called when the call is connecting |
onSessionConnected |
sessionId |
Called when the call is connected |
onSessionDisconnected |
sessionId |
Called when the call is disconnected |
onSessionSIPStatus |
|
Called when there is a change in SIP status |
onChatMessage |
|
Called when a chat message arrives |
onChatMessageAck |
|
Called to ack to sent message |
onChatMessageError |
|
Called when there is a message error |
onSessionParticipantJoined |
|
Called when someone joins the call |
onSessionParticipantLeft |
|
Called when someone left the call |
onSessionParticipantConnected |
|
Called when the session is connected with a given participant |
onSessionDominantSpeakerChanged |
|
Called when dominant speaker changes |
onStreamError |
None | Called when there is a error getting the stream |
onLocalStream |
|
Called when local stream is created, use IrisVideoView to render the same |
onRemoteAddStream |
|
Called when remote stream is created, use IrisVideoView to render the same |
onRemoteRemoveStream |
|
Called when remote stream is deleted |
IrisVideoCallView
react component
Video Calling APIs - Deprecated
IrisRoomContainer
react component
Video Calling APIs - 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
Name | Type | Description |
---|---|---|
Type |
String |
|
EnablePreview |
boolean |
|
audioConfig |
JSON |
|
videoConfig |
JSON |
|
RoomId |
String | A room Id is retrieved through event manager createroom API |
evmUrl |
String | Event manager url such as evm.iris.comcast.net . |
routingId |
String | Routing id |
token |
String | A valid Iris token |
Callback Props
Callback | Parameters | Description |
---|---|---|
onSessionCreated |
sessionId |
Called when the call is connecting |
onSessionConnected |
sessionId |
Called when the call is connected |
onSessionDisconnected |
sessionId |
Called when the call is disconnected |
onSessionSIPStatus |
|
Called when there is a change in SIP status |
onChatMessage |
|
Called when a chat message arrives |
onChatMessageAck |
|
Called to ack to sent message |
onChatMessageError |
|
Called when there is a message error |
onSessionParticipantJoined |
|
Called when someone joins the call |
onSessionParticipantLeft |
|
Called when someone left the call |
onSessionParticipantConnected |
|
Called when the session is connected with a given participant |
onSessionDominantSpeakerChanged |
|
Called when dominant speaker changes |
onStreamError |
None | Called when there is a error getting the stream |
onLocalStream |
|
Called when local stream is created, use IrisVideoView to render the same |
onRemoteAddStream |
|
Called when remote stream is created, use IrisVideoView to render the same |
onRemoteRemoveStream |
|
Called when remote stream is deleted |
onEventHistory |
Called with array of events as returned by event manager |
Called when event history is retrieved |
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();
Name | Type | Description |
---|---|---|
muteAudio |
function |
|
unmuteAudio |
function |
|
startVideoPreview |
function |
|
stopVideoPreview |
function |
|
flipCamera |
function |
|
sendChatMessage |
function |
|
endChatSession |
function |
|
endAudioSession |
function |
|
endVideoSession |
function |
|
syncMessages |
function |
|