Using HTML script
This doc works in almost any programming language and frameworks, and supports both PC and mobile browsers (including WebViews).
The Video Conference Kit SDK is written in pure JavaScript and natively supported by Web browsers, so you can refer to this doc if you're using JQuery, PHP, or JSP.
Prepare the environment
Before you attempt to integrate the SDK, make sure that the development environment meets the following requirements:
- The development computer with Windows or macOS is connected to the Internet.
- A browser that meets the compatibility requirements of ZEGO Express Web SDK (To check browser compatibility, please refer to Web SDK compatibility.), it is recommended to use the latest version of Google Chrome.
Getting started
-
First, you'll need to generate a Kit Token.
NoteYou can skip generate Kit Token if you wanna speed up your integration testing. Remember to generate the Kit Token by referring to this when you plan to make your app go live officially.
-
Then, replace the
appIDandserverSecretparameters in the following code with your project's AppID and ServerSecret that you get from Admin Console.NoteuserIDandroomIDcan only contain numbers, letters, and underlines (_).- Users that join the call with the same
roomIDcan talk to each other.
<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>
// 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 = ;
const userID = Math.floor(Math.random() * 10000) + "";
const userName = "userName" + userID;
const appID = ;
const serverSecret = "";
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, userID, userName);
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
container: document.querySelector("#root"),
sharedLinks: [{
url: window.location.protocol + '//' + window.location.host + window.location.pathname + '?roomID=' + roomID,
}],
scenario: {
mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
},
});
</script>
</html>
And congratulations! You've finished all steps!
Complete parameter examples
You can also tailor the specific features by customizing parameters. Click here to check the complete parameter examples.
Related guide
Follow the steps to generate a Kit Token.