Quick start

Prerequisites

• Go to ZEGOCLOUD Admin Console to create a UIKit project.
• Get the AppID and ServerSecret of the project.

Integrate the SDK

Import the SDK

Choose either of the following to import the Call Kit:

Using the NPM

1. Install the plug-in.

    npm i @zegocloud/zego-uikit-prebuilt zego-zim-web@2.5.0 --save 

2. Import the Call Kit in your project's js or ts file:

   import { ZIM } from "zego-zim-web";
   import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

Using the HTML Script Tag

• Import the following script code in the HTML page: (A more recommended way: Download and save it on your app server, and import it to the corresponding path.)

   <script src="https://unpkg.com/zego-zim-web@2.5.0/index.js"></script>
   <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>

Initialize the Call Kit with call invitation feature

Initialize the Call Kit, and add the call invitation plug-in:

• Generate a Kit Token
• Fill in the required parameters in the following code.

// Generate a Token by calling a method.
// @param 1: appID
// @param 2: serverSecret
// @param 3: Room ID
// @param 4: User ID
// @param 5: Username
const userID = ""; 
const userName = "userName" + userID;
const appID = 0;
const serverSecret = "";
const TOKEN = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret,null, userID, userName);

const zp = ZegoUIKitPrebuilt.create(TOKEN);
zp.addPlugins({ ZIM });

Set a button-trigger event

Set up a button and add a button-click event for making call invitations.

You can customize the position of the button you set for making call invitations accordingly, passing in the ID of the user you want to call.

  <button onclick="invite()">invite</button>

function invite() {
   const targetUser = {
        userID:'',
        userName:''
    };
   zp.sendCallInvitation({
    callees: [targetUser],
    callType: ZegoUIKitPrebuilt.InvitationTypeVideoCall,
    timeout: 60, // Timeout duration (second). 60s by default, range from [1-600s].
   }).then((res) => {
    console.warn(res);
   })
   .catch((err) => {
   console.warn(err);
   });
}

Run & Test

So far, you have finished all the steps!

Now you can start up and run the project in a browser using a server you're familiar with.

Resources

Related guides