How to Build a React Video Chat App in 2023?

This article will focus on building a custom video chat app by directly integrating pre-built audio and video features. We will use React as the programming language and MirrorFly SDKs for building the audio and video features. 

I’ll walk you through,

1. Where to get MirrorFly License Key
2. Integrate the chat SDK into your Web Video Chat App
3. Connect the Chat Client to MirrorFly Server
4. Register a User 
5. Send or Recieve Messages

Step 1: Get MirrorFly License Key

The first step in creating a web app is to download the MirrorFly License Key. To do this, follow the below steps as instructed.

• Go to MirrorFly Console Page
• Fill in your basic details on the registration page
• Click on Sign up 
• Verify your account using your registered email

Once you create your account,

• Login to your account
• Go to the Overview section
• Download the Javascript SDK
• Next, go to the Application Info section
• Copy the License key

Video Chat SDK Integration into Web Apps

To create a web chat app, you need to import Javascript into your app and then import the React SDK. Follow the below steps to perform the import. 

Step 2: Import Javascript SDK

• Extract the files from the SDK zip folder and import them into your app. 
• After Importing, add the script file to 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>

• Next, continue to add React SDK into the app.

Step 3: Import React SDK

• Include the React script 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>

• In the project root, create a new file SDK.js and configure as follows

const SDK = window.SDK;
export default SDK;

• Next, import the SDK into your web video chat app

import SDK from "./SDK";

Step 4: Initialization of Call SDK 

• In this step, you will configure the SDK to respond to any connection status changes in the client app.
• Next, paste the MirrorFly License Key on the license key param, as mentioned in step 1 
• Pass these data through the SDK using the below method

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

Below are the 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);

The response of the method will look like below

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

Step 5: Registering an App User

• To register a new user, you need to use the below method.
• After you register, you’ll have a username and a password. You can use these credentials to establish a connection with the server.

await SDK.register(`USER_IDENTIFIER`);

The response of this method will look as follows:

{
  statusCode: 200,
  message: "Success",
  data: {
    username: "123456789",
    password: "987654321"
  }
}

Step 6: Connect the Chat SDK to MirrorFly Server

• Once you connect the chat SDK to the server, the approval message will appear as ‘statusCode of 200’. Otherwise, an execution error may appear. 
• Next, you can trace the connection status in the connectionListener callback function.
• If there are any discrepancies in making the server connection, the SDK will display an error message in the callback. 

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

Step 7: Make Video Call

• You can start making live video calls by adding the caller’s user JID in makeVideoCall method.
• Once you initiate the call, the SDK will trigger the callback callStatusListener and will receive the callee user call status

await SDK.makeVideoCall(['USER1_JID', 'USER2_JID'...]);

Step 8: Make Group Video Call 

• Provide the callee’s user JID & Group ID into the makeVideoCall method and initiate the call. 
• Once you initiate the call, the SDK will trigger the callback callStatusListener and will receive the callee user call status

await SDK.makeVideoCall(['USER1_JID', 'USER2_JID'...], 'GROUP_ID');

Step 9: Receive a Call

• You need an incomingCallListener callback that is already registered with the callee’s client app, to receive an incoming call. 
• The callee will receive the call data in the callback whenever a user calls another user from your app. 

// 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"
}

Step 10: Call Answer

To answer an incoming call, you need to use the answerCall() method

await SDK.answerCall();

Step 11: Decline Call

To decline an ongoing call, you need to use the endCall() method

await SDK.endCall();

Conclusion

In this post, you have learned how to create video chat into your web app with React and MirrorFly SDKs, integrate the Chat SDK to your app, set up a server connection and make video calls. 

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. 

Also, your suggestion on which topic you’d 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!