Introduction

Video calling apps are becoming a handy tool for users around the world to make purchases, attend meetings and have quality time with their family, right from where they are.

Understanding the dire role played by these apps, businesses are trying to incorporate video calls into their apps as an essential feature, to connect their user base and elevate trustworthiness with virtual support. While the trend is going up, several programmers are opting to integrate pre-built video call features into their apps, owing to a fast and easy development process.

Well, to prove the above mentioned statement is real, I'll walk you through the steps to build a web app with video calls functionality. To integrate video calls, I'll use the MirrorFly Video Call SDKs, which have interaction-rich features and iron-clad encryptions.

Without wasting any time, let's get the process started!

Note: If you'd like to explore the full-length code of this tutorial, you can access them in the MirrorFly Github Repository

I. Get The License Key

If you need to add video calls to your app, you need a license key that will authenticate the SDK with the server. In this step, I'll show you how to create an account with MirrorFly, and get the license key.

Step 1 : Go to the MirrorFly Signup Page

Step 2 : Fill in your details and create the login credentials

Step 3 : Verify your account using your registered email ID

Step 4 : Log into your MirrorFly Account. Your dashboard will open

Step 5 : Under Application Info, copy the License Key

#

II . SDK Integration

Note: If you have already integrated the SDK, add only adapter-latest.js to your application.

In this step, we will integrate the Javascript SDK files into the app. This is primary, because javascript is the default language that has been most likely used to build any browser. This makes it essential for web apps to have js, especially when built with languages dependent on the js frameworks.

Let's begin with the integration.

Javascript SDK Integration

Step 1 : In your Account Dashboard, go to the 'Download' section

Step 2 : Navigate to the Web SDKs

Step 3 : Click the SDK Download button against it. The folder will get downloaded to your device.

Step 4 : Open Downloads on your device

Step 5 : Click on the Javascript SDK ZIP folder. Extract and copy the files from the folder.

Step 6 : Include the script file into your index.html


                                    <script src="./index.js">
                                    <script src="./socket.io.js">
                                    <script src="https://webrtc.github.io/adapter/adapter-latest.js">
                                

At this point, you have the SDK object that can be used for the initialization process.Next, you'll need to go with the implementation of the client's preferred language.

React SDK Integration

Step 1 : Add the script files into the index.html


                                      <script src="./index.js">
                                      <script src="./socket.io.js">
                                      <script src="https://webrtc.github.io/adapter/adapter-latest.js">
                                      

Step 2 : In the project root, create a new SDK.js file and then paste the below code


                                            const SDK = window.SDK; 
                                            export default SDK; 
                                         

Step 3 : Import the SDKs to your app


                                            import SDK from "./SDK";
                                          
                                         

React Native SDK Integration

In this step you’ll need to install the peer dependencies, in the versions mentioned below:

React Native : Version Compatibility Requirements
react-native Any version
@react-native-async-storage/async-storage Any version
react-native-get-random-values >=1.7.1

Step 1 : From the SDK Folder, copy all the extracted files

Step 2 : Inside your project, create a new folder and paste all the copied files

Step 3 : Create a file SDK.js

Step 4 : Export all the SDK objects into it

Step 5 : Use the below code to import the SDKs


                                                    import './index';
                                                    const SDK = window.SDK;
                                                    export default SDK; 
                                                

Angular SDK Integration

To integrate the SDK into your app, I recommend using the 8.3.29 version of Angular.

Step 1 : From the SDK folder, copy all the extracted files

Step 2 : In the project root, create a folder and then paste the copied files into it

Step 3 : Open angular.json

Step 4 : Navigate to build > options > scripts

Step 5 : For respective SDK JS files, add the relative file paths

Step 6 : In the Root component’s ngOnInit, above Component Decorator, add the below codes

   
                                         declare var SDK: any;
                                        

Step 7 : Within the Angular’s method, initialize the SDK

III. Call SDK Initialization

Note: If you have already completed the SDK integration, add the callback listeners mentioned below to start receiving call related events.

You’ll need certain data that responds to the changes in the connection status of the client’s app. Use the below method to pass the required data through the SDK.


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

Note: For testing purposes, find the sandbox server details in the upcoming Sandbox section

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

              

Example Response

This is how the sample output will look like, with a status code and message.


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

IV. User Registration

Step 1 : Use the below method to register a user


                   await SDK.register(`USER_IDENTIFIER`); 
                  

Now the user is registered. Now the required credentials are created to connect the SDK to the server.

V. MirrorFly Server Connection

As mentioned in the user registration process, you’ll have the user credentials for making the server connection.

Step 1 : Enter the username and password in connect method to make the server connection


                   await SDK.register(`USER_IDENTIFIER`); 
                  

Below mentioned is the sample response you’ll see when the connection is established. The response will display the connection approval status with code 200. If there are any issues with making the connection, an execution error may appear.


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

Step 2 : Use the connectionListener callback function to trace the status of the connection.

VI. Add Video Call

Note: Implement the helper object, before making the call.

Make A Video Call

Step 1 : In the makeVideoCall method, provide the callee’s user JID

When the call initiation is successful, a callStatusListener will be triggered.


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

Request Parameter

Parameter Description Type Required
USER_JID User JID Array true

Response Parameter

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

Receive Incoming Call

An incomingCallListener callback should be already registered with the client app, to receive an incoming call. Whenever a user makes a call to another user, the calling data will be received in this callback.


                     // Callback Response Argument Structure 
                   { 
                       callTime: 1615878543994005, 
                       callType: "audio|video", 
                       groupId: null|GROUP_ID, 
                       roomId: "wmupbheao", 
                       status: "calling", 
                       toUsers: ["USER_JID"] 
                       userJid: "FROM_USER_JID" 
                   } 
                  

Answer A Call

Use the below answerCall method to answer a call


                     await SDK.answerCall(); 
                 
                  

End A Call

Use the below endCall method to end a call


                     await SDK.endCall();
                 
                  

Decline A Call

Use the below declineCall method to decline a call


                     await SDK.declineCall();
                 
                  

Conclusion

As mentioned at the start of this guide, the increased use of video calling apps doesn't seem to be slowing, making it obvious that - the demand for virtual communication is consistently on the rise. At this trend, pre-built SDKs are the go-to option to build video calls with the communication, security and moderation features that come along. I'm glad you are considering it already.

Now that you know how to add video calls into your web app, I'll recommend your next step as to add the other interaction features, to create a modern app experience.

Check out the other features from MirrorFly that you may find useful to your users.

Looking To Build A Web Video Chat App?

Start today with MirrorFly APIs and services to scale 1 Billion+ Conversations.

  • Average API response 3s
  • 100ms worldwide latency
  • 1 Billion+ Conversations
Try for free
#
Explore Our Free SDKs For 21 Days!

Integrate Our Video, Voice & Chat SDKs into any app in < 30 mins

Try it free
#
Get Started With Our Self-hosted Chat Solution Today!

Get Full Access To Our Customizable Video, Voice & Chat SDKs!

Contact Sales