使用 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
1
初始化 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>
);
}
1
// ... 其他业务逻辑代码
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
});
// ... 其他业务逻辑代码
1
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
});
}
}
1
<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>
1
完整代码
点击以下按钮获取完整代码：
React
Angular
Vue
完整代码
完整参数示例
部分功能支持自定义调整参数。以下是完整参数示例：
相关指南
认证和 Kit Token
按照步骤生成 Kit Token。