使用 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>

    function getUrlParams(url) {
        let urlStr = url.split('?')[1];
        const urlSearchParams = new URLSearchParams(urlStr);
        const result = Object.fromEntries(urlSearchParams.entries());
        return result;
    }

    // 通过调用方法生成 Kit Token。
    // @param 1: appID
    // @param 2: serverSecret
    // @param 3: 房间 ID
    // @param 4: 用户 ID
    // @param 5: 用户名
    const appID = ;
    const serverSecret = "";
    const roomID = ;
    const userID = Math.floor(Math.random() * 10000) + "";
    const userName = "userName" + userID;
    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, userID, userName);

    // 您可以根据 URL 参数分配不同的角色。
    let role = getUrlParams(window.location.href)['role'] || 'Host';
    role = role === 'Host' ? ZegoUIKitPrebuilt.Host : ZegoUIKitPrebuilt.Audience;

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
        container: document.querySelector("#root"),
        scenario: {
            mode: ZegoUIKitPrebuilt.LiveStreaming,
            config: {
                role,
            },
        },
        sharedLinks: [{
            name: '作为观众加入',
            url:
               window.location.protocol + '//' + 
               window.location.host + window.location.pathname +
                '?roomID=' +
                roomID +
                '&role=Audience',
        }],
        // 设置语言为中文
        language: "zh-CN",
    });
</script>

</html>

Copied!

完整参数示例

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

展开查看完整参数实例

使用 HTML 脚本

准备环境

前提条件

快速开始

完整参数示例

相关指南