帮你快速理解、总结文档立即下载
文档中心>实时互动-教育版>开发指南>进阶功能>独立版设备检测-课堂小助手

独立版设备检测-课堂小助手

最近更新时间:2026-04-13 14:36:11
我的收藏

功能介绍

为帮助教师、学生等课堂参与者在上课前完成设备调试,我们提供独立的课前检测功能页面,与课堂主页分离。您可以单击此处 立即体验。
支持自定义配置,检测以下项目:
扬声器
麦克风
摄像头
网络(系统网络环境及课堂使用的 HTTP 请求和 WSS 域名)
系统环境(TRTC、IM 等)
提供可视化检测报告汇总,并支持导出完整检测报告。
效果如下:


用户可按照进度条完成各项检测(可自定义开启检测项目)。完成后,检测结果将自动应用于课堂中。系统会默认选择已通过检测并修复的设备配置及域名配置,确保用户获得最佳初始体验。

集成指引

我们前期提供直接访问 URL、iframe 集成、Electron SDK、移动端 Mobile Native SDK 集成等多种接入方式供您选择。
后期将提供 npm 包,方便您在 Web 项目中直接使用。

URL 及参数

该部分 URL 及参数适用于下方所有接入方案,可统一参考。目前无论采用何种接入方式,均需使用该 URL (移动端 Native SDK 仅需使用这里的参数)。
线上设备检测链接:单击此处进行检测
参数
默认值
说明
list
1111
四位数字位掩码控制,每位1代表启用,0代表不启用。顺序分别是:
第一位: 扬声器
第二位: 麦克风
第三位: 摄像头
第四位: 网络及系统环境
例如:0101代表只启用麦克风和网络及系统环境检测。
language
auto
语言,目前支持简体中文和英语,具体 value 为:
auto:语言自适应
zh:简体中文
en:英文
theme
light
主题配色
light:亮色模式
dark:暗色模式

Web

Web 提供两种方式供用户使用,直接访问上述 URL 及通过 iframe 嵌入您的网页中。

访问 URL

用户可直接访问 线上地址链接 进行设备检测。
检测完成后,结果数据将自动存储在 localStorage 的 `tic_last_check_result` 字段中。课堂页面(1.10.3版本后)在加载时会自动读取该配置,作为网络域名及设备的默认参数。
若您的课堂项目使用自定义域名,请确保将设备检测页面也通过 CDN 回源至同一域名,以保证设备检测与课堂运行在相同域名下。

iframe 集成

您可以将该功能通过 iframe 集成到任意页面中。只需将 iframe 的 src 属性设置为 上述设备检测链接地址 即可。
检测完成后,设备检测会通过 postMessage 向外层发送事件,其中包含检测结果。格式如下:

{
type: 'TIC_DEVICE_CHECK_RESULT',
payload: result
}
请记录该结果,并在用户进入课堂时,将获取到的 result 对象原样拼接到课堂进房链接中,例如:&tic_last_check_result={}
如果课堂页面同时在 URL 中指定了检测结果,且 localStorage 中也有同域结果,则优先采用 URL 中指定的结果。

Electron

Electron 端目前提供 SDK 接入的方式。
1. 由于部分依赖库的原因,请确保您使用以下基础库版本。
开发框架
版本
Node
16.14.2
2. 在您的项目中使用 npm 命令安装 SDK 包。
npm install tcic-electron-sdk@latest
说明:
TCIC Electron SDK 最新版可在 tcic-electron-sdk 中查看。
需要确保版本大于 1.10.1。
3. 在项目脚本里引入模块后,调用 openSiteWithUrl 接口并传入之前获取的 URL 调起设备检测页面。
const TCIC = require('tcic-electron-sdk');

TCIC.openSiteWithUrl({
url: `https://class.qcloudclass.com/devicecheck/index.html?list=1111`, // list 请必传指定 electron 内
onReady: (mainWindow) => {
console.log('TCIC Device Check ready', mainWindow);
},
onClose: () => {
console.log('TCIC Device Check close');
}
});
4. 设备检测完成后,结果会记录在 Electron 的 localStorage 内,同域名下,并自动应用于课堂进房中。
您后续调用 TCIC.initialize 方法进入课堂,就会自动应用设备检测结果。

移动端 Mobile Native

Mobile Native 提供 SDK 接入的方式。使用和课堂主应用同一个 SDK。

iOS

1. 安装并配置好腾讯云实时互动-教育版 iOS 端 Native SDK(可参考此文档)。SDK 版本号要求: 最低 1.8.5.19。
2. 根据上述文档步骤5指引,开发相同的课堂进房流程,调起实际页面。
与之不同的是,如需进入设备检测页,无需配置该文档中的 schoolId、classId、userId、token 等现有所有参数,请配置以下参数。
TCICClassConfig *roomConfig = [[TCICClassConfig alloc] init];
NSMutableDictionary<NSString *, NSString *> *customParams = [NSMutableDictionary dictionary];
customParams[@"deviceCheck"] = @"true"; // 配置为 true 则进入设备检测
customParams[@"deviceCheckParams"] = @"{\\"list\\": 1111}"; // 这里的具体参数, 请参考本文档 “URL 及参数” 章节
roomConfig.customParams = [customParams copy];
3. 设备检测完成后,结果会记录在 iOS SDK 的 localStorage 内,同域名下,并自动应用于课堂进房中。
您后续正常进入课堂,就会自动应用设备检测结果。

Android

1. 安装并配置好腾讯云实时互动-教育版 Android 端 Native SDK(可参考此文档)。 SDK 版本号要求: 最低 1.8.27。
2. 根据上述文档步骤4、步骤5指引,申请 SDK 授权,并初始化 Web 引擎。请确保 Web 引擎初始化完成,才可执行后续操作。
3. 根据上述文档步骤7指引,开发相同的课堂进房流程,调起实际页面。
与之不同的是,如需进入设备检测页,无需配置该文档中的 schoolId、classId、userId、token 等现有所有参数,请配置以下参数。
Map<String, String> customParamsMap = new HashMap<>();
customParamsMap.put("deviceCheck", "true"); // 配置为 true 则进入设备检测
customParamsMap.put("deviceCheckParams", "{\\"list\\": 1111}"); // 这里的具体参数, 请参考本文档 “URL 及参数” 章节

TCICClassConfig.Builder builder = new TCICClassConfig.Builder()
.customParams(customParamsMap);
4. 设备检测完成后,结果会记录在 Android SDK 的 localStorage 内,同域名下,并自动应用于课堂进房中。
您后续正常进入课堂,就会自动应用设备检测结果。

结果导出

除了自动将结果应用于课堂项目外,用户还可以手动点击结果页面的"复制结果",导出完整的检测流程及检测记录。
如需我们协助排查用户设备问题,请复制并发送完整的检测结果给我们。

定制化开发

如果需要对界面内容、交互进行调整,我们提供设备检测 SDK 及 UI 组件 npm 包供您自行接入并部署使用。其中:
无 UI SDK:@tencent-classroom/device-check-sdk 包括课堂所用的麦克风、摄像头、扬声器、网络及系统环境检测所有底层能力,开箱即用。开发产物为 Web 项目,需自行部署线上 URL,支持 Web、Electron (需配合上述的课堂 SDK)及 Mobile Native (需配合上述的课堂 SDK) 使用。具体用法可以参见 README 说明。
UI:@tencent-classroom/device-check-ui 基于上方 SDK 的一套设备检测 UI,初始自带的默认界面和交互与提供的上述 免开发线上设备检测连接 相同。您可创建 Web 项目引入使用,并通过参数做一些基础的定制,或直接基于其 源码 GitHub 仓库 本地引入后修改界面及交互源码来使用。具体用法可以参见 README 说明。
无论您采用何种等级的定制化二次开发,基于 npm 包亦或是直接改代码,您均需要发布编译后的页面至线上。建议发布的设备检测页面和课堂同域同源,因设备检测完成后,会自动把检测结果选优数据(媒体设备、域名)配置到 localStorage 中,课堂主项目启动时,会从这里面引入配置,优化上课体验。
为了在项目中实际加载到您的定制版设备检测页面,还需要做如下的配置。

Web

用户直接访问定制的设备检测 URL 即可,无额外配置。

Electron

完成上述 Electron SDK 的引入后,实际启动设备检测窗口,请在调用 TCIC.openSiteWithUrl 方法时,url 传入定制的设备检测页面 URL。具体的参数配置可继续保持用我们内置的,也可以在 UI 层按需调整。
const TCIC = require('tcic-electron-sdk');

TCIC.openSiteWithUrl({
url: `https://${您定制的设备检测页面URL}?list=1111`, // list 请必传指定 electron 内
onReady: (mainWindow) => {
console.log('TCIC Device Check ready', mainWindow);
},
onClose: () => {
console.log('TCIC Device Check close');
}
});

Mobile Native 移动端

请参照上述通过接入课堂移动端 SDK 以进入移动端设备检测的方案,在配置 TCICClassConfig 时,额外指定 deviceCheckUrl 参数,传入不含参数的 URL,即可进入定制的设备检测页面。
参数请通过 deviceCheckParams 方式指定,会拼接在 URL 上。具体的配置参数,可继续使用我们内置的,也可以在 UI 层按需调整。
移动端其他接入步骤请参见前述章节.

Android

Map<String, String> customParamsMap = new HashMap<>();
customParamsMap.put("deviceCheckUrl", "定制的设备检测链接")
// ... 其他用法保持不变

iOS

TCICClassConfig *roomConfig = [[TCICClassConfig alloc] init];
customParams[@"deviceCheckUrl"] = @"定制的设备检测链接";
// ... 其他用法保持不变

联系我们

您有任何问题,可以扫码添加微信群与我们联系。