本文主要介绍如何快速将腾讯云实时互动-教育版 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