{"id":23442,"date":"2022-10-21T22:12:21","date_gmt":"2022-10-21T16:42:21","guid":{"rendered":"https:\/\/www.mirrorfly.com\/blog\/?p=23442"},"modified":"2026-02-13T18:11:20","modified_gmt":"2026-02-13T12:41:20","slug":"build-a-video-chat-app-using-react-js","status":"publish","type":"post","link":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/","title":{"rendered":"How to Build a React Video Chat App in 2026?"},"content":{"rendered":"\n<p>This article will focus on building a custom video chat app by directly integrating pre-built audio and video features. We\u2019ll be using MirrorFly SDKs and React to create a robust <a href=\"https:\/\/www.mirrorfly.com\/react-chat-sdk.php\">live chat in react js<\/a> app with real-time video and audio features.&nbsp;<\/p>\n\n\n\n<p><em><strong>I\u2019ll walk you through,<\/strong><\/em><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Where to get MirrorFly License Key<\/li>\n\n\n\n<li>Integrate the chat SDK into your Web <a href=\"https:\/\/www.mirrorfly.com\/build-video-chat-app.php\" target=\"_blank\" rel=\"noreferrer noopener\">Video Chat App<\/a><\/li>\n\n\n\n<li>Connect the Chat Client to MirrorFly Server<\/li>\n\n\n\n<li>Register a User&nbsp;<\/li>\n\n\n\n<li>Send or Recieve Messages<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\"><strong>How to Create a React Video Calling App in 11 Steps<\/strong><\/h2>\n\n\n\n<p>To start <a href=\"https:\/\/www.mirrorfly.com\/tutorials\/build-react-js-chat-app.php\">building your own react video chat app<\/a>, begin by importing the JavaScript SDK followed by the React SDK integration.<\/p>\n\n\n\n<p>Follow the below steps to perform the import.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Get MirrorFly License Key<\/strong><\/h3>\n\n\n\n<p>The first step in creating a web app is to download the <strong>MirrorFly License Key<\/strong>. To do this, follow the below steps as instructed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <a href=\"https:\/\/console.mirrorfly.com\/register\" target=\"_blank\" rel=\"noreferrer noopener\">MirrorFly Console Page<\/a><\/li>\n\n\n\n<li>Fill in your basic details on the registration page<\/li>\n\n\n\n<li>Click on <strong>Sign up<\/strong>&nbsp;<\/li>\n\n\n\n<li>Verify your account using your registered email<\/li>\n<\/ul>\n\n\n\n<p>Once you create your account,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login to your account<\/li>\n\n\n\n<li>Go to the Overview section<\/li>\n\n\n\n<li>Download the<strong> <\/strong><a href=\"https:\/\/www.mirrorfly.com\/javascript-chat-sdk.php\" target=\"_blank\" rel=\"noreferrer noopener\">Javascript SDK<\/a><\/li>\n\n\n\n<li>Next, go to the Application Info section<\/li>\n\n\n\n<li>Copy the <strong>License key<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"cta-wrapper-three\">\n<div class=\"left-wrap\">\n<img decoding=\"async\" src=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2024\/12\/cta-thumbnail-image.webp\" class=\"cta-three-thumbnail\">\n<\/div>\n<div class=\"right-wrap\">\n<summary class=\"heading\">Ready To Integrate <br><span class=\"highlight\">React Video Chat SDK <\/span> Into Your App?<\/summary>\n<ul class=\"cta-three-wrap\">\n<li> \n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12.99\" height=\"12.99\" viewBox=\"0 0 12.99 12.99\">\n  <path id=\"arrow-down-circle\" d=\"M.812,6.495A5.683,5.683,0,1,1,6.5,12.178,5.683,5.683,0,0,1,.812,6.495Zm12.178,0A6.495,6.495,0,1,0,6.5,12.99,6.495,6.495,0,0,0,12.99,6.495ZM6.9,9.337a.406.406,0,0,1-.812,0v-4.7L4.347,6.376A.406.406,0,1,1,3.772,5.8L6.208,3.366a.406.406,0,0,1,.575,0L9.218,5.8a.406.406,0,1,1-.575.575L6.9,4.633Z\" transform=\"translate(12.99) rotate(90)\" fill=\"#ffcf18\" fill-rule=\"evenodd\"\/>\n<\/svg>\nComplete Source Code<\/li>\n<li> \n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12.99\" height=\"12.99\" viewBox=\"0 0 12.99 12.99\">\n  <path id=\"arrow-down-circle\" d=\"M.812,6.495A5.683,5.683,0,1,1,6.5,12.178,5.683,5.683,0,0,1,.812,6.495Zm12.178,0A6.495,6.495,0,1,0,6.5,12.99,6.495,6.495,0,0,0,12.99,6.495ZM6.9,9.337a.406.406,0,0,1-.812,0v-4.7L4.347,6.376A.406.406,0,1,1,3.772,5.8L6.208,3.366a.406.406,0,0,1,.575,0L9.218,5.8a.406.406,0,1,1-.575.575L6.9,4.633Z\" transform=\"translate(12.99) rotate(90)\" fill=\"#ffcf18\" fill-rule=\"evenodd\"\/>\n<\/svg>\nLifetime Data Ownership<\/li>\n<li> \n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12.99\" height=\"12.99\" viewBox=\"0 0 12.99 12.99\">\n  <path id=\"arrow-down-circle\" d=\"M.812,6.495A5.683,5.683,0,1,1,6.5,12.178,5.683,5.683,0,0,1,.812,6.495Zm12.178,0A6.495,6.495,0,1,0,6.5,12.99,6.495,6.495,0,0,0,12.99,6.495ZM6.9,9.337a.406.406,0,0,1-.812,0v-4.7L4.347,6.376A.406.406,0,1,1,3.772,5.8L6.208,3.366a.406.406,0,0,1,.575,0L9.218,5.8a.406.406,0,1,1-.575.575L6.9,4.633Z\" transform=\"translate(12.99) rotate(90)\" fill=\"#ffcf18\" fill-rule=\"evenodd\"\/>\n<\/svg>\nDeploy on Own Server<\/li>\n<\/ul>\n<div class=\"cta-btn-container\"><a href=\"https:\/\/www.mirrorfly.com\/request-demo.php\" class=\"cta--wrapper-button\">Request Demo<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Import Javascript SDK<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extract the files from the SDK zip folder and import them into your app.&nbsp;<\/li>\n\n\n\n<li>After Importing, add the script file to your index.html<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\".\/index.js\"&gt;&lt;\/script&gt;\n&lt;script src=\".\/socket.io.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/webrtc.github.io\/adapter\/adapter-latest.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, continue to add React SDK into the app.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Import React SDK<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Include the React script into your index.html<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\".\/index.js\"&gt;&lt;\/script&gt;\n&lt;script src=\".\/socket.io.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/webrtc.github.io\/adapter\/adapter-latest.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the project root, create a new file SDK.js and configure as follows<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const SDK = window.SDK;\nexport default SDK;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, import the SDK into your <a href=\"https:\/\/www.mirrorfly.com\/tutorials\/build-video-chat-app-for-web.php\" target=\"_blank\" rel=\"noreferrer noopener\">web video chat app<\/a><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import SDK from \".\/SDK\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: <\/strong><strong>Initialization of Call SDK&nbsp;<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This <a href=\"https:\/\/www.mirrorfly.com\/docs\/audio-video\/react\/quick-start\/\">step involves configuring the react video calling SDK<\/a> to handle real-time connection status updates in your client app.<\/li>\n\n\n\n<li>Next, paste the MirrorFly License Key on the license key param, as mentioned in step 1&nbsp;<\/li>\n\n\n\n<li>Pass these data through the SDK using the below method<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const incomingCallListener = (res) =&gt; {};\nconst callStatusListener = (res) =&gt; {};\nconst userTrackListener = (res) =&gt; {};\nconst muteStatusListener = (res) =&gt; {};\nconst missedCallListener = (res) =&gt; {};\nconst callSwitchListener = (res) =&gt; {};\nconst inviteUsersListener = (res) =&gt; {};\nconst mediaErrorListener = (res) =&gt; {};\nconst callSpeakingListener = (res) =&gt; {};\nconst callUsersUpdateListener = (res) =&gt; {};\nconst callUserJoinedListener = (res) =&gt; {};\nconst callUserLeftListener = (res) =&gt; {};\nconst helper = {}<\/code><\/pre>\n\n\n\n<p>Below are the Sandbox details<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const incomingCallListener = (res) =&gt; {};\nconst callStatusListener = (res) =&gt; {};\nconst userTrackListener = (res) =&gt; {};\nconst muteStatusListener = (res) =&gt; {};\nconst missedCallListener = (res) =&gt; {};\nconst callSwitchListener = (res) =&gt; {};\nconst inviteUsersListener = (res) =&gt; {};\nconst mediaErrorListener = (res) =&gt; {};\nconst callSpeakingListener = (res) =&gt; {};\nconst callUsersUpdateListener = (res) =&gt; {};\nconst callUserJoinedListener = (res) =&gt; {};\nconst callUserLeftListener = (res) =&gt; {};\nconst helper = {}\n\nconst initializeObj = {\n  apiBaseUrl: \"https:\/\/api-preprod-sandbox.mirrorfly.com\/api\/v1\",\n  licenseKey: \"XXXXXXXXXXXXXXXXX\",\n  isTrialLicenseKey: true,\n  callbackListeners: {\n    incomingCallListener,\n    callStatusListener,\n    userTrackListener,\n    muteStatusListener,\n    missedCallListener,\n    callSwitchListener,\n    inviteUsersListener,\n    mediaErrorListener,\n    callSpeakingListener,\n    callUsersUpdateListener,\n    callUserJoinedListener,\n    callUserLeftListener,\n    helper\n  },\n};\n\nawait SDK.initializeSDK(initializeObj);<\/code><\/pre>\n\n\n\n<p>The response of the method will look like below<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"statusCode\": 200,\n  \"message\": \"Success\"\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: <\/strong><strong>Registering an App User<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To register a new user, you need to use the below method.<\/li>\n\n\n\n<li>After you register, you&#8217;ll have a username and a password. You can use these credentials to establish a connection with the server.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.register(`USER_IDENTIFIER`);<\/code><\/pre>\n\n\n\n<p>The response of this method will look as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  statusCode: 200,\n  message: \"Success\",\n  data: {\n    username: \"123456789\",\n    password: \"987654321\"\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: <\/strong><strong>Connect the Chat SDK to MirrorFly Server<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once you connect the chat SDK to the server, the approval message will appear as \u2018statusCode of 200\u2019. Otherwise, an execution error may appear.&nbsp;<\/li>\n\n\n\n<li>Next, you can trace the connection status in the connectionListener callback function.<\/li>\n\n\n\n<li>If there are any discrepancies in making the server connection, the SDK will display an error message in the callback.&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.connect(`USERNAME`, `PASSWORD`);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7: Make Video Call<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can start making <a href=\"https:\/\/www.mirrorfly.com\/video-call-solution.php\" target=\"_blank\" rel=\"noreferrer noopener\">live video calls<\/a> by adding the caller\u2019s user JID in makeVideoCall method.<\/li>\n\n\n\n<li>Once you initiate the call, the SDK will trigger the callback callStatusListener and will receive the callee user call status<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.makeVideoCall(&#91;'USER1_JID', 'USER2_JID'...]);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 8: <\/strong><strong>Make Group Video Call&nbsp;<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide the callee\u2019s user JID &amp; Group ID into the makeVideoCall method and initiate the call.&nbsp;<\/li>\n\n\n\n<li>Once you initiate the call, the SDK will trigger the callback callStatusListener and will receive the callee user call status<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.makeVideoCall(&#91;'USER1_JID', 'USER2_JID'...], 'GROUP_ID');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 9: Receive a Call<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You need an incomingCallListener callback that is already registered with the callee\u2019s client app, to receive an incoming call.&nbsp;<\/li>\n\n\n\n<li>The callee will receive the call data in the callback whenever a user calls another user from your app.&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Callback Response Argument Structure\n{\n    allUsers:&#91;\"USER1_JID\", \"USER2_JID\",...],\n    callTime: 1615878543994005,\n    callType: \"audio|video\",\n    groupId: null|GROUP_ID,\n    roomId: \"wmupbheao\",\n    status: \"calling\",\n    toUsers: &#91;\"USER_JID\"]\n    userJid: \"FROM_USER_JID\"\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 10: <\/strong><strong>Call Answer<\/strong><\/h3>\n\n\n\n<p>To answer an incoming call, you need to use the answerCall() method<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.answerCall();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 11: Decline Call<\/strong><\/h3>\n\n\n\n<p>To decline an ongoing call, you need to use the endCall() method<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>await SDK.endCall();<\/code><\/pre>\n\n\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>In this post, you have learned how to create video chat into your web app with React and <a href=\"https:\/\/www.mirrorfly.com\/chat-api-solution.php\">Integrate MirrorFly In-app Chat SDK<\/a> to your app, set up a server connection and make video calls.&nbsp;<\/p>\n\n\n\n<p>I believe this article has done a fair job of educating you on the necessary details to build a react video chat app. I appreciate your feedback on your app-building experience with me.&nbsp;<\/p>\n\n\n\n<p>Also, your suggestion on which topic you\u2019d like me to write next on would be much appreciated as comments below. Bid you bye until I meet you with yet another interesting insight!<\/p>\n\n\n\n<div class=\"cta-wrapper-two\">\n<summary class=\"cta-heading-two\">Build Your <span class=\"highlight\">White Label React JS Video Chat App<\/span><\/summary>\n<p class=\"cta-content-two\">Get 1000+ messaging features along with video and voice calling, into any web or mobile app with end-to-end encryption.<\/p>\n<a href=\"https:\/\/www.mirrorfly.com\/contact-sales.php\" class=\"self-host-cta-btn\">Contact Sales<\/a>\n<ul class=\"cta-wrapper-list-two\">\n<li><img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\" data-src=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/themes\/mirrorfly\/assets\/images\/tick-icon.svg\">\n100% Customizable<\/li>\n<li><img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\" data-src=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/themes\/mirrorfly\/assets\/images\/tick-icon.svg\">\nCustom Security<\/li>\n<li><img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\" data-src=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/themes\/mirrorfly\/assets\/images\/tick-icon.svg\">\nOn-Premise Hosting<\/li>\n<\/ul>\n<img decoding=\"async\" src=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/themes\/mirrorfly\/assets\/images\/saas-cta-bg.webp\" class=\"cta-image-thumbnail-two\">\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity custom-seperator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions&nbsp;(FAQ)<\/h2>\n\n\n\n<svg width=\"0\" height=\"0\" class=\"hidden\">\n  <symbol xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" id=\"iconmonstr-minus-1\">\n    <path d=\"M0 9h24v6h-24z\"><\/path>\n  <\/symbol>\n  <symbol xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" id=\"iconmonstr-plus-2\">\n    <path d=\"M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z\"><\/path>\n  <\/symbol>\n<\/svg>\n\n<div class=\"accordion-item closed\">\n  <div class=\"accordion-item-heading\">\n    How Does a ReactJS App Work?\n    <div class=\"icon-block\">\n      <svg class=\"icon icon-minus\">\n        <use xlink:href=\"#iconmonstr-minus-1\"><\/use>\n      <\/svg>\n      <svg class=\"icon icon-plus\">\n        <use xlink:href=\"#iconmonstr-plus-2\"><\/use>\n      <\/svg>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item-content\">\n    <p>ReactJs is a component-based Javascript library that helps developers to create dynamic user interfaces for mobile and web applications. When a ReactJS is loaded into a browser, it creates a Virtual DOM, which is a virtual representation of a UI that divides the UI codes into smaller components. These components function similarly to the JavaScript properties or classes that act as the receiver of user inputs.<\/p>\t\n\t<\/div>\n<\/div>\n\n<div class=\"accordion-item closed\">\n  <div class=\"accordion-item-heading\">\n    Can we make an Android App using ReactJS?\n    <div class=\"icon-block\">\n      <svg class=\"icon icon-minus\">\n        <use xlink:href=\"#iconmonstr-minus-1\"><\/use>\n      <\/svg>\n      <svg class=\"icon icon-plus\">\n        <use xlink:href=\"#iconmonstr-plus-2\"><\/use>\n      <\/svg>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item-content\">\n    <p>Yes. ReactJS supports cross-platform app development and works well in collaboration with other technologies and frameworks to build iOS and Android mobile apps. However, to build high-quality Android apps using ReactJS, one must use the React Native framework as it helps developers to build quickly and with reduced maintenance costs.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"accordion-item closed\">\n  <div class=\"accordion-item-heading\">\n    Can we make an iOS App with ReactJS?\n    <div class=\"icon-block\">\n      <svg class=\"icon icon-minus\">\n        <use xlink:href=\"#iconmonstr-minus-1\"><\/use>\n      <\/svg>\n      <svg class=\"icon icon-plus\">\n        <use xlink:href=\"#iconmonstr-plus-2\"><\/use>\n      <\/svg>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item-content\">\n    <p>Yes. React Native is the best choice for developing iOS apps as its syntax is easy, supports cross-platform development, and with just a single code, you can deploy it on both iOS and Android devices. Further, React uses native components and due to which the app may look like a native app. <\/p>\n\t<\/div>\n<\/div>\n\n<div class=\"accordion-item closed\">\n  <div class=\"accordion-item-heading\">\n    Which Apps are Built with ReactJS?\n    <div class=\"icon-block\">\n      <svg class=\"icon icon-minus\">\n        <use xlink:href=\"#iconmonstr-minus-1\"><\/use>\n      <\/svg>\n      <svg class=\"icon icon-plus\">\n        <use xlink:href=\"#iconmonstr-plus-2\"><\/use>\n      <\/svg>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item-content\">\n    <p>ReactJS is one of the popular and flexible front-end JavaScript languages that is used to build highly interactive mobile and web apps. Considering its benefits, some of the tech giants have used ReactJS to build applications like Facebook, Netflix, PayPal, WhatsApp, Instagram, Discord, Reddit, and many others. <\/p>\n  <\/div>\n<\/div>\n\n<div class=\"accordion-item closed\">\n  <div class=\"accordion-item-heading\">\n    What is WebRTC in ReactJS?\n    <div class=\"icon-block\">\n      <svg class=\"icon icon-minus\">\n        <use xlink:href=\"#iconmonstr-minus-1\"><\/use>\n      <\/svg>\n      <svg class=\"icon icon-plus\">\n        <use xlink:href=\"#iconmonstr-plus-2\"><\/use>\n      <\/svg>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item-content\">\n    <p>\n        <a href=\"https:\/\/www.mirrorfly.com\/blog\/an-ultimate-guide-for-webrtc-video-calling\/\" target=\"_blank\">\n            WebRTC (Web Real-time Communication)\n        <\/a> \n        is a protocol that uses React Router to provide P2P audio and \n        <a href=\"https:\/\/www.mirrorfly.com\/blog\/video-communication\/\" target=\"_blank\">\n            video communication\n        <\/a> \n        between web browsers without the need for any plugins or third-party software in ReactJS.\n    <\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity custom-seperator\"\/>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Build a React Video Chat App in 2026?\",\n  \"description\": \"This article focuses on building a custom video chat app by directly integrating pre-built audio and video features using MirrorFly SDKs and React to create a robust live chat app with real-time video and audio features.\",\n  \"url\": \"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Shyam Vijay\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"MirrorFly\",\n    \"url\": \"https:\/\/www.mirrorfly.com\/\"\n  },\n  \"datePublished\": \"2022-10-21T16:42:21Z\",\n  \"tool\": [\n    \"MirrorFly JavaScript SDK\",\n    \"MirrorFly React SDK\",\n    \"WebRTC adapter\",\n    \"Socket.IO\"\n  ],\n  \"supply\": [\n    \"MirrorFly license key\",\n    \"Development environment (Node.js, npm\/yarn)\",\n    \"Code editor\",\n    \"Internet connection\"\n  ],\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Get MirrorFly License Key\",\n      \"text\": \"Sign up \/ log in to MirrorFly Console, download the JavaScript SDK and copy the license key from the Application Info section.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Import Javascript SDK\",\n      \"text\": \"Extract the SDK zip folder, add script files to index.html (index.js, socket.io.js, webrtc adapter) and import into the project.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Import React SDK\",\n      \"text\": \"Include the React script, create SDK.js with `const SDK = window.SDK; export default SDK;` and import it into your app.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Initialization of Call SDK\",\n      \"text\": \"Configure the SDK initialization object with apiBaseUrl, licenseKey, isTrialLicenseKey and callback listeners (incomingCallListener, callStatusListener, userTrackListener, etc.), then call `SDK.initializeSDK(initializeObj)`.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Registering an App User\",\n      \"text\": \"Register a new user via `await SDK.register('USER_IDENTIFIER')` to receive username and password for server connection.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Connect the Chat SDK to MirrorFly Server\",\n      \"text\": \"Use `await SDK.connect('USERNAME', 'PASSWORD')` and monitor connection status via the connectionListener callback; a 200 response indicates success.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Make Video Call\",\n      \"text\": \"Start a video call by invoking `await SDK.makeVideoCall(['USER1_JID','USER2_JID',...])`; the SDK triggers callStatusListener for callee status.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Make Group Video Call\",\n      \"text\": \"Start a group call by calling `await SDK.makeVideoCall(['USER1_JID',...], 'GROUP_ID')` supplying callee JIDs and a Group ID.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Receive a Call\",\n      \"text\": \"Register an incomingCallListener callback to receive call data (allUsers, callTime, callType, roomId, status, etc.) when another user calls.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Call Answer\",\n      \"text\": \"Answer an incoming call using `await SDK.answerCall()`.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Decline Call\",\n      \"text\": \"Decline or end an ongoing call by calling `await SDK.endCall()`.\"\n    }\n  ]\n}\n<\/script>\n\n\n\n<script type=\"application\/ld+json\">\n    {\n        \"@context\": \"https:\/\/schema.org\",\n        \"@type\": \"FAQPage\",\n        \"mainEntity\": [\n            {\n                \"@type\": \"Question\",\n                \"name\": \"How Does a ReactJS App Work?\",\n                \"acceptedAnswer\": {\n                    \"@type\": \"Answer\",\n                    \"text\": \"ReactJs is a component-based Javascript library that helps developers to create dynamic user interfaces for mobile and web applications. When a ReactJS is loaded into a browser, it creates a Virtual DOM, which is a virtual representation of a UI that divides the UI codes into smaller components. These components function similarly to the JavaScript properties or classes that act as the receiver of user inputs.\"\n                }\n            },\n            {\n                \"@type\": \"Question\",\n                \"name\": \"Can we make an Android App using ReactJS?\",\n                \"acceptedAnswer\": {\n                    \"@type\": \"Answer\",\n                    \"text\": \"Yes. ReactJS supports cross-platform app development and works well in collaboration with other technologies and frameworks to build iOS and Android mobile apps. However, to build high-quality Android apps using ReactJS, one must use the React Native framework as it helps developers to build quickly and with reduced maintenance costs.\"\n                }\n            },\n            {\n                \"@type\": \"Question\",\n                \"name\": \"Can we make an iOS App with ReactJS?\",\n                \"acceptedAnswer\": {\n                    \"@type\": \"Answer\",\n                    \"text\": \"Yes. React Native is the best choice for developing iOS apps as its syntax is easy, supports cross-platform development, and with just a single code, you can deploy it on both iOS and Android devices. Further, React uses native components and due to which the app may look like a native app.\"\n                }\n            },\n            {\n                \"@type\": \"Question\",\n                \"name\": \"Which Apps are Built with ReactJS?\",\n                \"acceptedAnswer\": {\n                    \"@type\": \"Answer\",\n                    \"text\": \"ReactJS is one of the popular and flexible front-end JavaScript languages that is used to build highly interactive mobile and web apps. Considering its benefits, some of the tech giants have used ReactJS to build applications like Facebook, Netflix, PayPal, WhatsApp, Instagram, Discord, Reddit, and many others.\"\n                }\n            },\n            {\n                \"@type\": \"Question\",\n                \"name\": \"What is WebRTC in ReactJS?\",\n                \"acceptedAnswer\": {\n                    \"@type\": \"Answer\",\n                    \"text\": \"WebRTC (Web Real-time Communication) is a protocol that uses React Router to provide P2P audio and video communication between web browsers without the need for any plugins or third-party software in ReactJS.\"\n                }\n            }\n        ]\n    }\n<\/script>\n\n\n\n<p style=\"font-size:24px\"><strong>Related Articles<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.mirrorfly.com\/blog\/build-a-react-native-chat-app\/\">Build React Native Chat App Using MirrorFly SDK<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mirrorfly.com\/blog\/build-a-chat-app-with-react-native-gifted-chat\/\">A Guide To Build Chat App with react-native-gifted-chat<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will focus on building a custom video chat app by directly integrating pre-built audio and video features. We\u2019ll be using MirrorFly SDKs and React to create a robust live chat in react js app with real-time video and audio features.&nbsp; I\u2019ll walk you through, How to Create a React Video Calling App in [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":32963,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_stopmodifiedupdate":false,"_modified_date":"","footnotes":""},"categories":[1272],"tags":[2110,2109,2141,2107,2140,2108],"class_list":["post-23442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech-talks","tag-build-a-react-js-video-chat-app","tag-build-a-react-video-chat-app","tag-build-react-video-chat-app","tag-react-js-app","tag-react-js-video-chat-app","tag-react-video-chat-app"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a React JS Video Chat App Using MirrorFly SDK<\/title>\n<meta name=\"description\" content=\"Let&#039;s learn how to build a react video chat app. Add a 1-to-1, group call, recording, &amp; more features using Mirrorfly SDK.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a React Video Chat Application with Easy Steps\" \/>\n<meta property=\"og:description\" content=\"This tutorial helps you to create your own react video chat app using Mirrorfly SDK. You can later integrate it as a widget into any project!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"MirrorFly Blog - Chat API And Messaging SDK for your Mobile and Web Apps\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MirrorFlyofficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-21T16:42:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-13T12:41:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2024\/03\/React-Video-Chat-App.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"418\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Atchaya Jayabal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Make a React JS Video Chat App Using MirrorFly SDKs\" \/>\n<meta name=\"twitter:description\" content=\"This step-by-step tutorial will guide you on how to make a react video chat app with 11 simple steps. You also saw how easy it is to work.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2024\/03\/React-Video-Chat-App.webp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Atchaya Jayabal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\"},\"author\":{\"name\":\"Atchaya Jayabal\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/27e1ae59b77c7775bd63034148eb3294\"},\"headline\":\"How to Build a React Video Chat App in 2026?\",\"datePublished\":\"2022-10-21T16:42:21+00:00\",\"dateModified\":\"2026-02-13T12:41:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\"},\"wordCount\":1089,\"commentCount\":33,\"publisher\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#organization\"},\"keywords\":[\"build a react js video chat app\",\"build a react video chat app\",\"build react video chat app\",\"react js app\",\"react js video chat app\",\"react video chat app\"],\"articleSection\":[\"Tech Talks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\",\"url\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\",\"name\":\"How to Build a React JS Video Chat App Using MirrorFly SDK\",\"isPartOf\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#website\"},\"datePublished\":\"2022-10-21T16:42:21+00:00\",\"dateModified\":\"2026-02-13T12:41:20+00:00\",\"description\":\"Let's learn how to build a react video chat app. Add a 1-to-1, group call, recording, & more features using Mirrorfly SDK.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.mirrorfly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tech Talks\",\"item\":\"https:\/\/www.mirrorfly.com\/blog\/category\/tech-talks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build a React Video Chat App in 2026?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#website\",\"url\":\"https:\/\/www.mirrorfly.com\/blog\/\",\"name\":\"MirrorFly Blog - Chat API And Messaging SDK for your Mobile and Web Apps\",\"description\":\"World&#039;s Most Scalable Chat APIs &amp; SDKs for Small, Medium &amp; Enterprises\",\"publisher\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mirrorfly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#organization\",\"name\":\"MirrorFly\",\"url\":\"https:\/\/www.mirrorfly.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2020\/07\/mirrorfly-blue.png\",\"contentUrl\":\"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2020\/07\/mirrorfly-blue.png\",\"width\":520,\"height\":100,\"caption\":\"MirrorFly\"},\"image\":{\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MirrorFlyofficial\/\",\"https:\/\/www.instagram.com\/mirrorflyofficial\/\",\"https:\/\/www.linkedin.com\/showcase\/mirrorfly-official\/\",\"https:\/\/x.com\/MirrorFlyTeam\/\",\"https:\/\/github.com\/mirrorfly\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/27e1ae59b77c7775bd63034148eb3294\",\"name\":\"Atchaya Jayabal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c7684e399858444026b2603501ecba15?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c7684e399858444026b2603501ecba15?s=96&d=mm&r=g\",\"caption\":\"Atchaya Jayabal\"},\"description\":\"Atchaya Jayabal is a passionate content writer specializing in SaaS, B2B and Technical Writing. She is best known for her adept expertise in curating tech content that resonates with readers.\",\"url\":\"https:\/\/www.mirrorfly.com\/blog\/author\/atchaya-jayabal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a React JS Video Chat App Using MirrorFly SDK","description":"Let's learn how to build a react video chat app. Add a 1-to-1, group call, recording, & more features using Mirrorfly SDK.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a React Video Chat Application with Easy Steps","og_description":"This tutorial helps you to create your own react video chat app using Mirrorfly SDK. You can later integrate it as a widget into any project!","og_url":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/","og_site_name":"MirrorFly Blog - Chat API And Messaging SDK for your Mobile and Web Apps","article_publisher":"https:\/\/www.facebook.com\/MirrorFlyofficial\/","article_published_time":"2022-10-21T16:42:21+00:00","article_modified_time":"2026-02-13T12:41:20+00:00","og_image":[{"width":800,"height":418,"url":"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2024\/03\/React-Video-Chat-App.webp","type":"image\/webp"}],"author":"Atchaya Jayabal","twitter_card":"summary_large_image","twitter_title":"Make a React JS Video Chat App Using MirrorFly SDKs","twitter_description":"This step-by-step tutorial will guide you on how to make a react video chat app with 11 simple steps. You also saw how easy it is to work.","twitter_image":"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2024\/03\/React-Video-Chat-App.webp","twitter_misc":{"Written by":"Atchaya Jayabal","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#article","isPartOf":{"@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/"},"author":{"name":"Atchaya Jayabal","@id":"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/27e1ae59b77c7775bd63034148eb3294"},"headline":"How to Build a React Video Chat App in 2026?","datePublished":"2022-10-21T16:42:21+00:00","dateModified":"2026-02-13T12:41:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/"},"wordCount":1089,"commentCount":33,"publisher":{"@id":"https:\/\/www.mirrorfly.com\/blog\/#organization"},"keywords":["build a react js video chat app","build a react video chat app","build react video chat app","react js app","react js video chat app","react video chat app"],"articleSection":["Tech Talks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/","url":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/","name":"How to Build a React JS Video Chat App Using MirrorFly SDK","isPartOf":{"@id":"https:\/\/www.mirrorfly.com\/blog\/#website"},"datePublished":"2022-10-21T16:42:21+00:00","dateModified":"2026-02-13T12:41:20+00:00","description":"Let's learn how to build a react video chat app. Add a 1-to-1, group call, recording, & more features using Mirrorfly SDK.","breadcrumb":{"@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.mirrorfly.com\/blog\/build-a-video-chat-app-using-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mirrorfly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tech Talks","item":"https:\/\/www.mirrorfly.com\/blog\/category\/tech-talks\/"},{"@type":"ListItem","position":3,"name":"How to Build a React Video Chat App in 2026?"}]},{"@type":"WebSite","@id":"https:\/\/www.mirrorfly.com\/blog\/#website","url":"https:\/\/www.mirrorfly.com\/blog\/","name":"MirrorFly Blog - Chat API And Messaging SDK for your Mobile and Web Apps","description":"World&#039;s Most Scalable Chat APIs &amp; SDKs for Small, Medium &amp; Enterprises","publisher":{"@id":"https:\/\/www.mirrorfly.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mirrorfly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mirrorfly.com\/blog\/#organization","name":"MirrorFly","url":"https:\/\/www.mirrorfly.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2020\/07\/mirrorfly-blue.png","contentUrl":"https:\/\/www.mirrorfly.com\/blog\/wp-content\/uploads\/2020\/07\/mirrorfly-blue.png","width":520,"height":100,"caption":"MirrorFly"},"image":{"@id":"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MirrorFlyofficial\/","https:\/\/www.instagram.com\/mirrorflyofficial\/","https:\/\/www.linkedin.com\/showcase\/mirrorfly-official\/","https:\/\/x.com\/MirrorFlyTeam\/","https:\/\/github.com\/mirrorfly"]},{"@type":"Person","@id":"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/27e1ae59b77c7775bd63034148eb3294","name":"Atchaya Jayabal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mirrorfly.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c7684e399858444026b2603501ecba15?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c7684e399858444026b2603501ecba15?s=96&d=mm&r=g","caption":"Atchaya Jayabal"},"description":"Atchaya Jayabal is a passionate content writer specializing in SaaS, B2B and Technical Writing. She is best known for her adept expertise in curating tech content that resonates with readers.","url":"https:\/\/www.mirrorfly.com\/blog\/author\/atchaya-jayabal\/"}]}},"_links":{"self":[{"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/posts\/23442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/comments?post=23442"}],"version-history":[{"count":61,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/posts\/23442\/revisions"}],"predecessor-version":[{"id":43168,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/posts\/23442\/revisions\/43168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/media\/32963"}],"wp:attachment":[{"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/media?parent=23442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/categories?post=23442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mirrorfly.com\/blog\/wp-json\/wp\/v2\/tags?post=23442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}