Let's integrate our SDK in few minutes

Quick Start#
Download SDK Files
Download

Call SDKs for Web#

CONTUS MirrorFly Call SDK with its robust features and functionalities makes the integration more efficient and easy for every client’s app.

On client-side implementation, our call SDK allows you to initialize and configure the call easily. On server-side implementation, we ensure the most reliable infra-management services for the call within the app.

This guided documentation here demonstrates the process as how to install the call SDK in your app so that you can send and receive the messages without any interruption within a few simple steps.

note

CONTUS MirrorFly Call SDKs use the fastest way in action, to experience the same you must use our trial app to enhance your existing call app. So just download our sample app and make a start with your app development. Click here to download the sample app.

Supported browsers#

BrowserSupported versions
Edge13 or higher
Chrome16 or higher
Firefox11 or higher
Safari7 or higher

Make a note of Below Points Before Making a Start#

PART I - SDK License Key#

Before moving forward with CONTUS MirrorFly Call SDK integration, it is necessary for an SDK to be authenticated by the MirrorFly server using the license key for further processing.

caution

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

The below given is the process that needs to be followed to obtain a license key:

Step 1: Get started - Signup into MirrorFly Console page (https://console.mirrorfly.com/register) and create a free MirrorFly account

Step 2: While creating an account you can provide your basic details that includes your name, organization details, work email, and contact number

Step 3: As soon as you got into the account! You get access to move across the entire page on your MirrorFly account. Click on the ‘Overview page’ and get access to the license key as well as downloadable JavaScript SDK files to proceed further with integration process

Step 4: Copy the license key from the ‘Application info’ section

license-key

PART II - Integrate Call SDK into Your Web App#

caution

If you are already integrated the SDK, you can add only the adapter-latest.js in your application.

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

Since it’s the core of all the languages - Importing JavaScript into the application is the fundamental step to proceed further before using any language.

Call SDK Integration for Javascript#

Step 1: To download the files from the JavaScript SDKs, click on the Download button, that will take you to the top of this guided documentation page.

Step 2: Click on the given Download button and extract the files from the downloaded zip file and copy them into your application.

Step 3: Once the file has been copied, include the script file into your index.html

<script src="./index.js"></script>
<script src="./socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Step 4: Now you have the SDK object available in your application to proceed further with initialization.

Step 5: Once, you have successfully got the SDK into your application. It’s time to go with your client’s preferred language implementation.

Call SDK Integration for React#

Step 1: Include script file into your index.html

<script src="./index.js"></script>
<script src="./socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Step 2: Create a new file SDK.js in the project root and paste the below code,

const SDK = window.SDK;
export default SDK;

Step 3: Import the SDK into your application

import SDK from "./SDK";

Call SDK Integration for Angular#

note

Minimum Requirement Angular version 8.3.29

Step 1: Copy all the extracted files from the SDK folder.

Step 2: Create a new folder inside your project's Root folder and paste all the copied files into it.

Step 3: Open your angular.json and search for the property by navigating the buttons : build => options => scripts.

Step 4: Here, you can find the array of scripts wherein you can add the relative file paths of respective downloaded SDK JS files.

Step 5: Now, add the below codes in the Root component (before @Component Decorator).

declare var SDK: any;

Step 6: Once you have added the SDK into Root component’s ngOnInit, initialize our SDKs within angular's initialization method.

PART III - Terminology#

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

KeywordDescription
userIdUnique 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
userJiduserID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
groupJidUnique 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`

Initialize Call SDK#

caution

If you already initialized the SDK, you can add the below callback listeners to receive call related events.

To begin with the initialization process of the call 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 callSwitchListener = (res) => {};
const inviteUsersListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callUserJoinedListener = (res) => {};
const callUserLeftListener = (res) => {};
const helper = {}

Request Params#

ArgumentsDescriptionTypeRequired
apiBaseUrlAPI Base URL for BackendStringtrue
licenseKeyMirrorfly's License KeyStringtrue
isTrialLicenseKeyif true Trial Mode will be EnabledBooleanfalse
callbackListenersCheck here for callback listernersObjecttrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

Sandbox Details#

const incomingCallListener = (res) => {};
const callStatusListener = (res) => {};
const userTrackListener = (res) => {};
const muteStatusListener = (res) => {};
const missedCallListener = (res) => {};
const callSwitchListener = (res) => {};
const inviteUsersListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callUserJoinedListener = (res) => {};
const callUserLeftListener = (res) => {};
const helper = {}
const initializeObj = {
apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
licenseKey: "XXXXXXXXXXXXXXXXX",
isTrialLicenseKey: true,
callbackListeners: {
incomingCallListener,
callStatusListener,
userTrackListener,
muteStatusListener,
missedCallListener,
callSwitchListener,
inviteUsersListener,
mediaErrorListener,
callSpeakingListener,
callUsersUpdateListener,
callUserJoinedListener,
callUserLeftListener,
helper
},
};
await SDK.initializeSDK(initializeObj);
note

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

Example Response#

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

PART IV - 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`);

Request Params#

StatusDescriptionTypeRequired
USER_IDENTIFIERUnique Id to Register the UserStringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString
dataUsername and PasswordObject

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#

StatusDescriptionTypeRequired
USERNAMEUsernameStringtrue
PASSWORDPasswordStringtrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

PART V - Make a voice call#

Initiate a call by providing the callee’s user JID into the makeVoiceCall method. Once the call initiated successfully, a callStatusListener callback will be triggered and callee user call status will be received here.

caution

If One to one call feature is unavailable for your plan, then it will throw 403 exception

note

To generate your own or others JID using the unique username got in registration response, use the const userJid = SDK.getJid(USER_ID) method.

await SDK.makeVoiceCall(['USER1_JID']);

Request Params#

ParamDescriptionTypeRequired
[USER_JID]User JIDArraytrue

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

PART VI - Receive incoming call#

To receive an incoming call, a incomingCallListener callback should already be registered in the callee’s client app. Whenever a user make call to a user, the callee user will receive the calling data in this callback.

// Callback Response Argument Structure
{
allUsers:["USER1_JID", "USER2_JID",...],
callTime: 1615878543994005,
callType: "audio|video",
groupId: null|GROUP_ID,
roomId: "wmupbheao",
status: "calling",
toUsers: ["USER_JID"]
userJid: "FROM_USER_JID"
}

Response Params#

ArgumentsDescription
allUsersJID's of the users in the call.
callTimeCall intiated time in timestamp format.
callTypeDescribe the audio or video call.
groupIdContain the group ID If the call is group call. Otherwise, the value will be NULL.
roomIdCall room ID.
statusStatus of the call(calling, ringing, connecting, connected).
toUsersArray of User JID of callee users.
userJidUser JID who intiated the call

Answer a call#

To answer a call use the answerCall method.

await SDK.answerCall();

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString

End a call#

To end a call use the endCall method.

await SDK.endCall();

Response Params#

ArgumentsDescriptionType
statusCodeStatus CodeNumber
messageSuccess/Error MessageString