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:
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.
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
}
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.
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);
Let's request the params with the below
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);
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,
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.
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.
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
| Param | Description | Type | Required |
|---|---|---|---|
| [USER_JID] | User JID | Array | true |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error Message | String |
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');
| Param | Description | Type | Required |
|---|---|---|---|
| [USER_JID] | Pass User JID in array format | String | true |
| GROUP_ID | Group ID | String | true |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
| - | Message | - |
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();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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.
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();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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);
| Param | Description | Type | Required |
|---|---|---|---|
| BOOLEAN | true - Mute the video false - Unmute the video | BOOLEAN | true |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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'...]);
| Param | Description | Type | Required |
|---|---|---|---|
| [USER_JID] | Invite users JID list in array format | Array | true |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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.
In this case, to send any call switch request, you need to use the method of requestVideoCallSwitch.
await SDK.requestVideoCallSwitch();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
To decline the video call switching you have to use declineVideoCallSwitchRequest method,
await SDK.declineVideoCallSwitchRequest();
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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
| Param | Description | Type | Required |
|---|---|---|---|
| DATA | Custom data. User could send any type of data such as OBJECT, STRING, ARRAY, BOOLEAN | Array | true |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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');
| Arguments | Description | Type |
|---|---|---|
| pageNumber | Page number | Number |
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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
});
| Arguments | Description | Type |
|---|---|---|
| statusCode | Status Code | Number |
| message | Success/Error | String |
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,
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();
| 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 |
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
}
});
| Param | Description | Type | Required |
|---|---|---|---|
| CALLBACK | Callback method to handle success/error | Function | true |
| 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 |
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);
| Param | Description | Type | Required |
|---|---|---|---|
| USER_ID | User id of the user | String | true |
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!
Build a Video Chat experience by integrating real-time video, chat and voice features into any iOS, Android and Web App.
Create immersive chat, video & voice calling experiences that skyrocket engagement and increase your app stickiness with our APIs & SDKs.
