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
;
1) Outgoing Call
- API
RTCSdk --> 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
RTCSdkacceptnotificationPayload 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
4) Call Features
RTCSdk
RTCSdk
RTCSdk
RTCSdk
RTCSdk
RTCSdk
- 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
- Parameters
Property | Type | Values |
---|---|---|
callId | string | Unique Id for the call |
status | string | initializing,ready,dialing,ringing,accepting,connected,disconnected |
- callback
- 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
- 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.
;
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;
- 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
- Callback events
// Observe eventsRTCSdkevents;RTCSdkevents;RTCSdkevents;RTCSdkevents;
How to listen events from RTCHelper
RTCSdkEventEmitter; RTCSdkEventEmitter; RTCSdkEventEmitter;
Usage - Examples
;
- Make connection using
iristoken
androutingid
// Observe eventsRTCSdkevents;RTCSdkevents;RTCSdkevents;RTCSdkevents; // Call connection method RTCSdk;
- Make an outgoing PSTN call using IRIS SDK
RTCSdkevents;RTCSdkevents;RTCSdkevents;RTCSdkevents;// Observe eventsRTCSdkevents;
- 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
connectUsingServer
Connection APIs - Make a connection using Example
;RTCSdk;
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
;RTCSdk;
Params
- None
createAudioStream
Stream APIs - Create a audio only stream using Example
;RTCSdk;
Params
- None
createVideoStream
Stream APIs - Create a video stream using Example
;RTCSdk;
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
;RTCSdk;
Params
- None
stopPreview
Stream APIs - Stop a preview using Example
;RTCSdk;
Params
- None
mute
Stream APIs - Mute audio using Example
;RTCSdk;
Params
- None
unmute
Stream APIs - Un-mute audio using Example
;RTCSdk;
Params
- None
flip
Stream APIs - Flip the camera using Example
;RTCSdk;
Params
- None
createAudioSession
Session APIs - Dial a number using Example
;RTCSdk;
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
;RTCSdk;
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
;RTCSdk;
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
unhold
Session APIs - Unhold the call using Example
;RTCSdk;
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
mergeCall
Session APIs - Merge the call using Example
;RTCSdk;
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
;RTCSdk;
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
;RTCSdk;
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
createVideoSession
Session APIs - Create a video session using Example
;RTCSdk;
Params
roomId
{String}: Session as returned bycreateroom
videoSessionConfig
{JSON}: Video Session confignotificationData
{String}: Notification payload
joinVideoSession
Session APIs - Join a video session using Example
;RTCSdk;
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
;RTCSdk;
Params
sessionId
{String}: Session as returned inonSessionCreated
(Same as roomid)
createChatSession
Session APIs - Create a chat session using Example
;RTCSdk;
Params
roomId
{String}: RoomId as returned by createroomname
{String}: Profile name
endChatSession
Session APIs - End a chat session using Example
;RTCSdk;
Params
roomId
{String}: RoomId as returned by createroom
sendChatMessage
Session APIs - Send a chat message using Example
;RTCSdk;
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 |
|