Let's integrate our SDK in few minutes

Quick Start#

Download SDK Files

Call SDKs for Web#

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

Through our client SDK, you can initialize and configure chat into your app with minimal efforts.

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

Getting Started#

Supported browsers#

Browser	Supported versions
Edge	13 or higher
Chrome	16 or higher
Firefox	11 or higher
Safari	7 or higher

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: Sign up for a MirrorFly Account

Step 2: Log into your Account

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

license-key

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>

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.

Integrate Using Npm package#

note

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

Step 1: Install Mirrorfly Sdk in your application

npm i mirrorfly-sdk

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

import * as SDK from "mirrorfly-sdk";

Call SDK Integration for React#

Step 1: To download the files from the React 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>

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

const SDK = window.SDK;
export default SDK;

Step 5: Import the SDK into your application

import SDK from "./SDK";

Integrate Using Npm package#

note

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

Step 1: Install Mirrorfly Sdk in your application

npm i mirrorfly-sdk

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

import * as SDK from "mirrorfly-sdk";

Call SDK Integration for Angular#

note

Minimum Requirement Angular version 8.3.29

Step 1: To download the files from the Angular 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: Create a new folder inside your project's Root folder and paste all the copied files into it.

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

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

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

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

declare var SDK: any;

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

Integrate Using Npm package#

note

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

Step 1: Install Mirrorfly Sdk in your application

npm i mirrorfly-sdk

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

import * as SDK from "mirrorfly-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`

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 = {}

const initializeObj = {
  apiBaseUrl: "XXXXXXXXXXXXXXXXX",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener,
    incomingCallListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    missedCallListener,
    callSwitchListener,
    inviteUsersListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    callUserJoinedListener,
    callUserLeftListener,
    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#

const connectionListener = (res) => {};
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: {
    connectionListener,
    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"
}

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#

Status	Description	Type	Required
`USER_IDENTIFIER`	Unique Id to Register the User. We accept only the AlphaNumeric String	String	true
`FORCE_REGISTER`	`default value true` provide `true` to force the old session logged out when the registered user has reached the maximum number of multiple-sessions or provide `false` to allow registration till the maximum no of multiple-sessions reached	Boolean	false
`registerMetaData`	`registerMetaData` is an optional parameter to provide MetaData of user. `Maximum size is 3`	Object	false

Request Input for registerMetaData#

Arguments	Description	Type
key	Name of the Key	String
value	Name of the value	String or Boolean or Number

caution

If FORCE_REGISTER is false and if it reached the maximum no of multiple-sessions, then registration will not success and it will throw a 405 exception. Either FORCE_REGISTER should be true or one of the existing session need to be logged out to continue registration.

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",
    isProfileUpdated: true,
    isSandbox: true
  }
}

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

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#

Param	Description	Type	Required
[`USER_JID`]	User JID	Array	true

Response Params#

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

note

To receive the user track, a userTrackListener callback should already be registered in the caller's client app. Whenever you make the call to a user, you will receive your own track and the callee's track in the same callback method. To differentiate the user, You can use the 'localUser' and 'userJid' param. You will receive both Audio and Video track in the same callback method.

Sample Javascript code to play the track#

<html>
  <audio id="audio" autoplay playsinline></audio>
  <video id="video" autoplay playsinline></video>
  <script>
    //let track = TRACK_OBJECT from the callback method
    //let element = ELEMENT_OBJECT in which you need to play the audio/video
    let stream = new MediaStream([track]);
    try {
        element.srcObject = stream;
    } catch (e) {
        try {
          element.src = URL.createObjectURL(stream);
        } catch (e) {
          console.error("Error attaching stream to element", e);
      }
  }
  </script>
</html>

You need to supply the track object which was received in the callback method to the audio/video element based on the track type that you have received.

warning

For the Audio/Video call, you shouldn't play your own Audio track.

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: 1681905421215,
    callType: "audio|video",
    groupId: null|GROUP_ID,
    localUser: BOOLEAN,
    roomId: "wmupbheao",
    roomLink: "ndy-bmkb-eui"
    status: "calling",
    toUsers: ["USER_JID"],
    userDetails: {},
    userJid: "FROM_USER_JID",
    usersStatus: [{}]
}

Response Params#

Arguments	Description
allUsers	JID's of the users in the call.
callTime	Call intiated time in timestamp format.
callType	Describe the audio or video call.
groupId	Contain the group ID If the call is group call. Otherwise, the value will be NULL.
localUser	To determine local user or not
roomId	Call room ID.
roomLink	Call room Link.
status	Status of the call(calling, ringing, connecting, connected).
toUsers	Array of User JID of callee users.
userDetails	User details object of the callee users.
userJid	User JID who intiated the call
usersStatus	Array of users with the details of the call.

Answer a call#

To answer a call use the answerCall method.

await SDK.answerCall();

Response Params#

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

note

To receive the user track, a userTrackListener callback should already be registered in the caller's client app. Whenever you answer the call, you will receive your own track and the caller's track in the same callback method itself. To differentiate the user, You can use the 'localUser' and 'userJid' param. You will receive both Audio and Video track in the same callback method.

Sample Javascript code to play the track#

<html>
  <audio id="audio" autoplay playsinline></audio>
  <video id="video" autoplay playsinline></video>
  <script>
    //let track = TRACK_OBJECT from the callback method
    //let element = ELEMENT_OBJECT in which you need to play the audio/video
    let stream = new MediaStream([track]);
    try {
        element.srcObject = stream;
    } catch (e) {
        try {
          element.src = URL.createObjectURL(stream);
        } catch (e) {
          console.error("Error attaching stream to element", e);
      }
  }
  </script>
</html>

You need to supply the track object which was received in the callback method to the audio/video element based on the track type that you have received.

warning

For the Audio/Video call, you shouldn't play your own Audio track.

End a call#

To end a call use the endCall method.

await SDK.endCall();

Response Params#

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