文档中心>实时互动-教育版>开发指南>进阶功能>独立版设备检测-课堂小助手

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

最近更新时间: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"] = @"定制的设备检测链接";
// ... 其他用法保持不变

联系我们

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