使用 WordPress

本文档将介绍如何在 WordPress 上集成互动直播 UIKit。

准备环境

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

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

前提条件

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

实现步骤

1 添加一个新页面

2 添加自定义 HTML

创建新页面后，点击 + 按钮，然后点击 Custom HTML 添加自定义 HTML。

3 在 HTML 块中添加互动直播 UIKit 代码

添加自定义 HTML 后，从下面的代码块中复制代码。

Note

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

Untitled

<script>
function getUrlParams(
  url  = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
     // 生成 Kit Token。
    // @param 1: appID
    // @param 2: serverSecret
    // @param 3: Room ID
    // @param 4: User ID
    // @param 5: Username
    const roomID = "room01";
    const userID = Math.floor(Math.random() * 10000) + "";
    const userName = "userName" + userID;
    const appID =  ;
    const serverSecret = "";
    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: 'Join as the audience',
            url:
                window.location.protocol + '//' +
                window.location.host + window.location.pathname +
                '?roomID=' +
                roomID +
                '&role=Audience',
        }],
        // 设置语言为中文
        language: "zh-CN",
    });
});

script.src =
  "https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>

Copied!

4 传入 appID 和 serverSecret

在图中高亮代码传入您从 ZEGO 控制台获取的项目的 AppID 和 ServerSecret，详情请参考控制台 - 项目信息。

5 预览

点击 Save Draft 保存草稿。点击 Preview 按钮来执行代码。

恭喜！您已完成所有步骤！