Virtual interactions, especially one-on-one video chat, have become very popular in today’s socially remote times. For instantaneous client connections and team collaboration, the majority of businesses throughout the world want to implement the WebRTC video call app. Let’s Build a Video Chat App with JavaScript and WebRTC.
How to Make a Video Calling App with WebRTC
As a JavaScript video call SDK provider, ZEGOCLOUD offers developers a fast and easy way to implement WebRTC video call functionality. Its SDK uses WebRTC technology to achieve high-quality audio and video communication in the browser. It also provides powerful features such as real-time interaction, screen sharing, beauty filters, etc., to meet the needs of users in different scenarios.
In addition, ZEGOCLOUD also provides WebRTC video conferencing SDKs for iOS, Android, Flutter, and React Native, making it easy to implement cross-platform video call functionality.
ZEGOCLOUD has announced a WebRTC UIKit SDK that is a brand-new pre-built UIKits and UI Component recently. Through it, We can complete the development of video calls, live streaming, video conference, and other scenarios within 10 minutes in low code.
As shown in the figure, WebRTC UIKit SDK is responsible for processing audio and video calls and the logic related to text chat. Include:
- UI and interaction of the calling module
- Call status management
- Audio and video data transmission
You only need to implement business-related logic. For example:
- User login registration
- Friends List Management
- Call billing recharge

Preparation for WebRTC SDK
- A ZEGOCLOUD developer account–Sign up
- The latest version of Chrome.
- Basic understanding of Web development
ZEGOCLOUD SDK Integration for WebRTC Video Calling
Importer Call Kit SDK
- Create a new html file and add the following code in the file.
- Then, replace the
appID
andserverSecret
parameters in the following code with theAppID
andServer Secret
of your project.
<html>
<head>
<style>
#root {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
<script>
function getUrlParams(url = window.location.href) {
let urlStr = url.split("?")[1];
return new URLSearchParams(urlStr);
}
// Generate a Kit Token by calling a method.
// @param 1: appID
// @param 2: serverSecret
// @param 3: Room ID
// @param 4: User ID
// @param 5: Username
const roomID =
getUrlParams().get("roomID") ||
"room_" + Math.floor(Math.random() * 1000);
const userID = Math.floor(Math.random() * 10000) + "";
const userName = "userName" + userID;
const appID = 221417685;
const serverSecret = "be15e8ea06d70c26c704f87ed661b6aa";
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
appID,
serverSecret,
roomID,
userID,
userName
);
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
container: document.querySelector("#root"),
sharedLinks: [
{
url:
window.location.origin +
window.location.pathname +
"?roomID=" +
roomID,
},
],
scenario: {
mode: ZegoUIKitPrebuilt.OneONoneCallGroupCall,
},
});
</script>
</html>
Run a Demo
Using the Web Server for Chrome plugin or any web server, start the html
created in the previous step.
Group-call configuration
Group-call scenarios can be implemented by configuring the parameters of the joinRoom
function.

- Set
scenario.mode
toZegoUIKitPrebuilt.GroupCall
// ...
zp.joinRoom({
//...
scenario: {
mode: ZegoUIKitPrebuilt.GroupCall
},
//...
});
//...
Audio-only call configuration
Audio-only call scenarios can also be implemented by configuring the parameters of the join room
function.

- Set the
turnOnCameraWhenJoining
tofalse
to turn off the camera. - Set the
showMyCameraToggleButton
tofalse
to hide the toggle button forenabling/disabling
the camera. - Set the
showAudioVideoSettingsButton
tofalse
to hide the advanced setting button for audio and video. - Set the
showScreenSharingButton
tofalse
to hide the screen-sharing button.
// ....
zp.joinRoom({
// ...,
turnOnCameraWhenJoining: false,
showMyCameraToggleButton: false,
showAudioVideoSettingsButton: false,
showScreenSharingButton: false;
// ...
});
Conclusion
We hope our article helped you understand the major points associated with a WebRTC video calling app. Wait no more! Using ZEGOCLOUD to start your video-calling app with the WebRTC development process today. We wish you all success!
Read More
Talk to Expert
Learn more about our solutions and get your question answered.