Integrate React Native Audio Call SDK for App in 30 Mins

Quick Start#

Call SDKs for React Native#

With CONTUS MirrorFly Call SDK for react native app, you can easily add real-time calls features to your client app within 30 minutes.

note

If you're looking for the fastest way to build your app’s UI with MirrorFly Call SDK, you can use our sample apps. To get our sample apps, click here

Requirements#

With MirrorFly React Native, make sure that you install all the below mentioned peer dependencies with their specific versions.

Node - 14.20.0
npm - 6.14.10
react-native >= 0.69.12

Getting Started#

Things To Be Noted Before You Get Started#

SDK License Key#

caution

Skip this part if you are already having your license key.

To integrate MirrorFly Call SDK into your app, you will need a SDK License Key. The MirrorFly server will use this license key to authenticate the SDK in your application.

To get the License Key,#

Step 1: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.

Step 2: Login to your Account

Step 3: Get the License key from the application Info’ section

license-key

Integrate Call SDK into Your React Native App#

CONTUS MirrorFly Call for React Natvive, makes the in-app call development process easy with all the essential messaging features

Integrate Using Npm package#

note

Install mirrorfly-reactnative-sdk (https://www.npmjs.com/package/mirrorfly-reactnative-sdk) npm package by using the below command

Step 1: Install Mirrorfly Sdk in your application

npm i mirrorfly-reactnative-sdk

Step 2: Import the SDK into your application where you want

import { SDK } from "mirrorfly-reactnative-sdk";

Terminology#

The below are the common keywords/terminologies used in SDKs with their descriptions

Keyword	Description
`userId`	Unique ID assigned for each user Ex: 12345678 (any alphanumeric). The below characters is not allowed in userId: U+0022 (") U+0026 (&) U+0027 (') U+002F (/) U+003A (:) U+003C (<) U+003E (>) U+0040 (@) userID should follow below specification: https://xmpp.org/extensions/xep-0106.html
`userJid`	userID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
`groupJid`	Unique ID assigned for each group Ex: group123456 (any alphanumeric). GroupJID = groupID +@mix.+domain of the chat server Ex: group123456@mix.xmpp.mirrorfly.dev.contus.us`

Adding NPM package dependencies to integrate the calls SDK#

Add the chat related dependencies as mentioned here. And then add the calls dependencies as given below.

{
   // Add chat related dependencies. And then add the below calls related dependencies
   "react-native-webrtc": "118.0.5", // must use version "118.0.2"
   "react-native-background-timer": "2.*.*"
  }

Initialize calls SDK#

To begin with the initialization process of the calls SDK you are required to have certain data that responds to the changes in the connection status in the client's app.

Now, paste the license key on the licensekey param and use the below given method to pass these data through the SDK for further processing.

note

You can find the sandbox server details in the further Sandbox section for testing purposes.

const incomingCallListener = (res) => {};
const callStatusListener = (res) => {};
const userTrackListener = (res) => {};
const muteStatusListener = (res) => {};
const missedCallListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callSwitchListener = (res) => {};
const userCallLogListener = (res) => {};

const helper = {}

const initializeObj = {
  apiBaseUrl: `API_URL`,
  licenseKey: `LICENSE_KEY`,
  isTrialLicenseKey: `TRIAL_MODE`,
  callbackListeners: {
    connectionListener,
    incomingCallListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    missedCallListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    callSwitchListener,
    userCallLogListener,
    helper
  },
};
await SDK.initializeSDK(initializeObj);

Request Params#

Arguments	Description	Type	Required
apiBaseUrl	API Base URL for Backend	String	true
licenseKey	Mirrorfly's License Key	String	true
isTrialLicenseKey	if `true` Trial Mode will be Enabled	Boolean	false
callbackListeners	Check here for callback listerners	Object	true

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String

Sandbox Details#

The apiUrl and licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.

license-key

function connectionListener(response) {
  if (response.status === "CONNECTED") {
    console.log("Connection Established");
  } else if (response.status === "DISCONNECTED") {
    console.log("Disconnected");
  }
}

const initializeObj = {
  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener
  },
};
await SDK.initializeSDK(initializeObj);

note

To learn more about callback listeners, go to the Callback Event Listener Section.

Example Response#

{
  "statusCode": 200,
  "message": "Success"
}

Create a User#

caution

Skip this part if you are already integrated the register and connect method.

Register User#

Step 1: You can use the below given method to register a new user.

Step 2: Once you are registered, you will be provided with a username and password that you can utilize to make the connection with the server via connect method.

await SDK.register(`USER_IDENTIFIER`, `ANDROID_FCM_TOKEN`, `IOS_VOIP_TOKEN`, `IS_PRODUCTION`);

Request Params#

Status	Description	Type	Required
`USER_IDENTIFIER`	Unique Id to Register the User	String	true
`ANDROID_FCM_TOKEN`	FCM token for android device	String	true
`IOS_VOIP_TOKEN`	VOIP token for iOS device	String	true
`IS_PRODUCTION`	Whether or not the app is running in production environment	Boolean	true

note

IS_PRODUCTION param should be passed true when the app is running in release mode and should be passed false if it is in debug mode.

Sample code for register user#

import messaging from '@react-native-firebase/messaging';
import RNVoipPushNotification from 'react-native-voip-push-notification';


RNVoipPushNotification.addEventListener('register', async voipToken => {
   const fcmToken = await messaging().getToken();
   SDK.register(userIdentifier, fcmToken, voipToken, process.env?.NODE_ENV === "production");
});

// =====  register for VOIP =====
RNVoipPushNotification.registerVoipToken();

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String
data	Username and Password	Object

Sample Response:#

{
  statusCode: 200,
  message: "Success",
  data: {
    username: "123456789",
    password: "987654321"
  }
}

caution

username is the unique id that allows you to connect with other users to send or receive messages.

Connect to MirrorFly Server#

Step 1: You can use the credentials that you have obtained while registration to make the connection with the server.

Step 2: Once you have created the connection successfully, you will be responded with an approval message as ‘statusCode of 200’ or else will get an execution error.

Step 3: With this you can also trace the connection status that you receive in connectionListener callback function.

Step 4: If you face any error while making a connection with the server, you will receive an error message with callback.

await SDK.connect(`USERNAME`, `PASSWORD`);

Request Params#

Status	Description	Type	Required
`USERNAME`	Username	String	true
`PASSWORD`	Password	String	true

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String

Sample Response:#

{
  message: "Login Success",
  statusCode: 200
}

note

To learn more about all possible logins and profile related setup, go to Profile Section.