动态与公告

低代码互动课堂产品更名公告

关于低代码互动课堂升级的公告

产品简介

产品概述

应用场景

产品功能

产品优势

购买指南

计费概述

包月套餐说明

计费示例

购买指引

欠费停服资源回收说明

退费说明

Demo 下载及体验

客户端集成指引

Web 和 H5

Android

iOS

Windows 和 macOS

控制台指南

概览

用量统计

应用管理

快速跑通

API 文档

History

Introduction

API Category

Making API Requests

User Login APIs

Room Management APIs

Group Management APIs

Application Configuration APIs

Recording Management APIs

Courseware Management APIs

User Management APIs

Developer APIs

Data Types

Error Codes

界面定制

快速开始

事件监听

监听服务端事件回调

高级功能

自定义业务域名

移动端屏幕分享

移动端预加载

实践教程

排课系统集成

账户体系集成

录制回放集成

课件模块集成

LCIC 政策

隐私政策

数据处理和安全协议

常见问题

计费相关问题

录制相关问题

控制台与 API 授权问题

互动白板涂鸦不跟手问题

屏幕共享相关问题

应对防火墙限制相关问题

集成相关问题（Web）

Electron 相关问题

设备性能要求问题

Web 和 H5

PDF

聚焦模式

字号

最后更新时间： 2025-02-18 09:36:16

本文主要介绍如何快速将腾讯云实时互动-教育版 LCIC Web/H5 应用快速集成到您的项目中。
前提条件
1. 您已经 注册腾讯云 账号，并完成 实名认证。
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
用户名
通过 RegisterUser接口获取
是
﻿
classid
string
课堂 ID
通过 CreateRoom 接口创建返回获取
是
﻿
token
string
后台鉴权参数
通过 LoginUser 接口获取
是
﻿
version
string
课堂版本号
通过发布日志选择对应版本。说明：互动课堂客户端版本，建议使用 latest
是
﻿
scene
string
场景名称
用于区分不同的定制布局，通过 SetAppCustomContent 接口配置，默认为 default
否
﻿
debugjs
string
自定义 UI 的 JS 链接
通过自定义 UI 集成方式获取
否
﻿
debugcss
string
自定义 UI 的 CSS 链接
通过自定义 UI 集成方式获取
否
﻿
role
string
进入课堂角色，默认空
可选参数 supervisor(巡课/内容审查) ，只有已注册应用内巡课用户才有权限
否
﻿
lng
string
语言参数，默认 zh-CN
当前支持中文（简体）、中文(繁体) 、English、韩语、日语。可拼接相应参数，展示对应语种。参数：zh-CN、zh-TW、en-US、ka、ja。
﻿
还支持西班牙语、法语、德语、泰语、马来语、印尼语等多语种，可联系销售或产品了解。
否
﻿
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
说明：
在拼接的 URL 中userid与 创建课堂 指定的老师 ID（teacherid）是一致的，则当前用户为老师。若与当前课堂的助教 ID (assistantid)一致，则为助教，否则为学生。
iframe 集成
如果您需要将课堂页面集成到 iframe中，需要给 iframe 元素添加allow属性，以确保课堂页面可以正确获取到所需的浏览器权限:
<iframe
    allow="camera; microphone; fullscreen; display-capture; clipboard-read; clipboard-write;"
    src="https://class.qcloudclass.com/latest/class.html?userid=12345&token=xxx"
>
高级功能
自定义 UI 集成
实时互动-教育版 LCIC Web/H5 目前还提供了自定义 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
自定义业务域名
在课中页面时，若业务侧想隐藏课堂域名，只显示业务域名，可通过 内容分发网络(CDN)控制台 新建业务域名，并回源到课堂域名即可，详细流程请参见 自定义业务域名。
其他相关文档
﻿LCIC API﻿
﻿界面定制﻿
﻿Web 端相关问题﻿

帮助和支持

本页内容是否解决了您的问题？

您也可以联系销售或提交工单以寻求帮助。

填写满意度调查问卷，共创更好文档体验。

文档反馈

字段	类型	含义	备注	必填
userid	string	用户名	通过 RegisterUser接口获取	是
classid	string	课堂 ID	通过 CreateRoom 接口创建返回获取	是
token	string	后台鉴权参数	通过 LoginUser 接口获取	是
version	string	课堂版本号	通过发布日志选择对应版本。说明：互动课堂客户端版本，建议使用 latest	是
scene	string	场景名称	用于区分不同的定制布局，通过 SetAppCustomContent 接口配置，默认为 `default`	否
debugjs	string	自定义 UI 的 JS 链接	通过自定义 UI 集成方式获取	否
debugcss	string	自定义 UI 的 CSS 链接	通过自定义 UI 集成方式获取	否
role	string	进入课堂角色，默认空	可选参数 supervisor(巡课/内容审查) ，只有已注册应用内巡课用户才有权限	否
lng	string	语言参数，默认 zh-CN	当前支持中文（简体）、中文(繁体) 、English、韩语、日语。可拼接相应参数，展示对应语种。参数：zh-CN、zh-TW、en-US、ka、ja。还支持西班牙语、法语、德语、泰语、马来语、印尼语等多语种，可联系销售或产品了解。	否
location	boolean	是否上报经纬度位置信息	默认 false 不上报	否
layout	string	页面布局	默认顶部布局(top)，当前仅视频文档模式有效，支持双排布局（double）、右侧布局(right)、左侧布局(left)、三分布局(three)	否
boardColor	string	白板颜色	白板颜色设置，默认为：#182E25 ，支持 Hex 格式，也支持 rgba(0, 0, 0, .3)设置	否
back_url	string	退出课堂回调地址	默认为空，单击返回或退出课堂时需要回跳的页面地址。参数需要使用 encodeURIComponent 编码	否

tencent cloud

实时互动-教育版

Web 和 H5

前提条件

步骤一：创建新的应用

步骤二：获取 SDKAppId 和密钥(SecretKey)

步骤三：获取进入课堂所需参数

步骤四：进入课堂

标准功能

iframe 集成

高级功能

自定义 UI 集成

自定义业务域名

其他相关文档

帮助和支持