How to Build A Video Chat App For The Web?

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:

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

                   await SDK.register(`USER_IDENTIFIER`); 
                  

                   await SDK.register(`USER_IDENTIFIER`); 
                  

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

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

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

                     await SDK.answerCall(); 
                 
                  

                     await SDK.endCall();
                 
                  

                     await SDK.declineCall();