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!
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
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.
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.
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";
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;
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
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 = {}
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);
This is how the sample output will look like, with a status code and message.
{
"statusCode": 200,
"message": "Success"
}
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.
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.
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 |
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"
}
Use the below answerCall method to answer a call
await SDK.answerCall();
Use the below endCall method to end a call
await SDK.endCall();
Use the below declineCall method to decline a call
await SDK.declineCall();
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.
Start today with MirrorFly APIs and services to scale 1 Billion+ Conversations.
Integrate Our Video, Voice & Chat SDKs into any app in < 30 mins
Try it freeGet Full Access To Our Customizable Video, Voice & Chat SDKs!
Contact Sales