使用 NPM

本文档适用于 Web 工程框架，并支持 PC 端和移动端浏览器（包括 WebViews）。如果您使用的是 React、Vue、Angular 等框架，可以参考本文档。

准备环境

在开始集成互动直播 UIKit 前，请确保开发环境满足以下要求：

Windows 或 macOS 开发电脑已经连接到 Internet。
满足 ZEGO Express Web SDK 兼容性的浏览器（具体请参考浏览器兼容性和已知问题），推荐使用最新版本的 Google Chrome 浏览器。

前提条件

已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 AppSign，详情请参考控制台 - 项目信息。
联系 ZEGO 技术支持，开通 UIKit 相关服务。

集成 SDK

Untitled

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

Copied!

初始化 SDK

生成一个 Kit Token。

Warning

计划正式上线应用时，请参考此步骤生成 Kit Token。如果您想加快集成测试，可以先 跳过这一步。

在以下代码中将 appID 和 serverSecret 参数替换为您从管理控制台获取的项目 AppID 和 ServerSecret。

Note

为方便测试，以下代码使用 generateKitTokenForTest 接口生成 Kit Token。为规避安全风险，在您的 App 上线时，请在您的服务端生成 Token，并在客户端调用 generateKitTokenForProduction 接口生成 Kit Token，详情请参考使用 Kit Token 鉴权。
UIKit 默认语言为英文，如需修改为中文，请在 joinRoom 时传入 language 参数。

React

Next.js

Angular

Vue

import * as React from 'react';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } 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 myMeeting = async (element) => {
     // 生成 Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

    
     // 使用 Kit Token 创建实例对象。
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // 开始通话
      zp.joinRoom({
        container: element,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // 要实现一对一通话，请在此处修改参数为[ZegoUIKitPrebuilt.OneONoneCall]。
        },
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS
      });
        
    
  };

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

Copied!

// ... 其他业务逻辑代码

const { ZegoUIKitPrebuilt, ZegoUIKitLanguage } = await import("@zegocloud/zego-uikit-prebuilt");
const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
   container: element,
   sharedLinks: [
          {
            name: 'Personal link',
            url:
            window.location.protocol + '//' + 
            window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
    ],
   scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // 要实现一对一通话，请在此处修改参数为[ZegoUIKitPrebuilt.OneONoneCall]。
    },
    // 设置语言为中文
    language: ZegoUIKitLanguage.CHS
});  
// ... 其他业务逻辑代码

Copied!

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } 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);

     // 生成 Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

      // 使用 Kit Token 创建实例对象
      const zp = ZegoUIKitPrebuilt.create(kitToken);

      // 开始通话
      zp.joinRoom({
        container: this.root.nativeElement,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
            window.location.protocol + '//' + 
            window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // 要实现一对一通话，请在此处修改参数为[ZegoUIKitPrebuilt.OneONoneCall]。
        },
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS
      });
  }
}

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);
      // 生成 Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

      // 从 Kit Token 创建实例对象。
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // 开始通话
      zp.joinRoom({
        container: this.$refs.root,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // 要实现一对一通话，请在此处修改参数为[ZegoUIKitPrebuilt.OneONoneCall]。
        },
        // 设置语言为中文
        language: "zh-CN"
      });
  },
};
</script>

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

Copied!

React

Next.js

Angular

Vue

import * as React from 'react';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } 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',
  });
 // 生成 Kit Token
  const appID = ;
  const serverSecret = "";
  const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


  // 开始通话
  let myMeeting = async (element) => {
      // 通过 Kit Token 创建实例对象
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // 开始通话
      zp.joinRoom({
        container: element,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
      });
  };

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

Copied!

// ... 一些其他逻辑代码
const { ZegoUIKitPrebuilt, ZegoUIKitLanguage } = 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',
});
// 生成 Kit Token
const appID = ;
const serverSecret = "";
const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

// 通过 Kit Token 创建实例对象。
const zp = ZegoUIKitPrebuilt.create(kitToken);
// 开始通话
zp.joinRoom({
   container: element,
   scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
    },
    sharedLinks,
    // 设置语言为中文
    language: ZegoUIKitLanguage.CHS,
});

Copied!

import { Component, ElementRef, ViewChild } from '@angular/core';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } 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',
    });
   // 生成 Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


   // 通过 Kit Token 创建实例对象
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // start the call
  zp.joinRoom({
        container: this.root.nativeElement,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
   });
  }
}

Copied!

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

<script>
import HelloWorld from './components/HelloWorld.vue';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } 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',
    });  
   // 生成 Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

  // 通过 Kit Token 创建实例对象
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // 开始通话
  zp.joinRoom({
        container: this.$refs.root,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
   });
  },
};
</script>

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

Copied!

完整代码

点击以下按钮获取完整代码：

React

Angular

Vue

完整参数示例

部分功能支持自定义调整参数。以下是完整参数示例：

展开查看完整参数实例

使用 NPM

准备环境

前提条件

集成 SDK

初始化 SDK

完整代码

完整代码

完整参数示例

相关指南