使用 HTML 脚本

本文档适用于几乎所有编程语言和框架，能支持 PC 端和移动端浏览器（包括 WebViews）。

音视频通话 UIKit 全部由 JavaScript 编写，并获得 Web 浏览器的原生支持，因此如果您使用的是 JQuery、PHP 或 JSP，可以参考本文档开始接入。

准备环境

在开始集成音视频通话 UIKit 前，请确保开发环境满足以下要求：

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

前提条件

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

快速开始

您需要生成一个 Kit Token。

Warning

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

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

Note

userID 和 roomID 只能包含数字、字母和下划线 (_)。
使用同一个 roomID 加入房间的用户可以相互通话。
为方便测试，以下代码使用 generateKitTokenForTest 接口生成 Kit Token。为规避安全风险，在您的 App 上线时，请在您的服务端生成 Token，并在客户端调用 generateKitTokenForProduction 接口生成 Kit Token，详情请参考使用 Kit Token 鉴权。
UIKit 默认语言为英文，如需修改为中文，请在 joinRoom 时传入 language 参数。

Untitled

<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>
    // 通过调用方法生成 Kit Token。
    // @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, //  要实现一对一通话，请将此处的参数修改为[ZegoUIKitPrebuilt.OneONoneCall]。
        },
        // 设置语言为中文
        language: "zh-CN",
    });
</script>

</html>

Copied!

完整参数示例

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

展开查看完整参数实例

使用 HTML 脚本

准备环境

前提条件

快速开始

完整参数示例

相关指南