This repository contains samples of how to use MirrorFly to add in-app messaging, voice calling and video calling using React. You can find more information in the React SDK Documentation on MirrorFly’s official website.

MirrorFly React SDK is a set of prebuilt components that allows you to easily add in-app messaging and calling capabilities with all the essential communication features. Our development kit includes customizable features with support for deployment across any server. Every feature and workflow can be customized, with full access to source code and complete control over the security and infrastructure.

MirrorFly helps build omni-channel communication apps for any kind of business

💬 In-app Messaging - Connect users individually or as groups via instant messaging features.
🎯 HD Video Calling- Engage users over face-to-face conversations anytime, and from anywhere.
🦾 HQ Voice Calling - Deliver crystal clear audio calling experiences with latency as low as 3ms.
🤖 AI Voice Agent - Build custom AI voicebots that can understand, act and respond to user questions.
🤖 AI Chatbot - Deploy white-label AI chatbots that drive autonomous conversations across any web or mobile app.
🦾 Live Streaming - Broadcast video content to millions of viewers around the world, within your own enterprise app.

To get the License Key,
Step 1: Register here to get a MirrorFly User account.
Step 2: Login to your Account
Step 3: Get the License key from the application Info’ section

![license-key][image2]

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

Step 1: To download the files from the React SDKs, click on the Download button.
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";

To begin the chat SDK initialization, you need certain data to track connection status changes in the client app. Paste your license key into the licenseKey parameter and use the method below to pass this data to the SDK for further processing.

const initializeObj = {
  licenseKey: `LICENSE_KEY`,
  callbackListeners: {},
};

await SDK.initializeSDK(initializeObj);

Step 1: Use the method below to register a new user.
Step 2: After registration, you will receive a username and password, which can be used to connect to the server via the connect method.

await SDK.register(`USER_IDENTIFIER`);

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

• Step 1: Use the credentials obtained during registration to connect to the server.
• Step 2: Upon a successful connection, you will receive an approval message with a statusCode of 200; otherwise, an execution error will occur.
• Step 3: You can monitor the connection status via the connectionListener callback function.
• Step 4: If an error occurs while connecting to the server, an error message will be returned through the callback.

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

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

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

const userJid = SDK.getJid(USER_NAME);

Finally, to send a message to another user you can use the below given method,

await SDK.sendTextMessage({
  toJid: "",
  messageText: "",
});

status code: "", // Number - status code
message: "",     // String - Success/Error Message
data: {
  chatType: "",       // String - Chat Type - "chat"
  createdAt: "",      // String - Message Created Time
  deleteStatus: "",   // Number - Delete Status
  favouriteBy: "",    // String - Favourited By - User
  favouriteStatus: "",// Number - Favourite status
  fromUserId: "",     // String - From User Id
  fromUserJid: "",    // String - From User Jid
  metaData: {},       // Object - Meta data for the message
  msgBody: {
    mentionedUsersIds: [], // Array of mentioned users
    message: "",           // String - Message Body
    message_type: "",      // String - Message Type
    nickname: "",          // String - nick name
  },
  msgId: "",           // String - Unique Message Id
  msgType: "",         // String - Message Type
  publisherId: "",     // String - user Id
  timestamp: 1681185232000, // Number - TimeStamp - Milliseconds
  toUserId: "",        // String - toUser Id
  toUserJid: "",       // String - toUser Jid
  topicId: "",         // String - Topic id for the message
}

To receive messages from another user, implement the messageListener function. This function is triggered whenever a new message or related event occurs in one-to-one or group chats. Additionally, during SDK initialization, add the following callback method to handle these events.

function messageListener(response) {
  console.log("Message Listener", response);
}

Initiate a call by passing the callee’s user JID to the makeVoiceCall method. Once the call is successfully initiated, the callStatusListener callback will be triggered, providing the callee’s call status.

SDK.makeVoiceCall(['USER_JID'], null, metadata, (success, error) => {
  if (error) {
    // Error occured while making the call
  }
  if (success) {
    // Call has been made successfully
  }
});

{
  "statusCode": 200, // Number - status code
  "message": "",     // String - Success/Error Message
  "callType": "",    // String - Call Type - "audio"
  "roomId": ""       // String - Unique room ID
}

<html>
  <audio id="audio" autoplay playsinline></audio>
  <script>
    //let track = TRACK_OBJECT from the callback method
    //let element = ELEMENT_OBJECT in which you need to play the audio
    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 attach the track object received in the callback method to the appropriate audio element, based on the type of track provided.

Initiate a call by passing the callee’s user JID to the makeVideoCall method. Once the call is successfully initiated, the callStatusListener callback will be triggered, providing the callee’s call status.

SDK.makeVideoCall(['USER_JID'], null, metadata, (success, error) => {
  if (error) {
    // Error occured while making the call
  }
  if (success) {
    // Call has been made successfully
  }
});

{
  "statusCode": 200, // Number - status code
  "message": "",     // String - Success/Error Message
  "callType": "",    // String - Call Type - "video"
  "roomId": ""       // String - Unique room ID
}

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

Attach the track object received in the callback method to the appropriate audio element, depending on the type of track provided.

Initiate a group voice call by passing the callee’s user JID and Group ID to the makeVoiceCall method. Once the call is successfully initiated, the callStatusListener callback will be triggered, providing the call status of each callee.

SDK.makeVoiceCall(
  ['USER1_JID', 'USER2_JID'...],
  'GROUP_ID',
  metadata,
  (success, error) => {
    if (error) {
      // Error occured while making the call
    }
    if (success) {
      // Call has been made successfully
    }
  }
);

{
  "statusCode": 200, // Number - status code
  "message": "",     // String - Success/Error Message
  "callType": "",    // String - Call Type - "audio"
  "roomId": ""       // String - Unique room ID
}

Initiate a group video call by passing the callee’s user JID and Group ID to the makeVideoCall method. Once the call is successfully initiated, the callStatusListener callback will be triggered, providing the call status of each participant.

await SDK.makeVideoCall(
  ['USER1_JID', 'USER2_JID'...],
  'GROUP_ID',
  metadata,
  (success, error) => {
    if (error) {
      // Error occured while making the call
    }
    if (success) {
      // Call has been made successfully
    }
  }
);

{
  "statusCode": 200, // Number - status code
  "message": "",     // String - Success/Error Message
  "callType": "",    // String - Call Type - "video"
  "roomId": ""       // String - Unique room ID
}

To receive an incoming call, the incomingCallListener callback must be registered in the callee’s client app. When a user initiates a call, the callee receives the call data through this callback.

// Callback Response Argument Structure
{
  allUsers: ["USER1_JID", "USER2_JID", ...],
  callMode: "onetoone|onetomany",
  callTime: 1681905421215,
  callType: "audio|video",
  from: "USER_JID|FROM_USER_JID",
  groupId: null | GROUP_ID,
  localUser: BOOLEAN,
  roomId: "wmupbheao",
  roomLink: "ndy-bmkb-eui",
  status: "calling",
  to: "FROM_USER_JID|GROUP_JID",
  toUsers: ["USER_JID"],
  userDetails: {},
  userJid: "FROM_USER_JID",
  usersStatus: [{}]
}

To answer a call use the answerCall method.

SDK.answerCall((success, error) => {
  if (error) {
    // Error occured while answering the call
  }
  if (success) {
    // Call has been answered successfully
  }
});

To end a call use the endCall method.

SDK.endCall((success, error) => {
  if (error) {
    // Error occured while ending the call
  }
  if (success) {
    // Call has been ended successfully
  }
});

To decline a call use the declineCall method.

SDK.declineCall((success, error) => {
  if (error) {
    // Error occured while declining the call
  }
  if (success) {
    // Call has been declined successfully
  }
});

MirrorFly offers full freedom with the hosting options:
Self-hosted: Deploy your client on your own data centers, private cloud or third-party servers.
Check out our multi-tenant cloud hosting
Cloud: Host your client on MirrorFly’s multi-tenant cloud servers.
Check out our multi-tenant cloud hosting

MirrorFly offers a fully-built client SafeTalk that is available in:
![Rocket.Chat on Apple App Store][image3] ![Rocket.Chat on Google Play][image4]
You can use this client as a messaging app, or customize, rebrand & white-label it as your chat client.

• Developer Documentation
• Product Tutorials
• Dart Documentation
• Pubdev Documentation
• Npmjs Documentation
• On-premise Deployment
• See who's using MirrorFly

Need a tech team to build your enterprise app? Hire a full team of experts. From concept to launch, we handle every step of the development process. Get a high-quality, fully-built app ready to launch, carefully built by industry experts

If you’d like to take help when working with our solution, feel free to contact our experts who will be available to help you anytime of the day or night.

We're always on the lookout for talented developers, support specialists, and product managers. Visit our careers page to explore current opportunities.

• Blog
• Facebook
• Twitter
• LinkedIn
• Youtube
• Instagram