Let's integrate our SDK in few minutes

Quick Start#

SDK for React#

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

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

note

If you're looking for the fastest way to build your app’s UI with MirrorFly 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 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 SDK into Your React App#

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";

SDK Integration for React#

warning

Skip this part if you are already installed the SDK using NPM.

Step 1: To download the files from the React SDKs, click on the Download button.

Download SDK Files

Download

Step 2: 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";

Initialize SDK#

caution

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

To begin with the initialization process of the 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

When you are in the trial mode, by default the sandbox servers will be used. After purchase it will be upgraded to dedicated server.

const connectionListener = (res) => {};
const callStatusListener = (res) => {};
const userTrackListener = (res) => {};
const muteStatusListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callUserJoinedListener = (res) => {};
const callUserLeftListener = (res) => {};
const callConnectionQualityListener = (res) => {};

const initializeObj = {
  licenseKey: "XXXXXXXXXXXXXXXXX",
  callbackListeners: {
    connectionListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    callUserJoinedListener,
    callUserLeftListener,
    callConnectionQualityListener
  },
};

await SDK.initializeSDK(initializeObj);

Request Params#

Arguments	Description	Type	Required
licenseKey	Mirrorfly's License Key	String	true
callbackListeners	Check here for callback listerners	Object	true

Response Params#

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

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. User identifier can only contain lowercase alphanumeric characters, hyphens (-), and underscores (_)	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.

note

If you want to use your own Id, you can use the userJid in the registration response.

Response Params#

Arguments	Description	Type
statusCode	Status Code	Number
message	Success/Error Message	String
data	Username, Password, isProfileUpdated, isSandbox, userJid	Object

Sample Response:#

{
  statusCode: 200,
  message: "Success",
  data: {
    username: "123456789",
    password: "987654321",
    isProfileUpdated: true,
    isSandbox: true,
    userJid: "1234567890@xmppdomain"
  }
}

caution

userJid 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

Preparing user jid#

To generate a JID for any user, use the below method.

const userJid = SDK.getJid(USER_NAME)

Argument	Description	Type
USER_NAME	unique username which we get from `Register` response.	String

Create meet link#

Initiate a meet by creating the meet link using the createMeetLink method. Once the meet link has been created successfully, you can able to share it with the other users/groups.

caution

If Group call feature is unavailable for your plan, then it will throw 403 exception

SDK.createMeetLink();

Response Format#

{
  statusCode: `STATUS_CODE`,
  message: `ERROR|SUCCESS message`,
  data: "ehl-niyc-wcc"
}

Response Params#

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