使用 WordPress
本文档将介绍如何在 WordPress 上集成音视频通话 UIKit。
准备环境
在开始集成音视频通话 UIKit 前,请确保开发环境满足以下要求:
- Windows 或 macOS 开发电脑已经连接到 Internet。
- 满足 ZEGO Express Web SDK 兼容性的浏览器(具体请参考 浏览器兼容性和已知问题),推荐使用最新版本的 Google Chrome 浏览器。
前提条件
- 已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 - 项目信息。
- 联系 ZEGO 技术支持,开通 UIKit 相关服务。
实现步骤
1 添加一个新页面
登录 WordPress 控制面板,在侧边栏点击 Add New 创建一个新页面。
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 = getUrlParams().get('roomID') || Math.floor(Math.random() * 10000) + "";
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.src =
"https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
1
4 传入 appID 和 serverSecret
在图中高亮代码传入您从 ZEGO 控制台 获取的项目的 AppID 和 ServerSecret,详情请参考 控制台 - 项目信息。
5 预览
点击 Save Draft 保存草稿。点击 Preview 按钮来执行代码。
恭喜!您已完成所有步骤!
相关指南
认证和 Kit Token
按照步骤生成 Kit Token。