tencent cloud

实时互动-教育版

动态与公告
低代码互动课堂产品更名公告
关于低代码互动课堂升级的公告
产品简介
产品概述
应用场景
产品功能
产品优势
购买指南
计费概述
包月套餐说明
计费示例
购买指引
欠费停服资源回收说明
退费说明
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 相关问题
设备性能要求问题
相关协议
Service Level Agreement

Windows 和 macOS

PDF
聚焦模式
字号
最后更新时间: 2025-02-18 09:36:17
为提供跨平台的桌面应用程序,Windows 和 macOS 端使用了 Electron 的方案进行开发,本文主要介绍如何快速将腾讯云 LCIC Electron SDK 集成到您的项目中。

前提条件

您已经 注册腾讯云 账号,并完成 实名认证

步骤一:创建新的应用

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. 其中scenedebugjsdebugcss为非必填参数,在需要自定义 UI 时才需设置,具体可参考自定义 UI 集成。其中debugjsdebugcss只用于自定义布局、组件时的调试,且只支持通过localhost127.0.0.1的地址进行访问,在发布阶段请勿使用此参数。
6. lnglocationlayout也是非必填参数,业务侧可自行判断是否需要传入,不传则使用默认值,其中layout参数只有在教室布局为视频+文档布局(videodoc)时才生效。
字段
类型
含义
备注
必填

userid
string
用户名
通过 RegisterUser 接口获取

classid
string
课堂 ID
通过 CreateRoom 接口创建返回获取

token
string
后台鉴权参数
通过 LoginUser 接口获取

version
string
课堂版本号
(从tcic-electron-sdk v1.9.0版本起将正式废弃此参数)通过发布日志选择对应版本

scene
string
场景名称
区分不同的定制布局,通过 SetAppCustomContent 接口配置

role
string
进入课堂角色,默认空
可选参数 supervisor(巡课/内容审查) 只有已注册应用内巡课用户才有权限

debugjs
string
自定义 UI 的 JS 链接
通过自定义 UI 集成方式获取

debugcss
string
自定义 UI 的 CSS 链接
通过自定义 UI 集成方式获取

lng
string
语言参数,默认 zh-CN
当前支持中文(简体)、中文(繁体) 、English、韩语、日语。可拼接相应参数,展示对应语种。参数:zh-CN、zh-TW、en-US、ka、ja。

还支持西班牙语、法语、德语、泰语、马来语、印尼语等多语种,可联系销售或产品了解。

location
boolean
是否上报经纬度位置信息
默认 false 不上报

layout
string
页面布局
默认顶部布局(top),当前支持双排布局(double)、右侧布局(right)、左侧布局(left)、三分布局(three)


步骤四:进入课堂

针对不同业务场景需要,我们提供了以下两种接入集成方式。

方式一:URL 拼接

通过浏览器呼起客户端的能力。客户端分为腾讯云提供的 LCIC-Demo 客户端和自定义客户端。区别在于客户端图标、名称、初始页面不一样。

使用浏览器直接呼起客户端

1. 下载客户端并安装。
macOS
2. 通过链接唤起客户端,当用户在浏览器中访问或跳转到 URLtcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}上时,浏览器会请求打开 LCIC-Demo 客户端。

中转页呼起方式(推荐)

通过简单快速集成我们的 LCIC Electron SDK,业务侧实现跳转中转页,识别成功就直接跳转,失败则优先下载客户端。如果用户取消或者不下载,再通过跳转打开 web 版本的上课页面。
具体流程
在进入课堂时需先跳转至一个中转页,在中转页内处理用户跳转逻辑。获取上课参数拼接到此 URLtcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}上,即可唤起客户端应用。
流程可参见下图:



下载 ElectronProtocolCheck.js 引入自己的项目中。中转页中的示例代码如下:
// ElectronProtocolCheck 文件代码见github示例
import ElectronProtocolCheck from './ElectronProtocolCheck';
// 需要进入课堂的id
const classId = 368507569;
// 当前进入课堂用户的id
const userId = "JIUzI1NiIsIn123456";
// token 需要动态从后台接口获取,防止登录态过期失效
const token = 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII';
const url = `tcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}`;
console.log(`callClient->start: ${url}`);
// 唤起客户端
ElectronProtocolCheck(
url,
successCallBack: (res) => {
// 呼起成功
console.log('callClient->success! ');
},
failCallBack: (res) => {
console.log('callClient->failed! ');
// 没有呼起来, 建议此处实现提示下载的弹窗

// 如果用户点击下载 --> 换弹窗口信息,打开客户端。

// 如果用户取消下载或关闭弹窗。在让用户尝试体验web/H5 版本的课堂
// 也可以加上超时弹窗 一般 2500ms 内用户没有做出点击操作,可以出现模态点击框
},
unsupportedCallBack: () {
// 浏览器不支持等情况,可以走 web 链接加载
});
我们为您提供完整的 Demo, 单击 LCIC-Electron-Demo 查看 。
说明:
在拼接的 URL 中,若传入的userid与当前课堂指定的teacherid是一致的,则当前用户为老师。若与当前课堂的助教 ID(assistantid)一致,则为助教,否则为学生。

方式二:SDK 集成

1. 由于部分依赖库的原因,请确保您使用以下基础库版本。
开发框架
版本
Electron
10.4.3+
Node
10.14.1+
2. 在您的项目中使用 npm 命令安装 SDK 包。
npm install tcic-electron-sdk@latest
说明:
TCIC Electron SDK 最新版可在 tcic-electron-sdk 中查看
3. 在项目脚本里引入模块后,调用初始化接口并传入之前获取的参数调起课中页面。
const TCIC = require('tcic-electron-sdk')

TCIC.initialize({
classId: '368507569',
userId: '123456',
token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
// 如果提供了url, 则url参数优先级高于上述参数
url: 'https://class.qcloudclass.com/latest/class.html?classid=xxxx&userid=xxx',
onReady() {
// 可选,拉起课堂窗口时的回调
},
onClose() {
// 可选,所有窗口都被关闭时的回调
},
sign: string, // 可选,客户业务使用用户签名
cid: string, // 可选,客户业务使用用户id
uid: string, // 可选,客户业务使用用户id
})

高级功能

流水线打包接入

若您希望生成的客户端拥有自己的品牌 logo 和应用名的同时,能快速集成现有业务系统,可以通过使用我们提供的流水线打包方式进行集成。
具体流程参见下图:



1. 处理业务逻辑
在打包后,业务侧可通过 window 全局变量上的 joinClass 方法进入课堂 ,若之前业务侧已通过 URL 或 SDK 集成方式实现进课逻辑,可参考以下示例进行兼容。

const options = {
classId: '368507569',
userId: '123456',
token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
};
// 点击进入课堂的逻辑方法
window.joinClass(options);

// 如何同时兼容原有逻辑呢?请参考下面的代码逻辑

// 判断是否存在这个方法
if (window.joinClass) {
window.joinClass(options);
} else {
// 原有的进入课堂逻辑
}
业务侧需通过window全局变量上的closeWin关闭当前的客户端。
window.closeWin();
2. 准备对应的物料清单,具体如下所示:
字段
含义
必填
AppName
App 名称,如XX课堂
Logo
应用 Logo,请提供规格为256x256的 ico/png 图片
URL
业务 URL
注意:
业务 URL 应是已经具备了登录态的完整 URL,如果没有登录态,能自动跳转至登录入口。配置的业务 URL 不应是登录页,否则用户每次打开都需要重新登录。
3. 发送打包申请邮件,请按照以下格式进行发送,并以附件的形式附带上述物料,信息及物料确认无误的情况下我们将会在1个工作日完成打包。
说明:
收件人:mediaservices@tencent.com
主题
申请客户端打包
内容
公司名称:xxx 有限公司
个人姓名:
联系方式:
打包物料 (附件)

自定义 UI 集成

为满足不同客户需求,LCIC Electron 目前还提供了自定义 UI 的集成方案。用户可自定义业务侧课中的布局及样式,通过 界面定制 可以获取到业务侧的JS 及 CSS 链接,将debugjsdebugcss参数拼接到上方的链接上即可(此参数只用于调试),如下代码所示:
// URL拼接方式
const url = `tcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}debugjs=http://localhost:443/demo/dist/myLib.umd.min.js&debugcss=http://localhost:443/demo/dist/myLib.css`;

// SDK集成方式
TCIC.initialize({
classId: '368507569',
userId: '123456',
token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
})

// 流水线打包方式
const options = {
classId: '368507569',
userId: '123456',
token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
};
window.joinClass(options);
当自定义 JS 与 CSS 调试完成后,可通过云 API 接口 SetAppCustomContent 控制台 > 应用配置 > 场景配置将场景与自定义的 JS、CSS 链接进行绑定,在进入课堂时将scene参数拼接到 URL 或添加到对应入参上,即可加载对应场景的布局及组件。在涉及多种班型、多种布局时,业务侧可根据此参数实现场景的切换。

自定义业务域名

在课中页面时,若业务侧想隐藏课堂域名,只显示业务域名,可通过 内容分发网络控制台(CDN) 新建业务域名,并回源到课堂域名即可,详细流程请参见 自定义业务域名

其他相关文档

LCIC API


帮助和支持

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

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

文档反馈