文档中心
RoomKit
快速开始
集成

集成

更新时间：2022-06-17 19:25

1 准备环境

在开始集成 RoomKit SDK 前，请确保开发环境满足以下要求：

准备一台可以连接到互联网的 Windows 或 macOS 计算机。
PC 平台：Chrome 浏览器 74 或以上版本。

H5 移动平台的兼容性如下表：

平台	浏览器	备注
iOS	Chrome	支持 iOS 10.0 或以上版本。
iOS	Safari	支持 iOS 10.0 或以上版本。
iOS	微信内嵌浏览器	支持 iOS 10.0 或以上版本。
Android	Chrome	支持 Android 8.0 或以上版本。
Android	微信内嵌浏览器	支持 Android 8.0 或以上版本。

2 集成 SDK

请参考下载 SDK 包，下载最新版本的 SDK，下载完成后进行解压。
SDK 所有文件如下图所示。

其中：
- iconfont、img、video 文件夹：SDK 的资源文件（注意：使用时，请不要更改这些文件夹中的任何文件）。
- ZegoRoomKit.js：SDK 文件。

创建 “index.html” 文件，目录结构如下。

静态项目中 SDK 文件，需要与引用 SDK 的文件位置，处于同级目录下。例如：本项目中我们创建的 “index.html” 文件，需要引用 “ZegoRoomKit.js”，所以二者要处于同级目录下。
将以下代码添加到 “index.html” 文件的 body 中，使用 script 引入 SDK。
```
<script src="./ZegoRoomKit.js"></script>
```

index.html 文件完整示例代码

<html lang="en">
  <head>
    <title>Roomkit Demo</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- SDK 库 -->
    <script src="./ZegoRoomKit.js"></script>
    <script>
      // 以下信息请修改为控制台获取的实际值
      const SecretID = 100000
      const ProductID = 1000

      //初始化实例
      const zg = new ZegoRoomKit()
      //初始化配置信息
      zg.init({
        secretID: SecretID
      })

      //进入课堂
      zg.inRoomService()
        .joinRoomWithConfig(
          {
            userID: 111111, // 用户 ID
            userName: "user name", // 用户名
            roomID: "111111", // 房间 ID
            token: "", // 调用对应 Server API 获取 token
            role: 1, // 用户角色：1为老师 2为学生 4为助教。
            productID: ProductID // productID
          },
          "app"
        )
        .then((e) => {
          console.log("join room success")
        })
        .catch((err) => {
          console.error("fail to joinRoom", err)
        })
    </script>
  </body>
</html>

3 获取 Token

以下方式，仅适用于调测时获取 Token，不可用于线上业务服务。为了安全起见，上线时，开发者需要使用自己的业务服务器实现 Token 相关逻辑，具体请参考服务端 API - 获取 SDK Token。

获取公共库，建议将以下库文件下载到本地，进行本地依赖，或者上传到自己可信的 CDN 服务上。

<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/md5@2.3.0/dist/md5.min.js"></script>

获取 Token。

   const getTokenUrl=`https://roomkit-api.zego.im/auth/get_sdk_token` //临时使用，建议请求业务服务器
  // 请勿在生产环境中使用该方式获取 Token, 为了不暴露 secret_id 和 sign, 建议您使用自己的业务服务器实现 Token 相关逻辑, 然后让客户端请求业务服务器获取 Token, 请参考 服务端 API > 获取 SDK Token
  async function getSDKToken() {
    const timestamp = Math.floor(new Date().getTime() / 1000) + 3600 * 24 //过期时间（秒）一天
    const deviceId = ZegoRoomKit.deviceID()
    const verifyType = 3
    const version = 1
    const signStr = `${SecretSign.substr(0, 32)}${deviceId}${verifyType}${version}${timestamp}`
    const sign = MD5(signStr)

    const res = await axios({
      method: "post",
      url: getTokenUrl,
      data: {
        common_data: {
          platform: 32
        },
        sign: sign,
        secret_id: SecretID,
        device_id: deviceId,
        timestamp: timestamp
      }
    })
    if (res.data.ret.code !== 0) throw new Error(`get token error。{code:${res.data.ret.code},message:${res.data.ret.message}}`)
    return res.data.data.sdk_token
  }

获取 Token 完整示例代码

<html>
  <head>
    <title>Roomkit Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 公共库，用于获取token -->
    <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/md5@2.3.0/dist/md5.min.js"></script>
    <!-- SDK 库 -->
    <script src="./ZegoRoomKit.js"></script>
    <script>
      // 以下信息请修改为控制台获取的实际值
      const SecretID = 1000000
      const ProductID = 1000
      const SecretSign = ""

      window.onload = init()
      async function init() {
        try {
          //初始化实例
          const zg = new ZegoRoomKit()
          //初始化配置信息
          zg.init({
            secretID: SecretID
          })
          const token = await getSDKToken()
          //参数赋值
          const config = {
            userID: 111111, // 用户 ID
            userName: "user name", // 用户名
            roomID: "111111", // 房间 ID
            token, // 调用对应 Server API 获取 token
            role: 1, // 用户角色：1为老师 2为学生 4为助教。
            productID: ProductID // productID
          }

          //调用方法
          await zg.inRoomService().joinRoomWithConfig(config, "app")
        } catch (error) {
          console.error(`init error`, error)
        }
      }
       const getTokenUrl=`https://roomkit-api.zego.im/auth/get_sdk_token` //临时使用，建议请求业务服务器
      // 请勿在生产环境按照该方式获取 token , 为了不暴露 secret_id 和 sign 建议使用自己的业务服务器实现 Token 相关逻辑,客户端请求业务服务器获取token。 业务服务器生成token具体实现可以参考 服务端API > 获取 SDK Token
      async function getSDKToken() {
        const timestamp = Math.floor(new Date().getTime() / 1000) + 3600 * 24 //过期时间（秒）一天
        const deviceId = ZegoRoomKit.deviceID()
        const verifyType = 3
        const version = 1
        const signStr = `${SecretSign.substr(0, 32)}${deviceId}${verifyType}${version}${timestamp}`
        const sign = MD5(signStr)

        const res = await axios({
          method: "post",
          url: getTokenUrl,
          data: {
            common_data: {
              platform: 32
            },
            sign: sign,
            secret_id: SecretID,
            device_id: deviceId,
            timestamp: timestamp
          }
        })
        if (res.data.ret.code !== 0) throw new Error(`get token error。{code:${res.data.ret.code},message:${res.data.ret.message}}`)
        return res.data.data.sdk_token
      }
    </script>
  </body>
</html>

4 在本地 Web 服务器启动

本地服务器（localhost 或 127.0.0.1）运行 Web 应用时，仅作为调试使用；正式的生产环境必须使用 HTTPS 协议。

打开终端，执行 npm i live-server -g 命令，安装 live-server。
cd 进入 “index.html” 文件所在的根目录。
执行 live-server . 命令运行该项目，浏览器会自动打开 “index.html” 页面。

云通讯产品

AIGC

扩展服务

低代码互动产品

标准 AI 产品

AIGC

社交娱乐

电商直播

在线教育

医疗健康

互动游戏

协同办公

物联网

集成

1 准备环境

2 集成 SDK

3 获取 Token

4 在本地 Web 服务器启动