Using NPM package manager

This doc works in Web engineering frameworks, and supports both PC and mobile browsers (including WebViews). You can refer to this doc if you're using React, Vue, Angular, and other frameworks.

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.

Install the SDK

Untitled

npm i @zegocloud/zego-uikit-prebuilt --save

Copied!

Initialize the SDK

First, you'll need to generate a Kit Token.

(Note: You can skip this step 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 appID and serverSecret parameters in the following code with your project's AppID and ServerSecret that you get from Admin Console.

React

Next.js

Angular

Vue

import * as React from 'react';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
  const roomID = getUrlParams().get('roomID') || randomID(5);
  let role_str = getUrlParams(window.location.href).get('role') || 'Host';
  const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

  let sharedLinks = [];
  if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: 'Join as co-host',
      url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
    });
  }
  sharedLinks.push({
    name: 'Join as audience',
    url:
     window.location.protocol + '//' + 
     window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
  });
 // generate Kit Token
  const appID = ;
  const serverSecret = "";
  const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


  // start the call
  let myMeeting = async (element) => {
      // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // start the call
      zp.joinRoom({
        container: element,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
      });
  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Copied!

// ... some other logic code
const { ZegoUIKitPrebuilt } = await import("@zegocloud/zego-uikit-prebuilt");

const roomID = getUrlParams().get('roomID') || randomID(5);
let role_str = getUrlParams(window.location.href).get('role') || 'Host';
const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

let sharedLinks = [];
if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: 'Join as co-host',
      url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
    });
}
sharedLinks.push({
    name: 'Join as audience',
    url:
     window.location.protocol + '//' + 
     window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
});
// generate Kit Token
const appID = ;
const serverSecret = "";
const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

// Create instance object from Kit Token.
const zp = ZegoUIKitPrebuilt.create(kitToken);
// start the call
zp.joinRoom({
   container: element,
   scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
    },
   sharedLinks,
}); 
// ... some other logic code

Copied!

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len:number) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('root')
  root!: ElementRef;

  ngAfterViewInit() {
    const roomID = getUrlParams().get('roomID') || randomID(5);
    let role_str = getUrlParams(window.location.href).get('role') || 'Host';
    const role =
      role_str === 'Host'
        ? ZegoUIKitPrebuilt.Host
        : role_str === 'Cohost'
        ? ZegoUIKitPrebuilt.Cohost
        : ZegoUIKitPrebuilt.Audience;

    let sharedLinks = [];
    if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
      sharedLinks.push({
        name: 'Join as co-host',
        url:
         window.location.protocol + '//' + 
         window.location.host + window.location.pathname +
          '?roomID=' +
          roomID +
          '&role=Cohost',
      });
    }
    sharedLinks.push({
      name: 'Join as audience',
      url:
       window.location.protocol + '//' + 
       window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Audience',
    });
   // generate Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


   // Create instance object from Kit Token.
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // start the call
  zp.joinRoom({
        container: this.root.nativeElement,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
   });
  }
}

Copied!

<template>
  <div id="app" ref="root"></div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default {
  name: 'App',
  components: {},
  mounted() {
    const roomID = getUrlParams().get('roomID') || randomID(5);
    let role_str = getUrlParams(window.location.href).get('role') || 'Host';
    const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

    let sharedLinks = [];
   if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
     sharedLinks.push({
       name: 'Join as co-host',
       url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
     });
   }
   sharedLinks.push({
    name: 'Join as audience',
    url:
      window.location.protocol + '//' +
      window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
    });  
   // Generate Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

  // Create instance object from Kit Token.
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // start the call
  zp.joinRoom({
        container: this.$refs.root,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
   });
  },
};
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>

Copied!

Complete code

Click the button below to get the complete code:

React

Angular

Vue

Complete parameter examples

You can also tailor the specific features by customizing parameters. The following shows the complete parameter examples:

Untitled

declare interface ZegoCloudRoomConfig {
  // 1 UI controls
  // 1.1 Global
  container?: HTMLElement | undefined | null; // Component container.
  maxUsers?: number; // In-call participants range from [2 - 20]. The default value is unlimited.
  scenario?: {
    mode?: ScenarioModel; // Scenario selection.
    config?: ScenarioConfig[ScenarioModel]; // Specific configurations in the corresponding scenario.
  };
  console?: ConsoleLevel; // Used to problem localization, not a regular setup. While setting this can decide what severity of logs you want to print.
  screenSharingConfig?: {
    resolution?: ScreenSharingResolution;
    width?: number;
    height?: number;
    frameRate?: number;
    maxBitRate?: number;
  }; // Screen sharing settings, resolution settings

  // 1.2 Prejoin view
  showPreJoinView?: boolean; // Whether to display the prejoin view. Displayed by default.
  preJoinViewConfig?: {
    title?: string; // The title of the prejoin view. Uses "enter Room" by default.
  };
  turnOnMicrophoneWhenJoining?: boolean; // Whether to enable the microphone when joining the call. Enabled by default.
  turnOnCameraWhenJoining?: boolean; // Whether to enable the camera when joining the call. Enabled by default.
  useFrontFacingCamera?: boolean; // Whether to use the front-facing camera when joining the room. Uses a front-facing camera by default.
  videoResolutionDefault?: VideoResolution; // The default video resolution.
  enableStereo?: boolean; // Whether to enable the stereo mode. Disabled by default.

  // 1.3 Room view
  // You can use this button to mute other Participant's camera.
  showTurnOffRemoteCameraButton?: boolean; // Whether to display the button for turning off the remote camera. Not displayed by default.
  // You can use this button to mute other Participant's microphone.
  showTurnOffRemoteMicrophoneButton?: boolean; // Whether to display the button for turning off the remote microphone. Not displayed by default.
  showMyCameraToggleButton?: boolean; // Whether to display the button for toggling my camera. Displayed by default.
  showMyMicrophoneToggleButton?: boolean; // Whether to display the button for toggling my microphone. Displayed by default.
  showAudioVideoSettingsButton?: boolean; // Whether to display the button for audio and video settings. Displayed by default.
  showTextChat?: boolean; // Whether to display the text chat on the right side. Displayed by default.
  showUserList?: boolean; // Whether to display the participant list. Displayed by default. 
  showRemoveUserButton?: boolean; // Whether to display the button for removing participants. Not displayed by default.
  lowerLeftNotification?: {
    showUserJoinAndLeave?: boolean; // Whether to display notifications on the lower left area when participants join and leave the room. Displayed by default.
    showTextChat?: boolean; // Whether to display the latest messages on the lower left area. Displayed by default.
  };
  branding?: {
    logoURL?: string; // The branding LOGO URL.
  };
  layout?: "Sidebar" | "Grid" | "Auto"; // The layout modes. Uses the Auto mode by default.
  showLayoutButton?: boolean; // Whether to display the button for switching layouts. Displayed by default.
  showNonVideoUser?: boolean; // Whether to display the non-video participants. Displayed by default.
  showOnlyAudioUser?: boolean; // Whether to display audio-only participants. Displayed by default.
  sharedLinks?: { name?: string; url?: string }[]; // Description of the generated shared links.
  showScreenSharingButton?: boolean; // Whether to display the Screen Sharing button. Displayed by default.
  showPinButton?: boolean; // Whether to display the Pin button. Displayed by default.
  whiteboardConfig?: {
    showAddImageButton?: boolean; // It's set to false by default. To use this feature, activate the File Sharing feature, and then import the plugin. Otherwise, this prompt will occur: "Failed to add image, this feature is not supported."
    showCreateAndCloseButton?: boolean; // Whether to display the button that is used to create/turn off the whiteboard. Displayed by default.
  };
  showRoomTimer?: boolean; // Whether to display the timer. Not displayed by default.
  showRoomDetailsButton?: boolean; // Whether to display the button that is used to check the room details. Displayed by default.
  showInviteToCohostButton?: boolean; // Whether to show the button that is used to invite the audience to co-host on the host end.
  showRemoveCohostButton?: boolean; // Whether to show the button that is used to remove the audience on the host end.
  showRequestToCohostButton?: boolean; // Whether to show the button that is used to request to co-host on the audience end.
  rightPanelExpandedType?: RightPanelExpandedType; // Controls the type of the information displayed on the right panel, display "None" by default.
  autoHideFooter?: boolean; // Whether to automatically hide the footer (bottom toolbar), auto-hide by default. This only applies to mobile browsers.
  enableUserSearch?: boolean; // Whether to enable the user search feature, false by default.
  showMoreButton?: boolean; // Whether to enable the more button, true by default.
  showUserName?: boolean; // Whether to display the user name on chat. true by default
  hideUsersById?: string[]; // Hide the screen corresponding to the user id
  videoViewConfig?: {
    userID?: string; // user ID
    showAvatarWhenCameraOff?: boolean; // Whether to display the user profile picture when the camera is off. The default value is true
  }[];
  backgroundUrl?: string; // background
  liveNotStartedTextForAudience?: string; // Custom text displayed for the audience before the live broadcast starts.
  startLiveButtonText?: string; // Custom Start Live button Text.
  // When a user is invited during a call, the Invite User window appears on the inviting party. If you want to hide this view, set it to false. Display by default.
  // You can cancel the invitation to this user in this view.
  showWaitingCallAcceptAudioVideoView?: boolean;
  // Configure the call invitation list during a call
  callingInvitationListConfig?: {
    waitingSelectUsers: ZegoUser[]; // Waiting for selected members
    defaultChecked?: boolean; // Whether it is selected by default, the default value is true
  };

  // 1.4 Leaving view
  showLeavingView?: boolean; // Whether to display the leaving view. Displayed by default.
  showLeaveRoomConfirmDialog?: boolean; // When leaving the room, whether to display a confirmation pop-up window, the default is true

  // 2 Related event callbacks
  onJoinRoom?: () => void; // This will be triggered when you join the room. 
  onLeaveRoom?: () => void; // This will be triggered when you left the room.
  onUserJoin?: (users: ZegoUser[]) => void; // This will be triggered when in-room participants join the room.
  onUserLeave?: (users: ZegoUser[]) => void; // This will be triggered when in-room participants left the room.
  onUserAvatarSetter?: (user: ZegoUser[]) => void; // Callback for the user avatar can be set.
  onLiveStart?: (user: ZegoUser) => void; //  Callback for livestream starts.
  onLiveEnd?: (user: ZegoUser) => void; // Callback for livestream ends.
  onYouRemovedFromRoom?: () => void; // Callback for you removed from the room.
  onInRoomMessageReceived?: (messageInfo: InRoomMessageInfo) => void; // Callback for in-room chat message received.
  onInRoomCustomCommandReceived?: (command: ZegoSignalingInRoomCommandMessage[]) => void;
  onReturnToHomeScreenClicked?: () => void; // When the "Return to home screen" button is clicked, this callback is triggered. After setting up this callback, clicking the button will not navigate to the home screen; instead, you can add your own page navigation logic here.
}

// Here’s an example that hides the prejoin view page:
zp.joinRoom({
          container: document.querySelector("#root"),
          showPreJoinView: false
});

Copied!

Authentication and Kit Token

Follow the steps to generate a Kit Token.

Using NPM package manager

Prepare the environment

Install the SDK

Initialize the SDK

Complete code

Complete parameter examples

Related guide