By using this website, you agree to our Cookies Policy

How to make a Video Calling App with MirrorFly using JavaScript?

MirrorFly aims at building you a powerful vision with its well organized tutorial using a variety of tech stacks to get you the best video chat apps. This is the tutorial that walks you through the detailed technical version of JavaScript APIs to build your real-time video calling application.

Where the market is filled with a lot of video chat apps, web development is all about introducing a new tech version at every other point with no time to think over. One of the most widely used technologies among all these video chat apps is JavaScript

This tutorial is all about JavaScript UI Kit, the backend services with security standards and protocol, all that which is necessary and need to be learned before planning to build an end-to-end encrypted video chat app with MirrorFly.

Let's get started with the steps with simple codes to build your JavaScript video Chat app:

Requirements - Android API Level 21

Step 1 - Create a MirrorFly Account

  • Sign up for a free MirrorFly account.
  • Now create an account by making use of your email id or else can also continue with your existing google account by clicking on 'Continue with Google"
  • Give your organization details by entering "organization name and phone number"
  • Get to create a new "chat+calls" application in the region that's close to your locality

Step 2 - Create a New Project or Open an Existing Project

Well, the core concept is to create a new project or enhance the existing one. Whatever be the case, the entire process is based on two scenarios:

“with chat” and another “without chat”.

Let's move in detail to have more clarity.

With Chat -

Here, we first have to check whether the chat SDK has already been integrated in your application or not. If you already have them integrated then you just need to pass the additional signalServer property with server URL in SDK.initalizeSDK method.


                                signalServer: SIGNAL_SERVER_URL  
                            

Now, add the callback listeners in the callbackListeners property in the SDK.initializeSDK method, which is the first argument object.


                          incomingCallListener, 
                          callStatusListener
                          userTrackListener,
                          muteStatusListener,
                          missedCallListener,
                          callSwitchListener,
                          inviteUsersListener,
                          mediaErrorListener,
                          callSpeakingListener,
                          callUsersUpdateListener,
                          callUserJoinedListener,
                          callUserLeftListener,
                          helper
                      

Let’s get to know in detail with the below example,


                            callbackListeners:{
                                    ...chatCallbackListener,
                                    incomingCallListener,
                                    callStatusListener,
                                    userTrackListener,
                                    muteStatusListener,
                                    missedCallListener,
                                    callSwitchListener,
                                    inviteUsersListener,
                                    mediaErrorListener,
                                    callSpeakingListener,
                                    callUsersUpdateListener,
                                    callUserJoinedListener,
                                    callUserLeftListener,
                                    helper
                                 } 
                            

Without Chat -

If in case the chat SDK has not been integrated into the device then we first need to initialize the SDK using the below method.

Initializing SDK -


                    const initializeObj = {
                        xmppSocketHost: `HOST`,
                        xmppSocketPort: `PORT`,
                        ssl: `SSL`,
                        encryptKey: `ENCRYPT_KEY`,
                        apiBaseUrl: `API_URL`,
                        signalServer: `SIGNAL_SERVER_URL`,
                        licenseKey: `LICENSE_KEY`,
                        callbackListeners: {},
                        };
                        await SDK.initializeSDK(initializeObj);
                     

Request Params

Let's request the params with the below

Argument Description Type Required
xmppSocketHost XMPP Socket Port Number Number true
ssl SSL Boolean true
encryptKey Message Encryption Key String true
apiBaseUrl API Base URL for Backend String true
signalServer Signal Server URL String true
callbackListeners Check for callback listeners Object true

Let’s see an example for this request params



                           const initializeObj = {
                                 xmppSocketHost: "domain",
                                 xmppSocketPort: 5281,
                                 ssl: true,
                                 encryptKey: "ddc0f15cc2c90fca",
                                 apiBaseUrl: "https://domain.com/api/v1",
                                 signalServer: "wss://domain.com",
                                 callbackListeners: {
                                    connectionListener,
                                    incomingCallListener,
                                    callStatusListener,
                                    userTrackListener,
                                    muteStatusListener,
                                    missedCallListener,
                                    callSwitchListener,
                                    inviteUsersListener,
                                    mediaErrorListener,
                                    callSpeakingListener,
                                    callUsersUpdateListener,
                                    callUserJoinedListener,
                                    callUserLeftListener,
                                    helper
                                 },
                                 };
                           await SDK.initializeSDK(initializeObj); 
                             

Response Params

Follow the below table to proceed with response params,

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

Let’s see an example for this response params


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

After the basic steps of initialization, set up of request params and response params, let’s have a look at the technical coding part that take place when these video chat apps are using the video calling APIs to perform a variety of tasks,

Features & Functionalities

Here, we will see a variety of video calling features that includes mute/unmute, video call switching, invite users, and much more using the technical approach.

1. Making a Video Call

To make a video call is one of the core features for any video chat app. The video SDK allows the users to make one to one audio/video calls to get connected with other video SDK users.

For Video call -

To initiate a call, there is a need for a callee's user JID that needs to be added into the makeVideoCall method. With this once the call gets initiated successfully, a callback callStatusListener will be triggered and callee user's call status will be received.


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

For this to get executed we have to perform both request params & response params

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

Make a group video call

It is a feature that allows you to connect with multiple SDK users at once. The below is the method that can be used to make the group video call,

Even here, you need to have a user JID for the caller and a Group ID for the Group to get into the makeVideoCall method. As soon as the program gets executed with the same, a callStatusListener callback will be triggered and the callee user call status will be received as the following,


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

Request Params

Param Description Type Required
[USER_JID] Pass User JID in array format String true
GROUP_ID Group ID String true

Response Params

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

Answering an incoming call

When you receive a video call from another SDK user depending upon the android version, the activity will get started so whenever the user clicks on the accept button from the web platform, the SDK method will get generated to answer the call with a notification to the caller about the incoming call. For this the system uses the answerCall method.


                                await SDK.answerCall();
                           

Response Params

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

Disconnect the call

If you want to disconnect a call after the conversation is over, you have to click on cancel button from your call UI and get disconnected. With codings you have to follow the below given method to disconnect the call which automatically notify the caller.

Answering an incoming call

When you receive a video call from another SDK user depending upon the android version, the activity will get started so whenever the user clicks on the accept button from the Call UI, the SDK method will get generated to answer the call with a notification to the caller about the incoming call.


                               await SDK.endCall(); 
                           

Response Params

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

Decline the incoming call

Whenever you receive a video call, it depends upon the user to decline the call - to do so you need to click on the decline button that pops up from your call UI, this will notify the caller about the same. To do this you have to follow the below method,


                               await SDK.declineCall();
                                

Response Params

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

Managing mute/unmute video call events -

During the video chat session if you ever need you can go ahead and mute/unmute a session i.e. In terms of technical coding, here you need to pass the boolean value as true for mute and false for unmute the entire video call session, using the muteVideo method as given below.


                               await SDK.muteVideo(BOOLEAN);
                                

Request Params

Param Description Type Required
BOOLEAN true - Mute the video false - Unmute the video BOOLEAN true

Response Params

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

Add participants to the call

Once the call gets connected, you can add multiple users in an ongoing call. The video SDK here provides the method where you can invite the users to the call, and once the user accepts the incoming call, they get connected to the call for further communication.

There is a need to provide the caller's with the user JID in array format using the below inviteUsers method,


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

Request Params

Param Description Type Required
[USER_JID] Invite users JID list in array format Array true

Response Params

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

Video Call Switching -

Sometimes, it so happens that you might get an urge to switch the video for some clarity or need, in such a case we can initiate this video switching process, to do so we require to make a callback with callSwitchListener method. This method has to be registered in the client app to receive the request, accept, decline and cancel status information.

Moreover, whenever the user performs any related action to this call switching process, the client app will automatically receive the user action status in this callback.

Request the Call Switch

In this case, to send any call switch request, you need to use the method of requestVideoCallSwitch.


                               await SDK.requestVideoCallSwitch();  
                              

Response Params

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

Cancel the Video Call Switch Request -

Now, if suddenly you want to cancel the call switch request then you have to make use of the below method with cancelVideoCallSwitchRequest.


                            await SDK.cancelVideoCallSwitchRequest(); 
                          

Response Params

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

Accept the Video call switch Request -

The same way if you were planning to go for video call switching, you can go ahead and accept the switching request with the acceptVideoCallSwitchRequest method.


                            await SDK.acceptVideoCallSwitchRequest(); 
                          

Response Params

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

Declining the Video Call Switching Request -

To decline the video call switching you have to use declineVideoCallSwitchRequest method,


                            await SDK.declineVideoCallSwitchRequest(); 
                          

Response Params

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

Send Custom data

Custom data is the data that is unique for any app that can not be collected by default, but can be configured by the developers if needed using SDKs. This custom data import is a type of "catch all" with which you can import and join data as needed within your app. So, if you want to send the custom data to other users on call then you have to pass the data as an argument into the sendCustomData method. Once it's been sent the custom data will give a callback with a trigger of customDataListener and send it across.


                            SDK.sendCustomData('DATA');
                            // Example
                            // SDK.sendCustomData({prop1:'val1', prop2:'val2'}); -- Send object
                            // SDK.sendCustomData(['val1', 'val2']); -- Send array  
                            

Request Params

Param Description Type Required
DATA Custom data. User could send any type of data such as OBJECT, STRING, ARRAY, BOOLEAN Array true

Response Params

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

Get Track of All the Call Log Details

Whenever you make a video call session, all the call details will get automatically stored in the call log. So, if needed you can go ahead and retrieve all the call details by calling getCallLogs method.


                            await SDK.getCallLogs('PAGE_NUMBER');
                            

Request Params

Arguments Description Type
pageNumber Page number Number

Response Params

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

Display of Browser Notification/Alerts

When it comes to web apps, the display of notification is one very essential as it's with the other platforms. Thus, to display the browser notification there will be need to provide the notification object as showCallNotification method. These notifications will be displayed when a user receives a call or ends a call when the user is on some other screen.


                            SDK.showCallNotification(`NOTIFICATION_OBJECT`);
                            

                                // Example
                                 SDK.showCallNotification({
                                 title: `NOTIFICATION_TITLE`, // Title of the notification
                                 body: `NOTIFICATION_BODY`, // Body of the notification
                                 onClick: `CALLBACK_METHOD`, // Callback will be triggered when user click on notification
                                 forceShow: `BOOLEAN` // Display the notification in all cases set this value as TRUE
                                 }); 
                            

Response Params

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

Join the Video Call via Link

To join a video call using a link is not a simple process, there is a need of small ongoing steps that needs to be taken care off including need to get the call link, subscribe the call, join the call, etc. let's see each of them in detail with the call methods,

Obtain a Call Link

When you are there on an ongoing video call, and you need to join a video call session, then you have to make use of the method - getCallLink. With this method you can return the call link that is connected to a call or else will get you an error message.


                            SDK.getCallLink();
                            

Response Params

Arguments Description Type
statusCode Status Code Number
message Success/Error Message String
data Call link to share with the others to join the ongoing call String

Join a Call

Whenever you are planning to join a call and if you are in the preview screen, you can make use of the joinCall method.

Here, the callback needs to be given as an input that can handle the success/error of this method where the success and error object will be held as params. As soon as the call gets connected successfully the callback with the success object will get triggered. This will let you receive a normal call event.

But, if instead the callback with the error is triggered then this indicates some issue in joining. All these errors are popped-up as alerts and are redirected to other screens in the UI.


                            SDK.joinCall('CALLBACK');
                            

                            // Example
                             SDK.joinCall((success, error) => {
                               if(error){
                                     console.log(error.message)
                                 } else {
                                         // You can proceed with the success response
                                      }
                                      });
                              

Request Params

Param Description Type Required
CALLBACK Callback method to handle success/error Function true

Success/Error Object

Arguments Description Type
statusCode Status Code Number
message Success/Error Message String
data Call link to share with the others to join the ongoing call String

Get the Name of the Call Users

When you are in a preview screen or in an ongoing video call, you will be able to get the user's username with the etCallUsername method. This method will return username when you get connected or subscribed to a call or else it will provide you with a return error.


                            await SDK.getCallUsername(USER_ID);
                            

Request Params

Param Description Type Required
USER_ID User id of the user String true

Conclusion

Well, this is all about the tutorial to build your video chat app with JavaScript using Mirrorfly - a highly compatible solution that moves across all kinds of cross platforms. As the tutorial itself explained about the main video chat features, our solution still offers a lot more variety of rich features that can get you an outstanding video chat experience beyond your imagination.

So, I hope this platform would have helped you to get great understanding about the entire technical concept of JavaScript, but still if you feel assistance, I suggest you have a try with our demo application and get some live experience for more in-depth clarity.

Thank you for your time!

All the Best!

Looking To Build a JavaScript Video Chat App?

Build a Video Chat experience by integrating real-time video, chat and voice features into any iOS, Android and Web App.

  • Average API response 3s
  • 100ms worldwide latency
  • 1 Billion +concurrent users
Start a free trial
#
Try MirrorFly Free for 21 Days!

It’s easy, free, and you can start integrating on your app immediately...

Start a free trial
#
Let's Talk To Sales Team

We’d love to answer your questions. Tell us your needs, and we’ll contact you shortly.

Talk to Sales