本文主要介绍如何快速将腾讯云实时互动-教育版 LCIC Web/H5 应用快速集成到您的项目中。
前提条件
2. 您使用的桌面或手机浏览器能够支持音视频服务。详细要求可参考 Web 端常见问题。
步骤一：创建新的应用
1. 登录 实时互动-教育版控制台，在左侧导航栏选择快速跑通。
2. 默认进入创建应用页面，应用类型可选择“新建应用”，输入应用名称，例如 TestLCIC。
若您已创建应用，应用类型项可以单击“关联已有应用”。
说明：
3. 添加或编辑标签（可选） ，单击下一步。
说明：
应用名称只允许使用下划线、数字或中英文字符。
标签用于标识和组织您在腾讯云的各种资源。例如：企业可能有多个业务部门，每个部门有1个或多个 LCIC 应用，这时，企业可以通过给 LCIC 应用添加标签来标记部门信息。标签并非必选项，您可根据实际业务需求添加或编辑。
步骤二：获取 SDKAppId 和密钥(SecretKey)
1. 进入 应用管理 > 应用配置，获取 SDKAppId。
2. 进入 访问管理(CAM)控制台 获取密钥，若无密钥，需要在 API 密钥管理中进行新建，具体可参见 访问密钥管理。
步骤三：获取进入课堂所需参数
1. 通过调用云 API 接口 RegisterUser 注册用户，可以获取到对应的用户 ID(
userid)信息。2. 通过云 API 接口 LoginUser 登录，可以获取到用户鉴权
token信息。3. 通过云 API 接口 CreateRoom 创建课堂，可以获取到课堂号(
classid)信息。4. 明确需要集成的课堂版本：latest。
5. 其中
scene、debugjs、debugcss为非必填参数，在需要自定义 UI 时才需设置，具体可参见 自定义 UI 集成。其中debugjs和debugcss只用于自定义布局、组件时的调试，且只支持通过localhost或127.0.0.1的地址进行访问，在发布阶段请勿使用此参数。6.
lng、location、layout也是非必填参数，业务侧可自行判断是否需要传入，不传则使用默认值，其中layout参数只有在教室布局为视频+文档布局(videodoc)时才生效。字段 | 类型 | 含义 | 备注 | 必填 | |
userid | string | 用户名 | 是 | ||
classid | string | 课堂 ID | 是 | | |
token | string | 后台鉴权参数 | 是 | ||
version | string | 课堂版本号 | 通过发布日志选择对应版本。说明：互动课堂客户端版本，建议使用 latest | 是 | |
scene | string | 场景名称 | 否 | ||
debugjs | string | 自定义 UI 的 JS 链接 | 通过自定义 UI 集成方式获取 | 否 | |
debugcss | string | 自定义 UI 的 CSS 链接 | 通过自定义 UI 集成方式获取 | 否 | |
role | string | 进入课堂角色，默认空 | 否 | | |
lng | string | 语言参数，默认 zh-CN | 当前支持 zh-CN、en-US | 否 | |
location | boolean | 是否上报经纬度位置信息 | 默认 false 不上报 | 否 | |
layout | string | 页面布局 | 默认顶部布局(top)，当前仅视频文档模式有效，支持双排布局（double）、右侧布局(right)、左侧布局(left)、三分布局(three) | 否 | |
boardColor | string | 白板颜色 | 白板颜色设置，默认为：#182E25 ，支持 Hex 格式，也支持 rgba(0, 0, 0, .3)设置 | 否 | |
back_url | string | 退出课堂回调地址 | 默认为空，单击返回或退出课堂时需要回跳的页面地址。参数需要使用 encodeURIComponent 编码 | 否 | |
步骤四：进入课堂
标准功能
将刚才获取到的参数，按以下规范拼接出用户进入课堂的 URL，通过跳转此 URL 链接即可实现 Web 端的集成。https://class.qcloudclass.com/latest/class.html?userid=${userid}&token=${token}&classid=${classid}
具体链接如下所示：
https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569
说明：
高级功能
自定义 UI 集成
实时互动-教育版 LCIC Web/H5 目前还提供了自定义 UI 的集成方案。用户可自定义业务侧课中的布局及样式，通过 自定义 UI 部分 可以获取到业务侧的 JS 及 CSS 链接，将
debugjs及debugcss参数拼接到上方的链接上即可（此参数只用于调试），如下所示：https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&debugjs=http://localhost:443/demo/dist/myLib.umd.min.js&debugcss=http://localhost:443/demo/dist/myLib.css
当自定义 JS 与 CSS 调试完成后，可通过云 API 接口 SetAppCustomContent 或控制台 > 应用配置 > 场景配置将场景与自定义的 JS、CSS 链接进行绑定，在进入课堂时将
scene参数拼接到 URL 上，即可加载对应场景的布局及组件。在涉及多种班型、多种布局时，业务侧可根据此参数实现场景的切换。如下所示：http://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&scene=default
自定义业务域名
其他相关文档
LCIC API
Web 常见问题