Feature Overview
To help participants (teachers, students, etc.) ensure their setup is ready before class, we provide a dedicated, standalone Device Check page, separate from the main classroom interface. You can experience it here: Try it now. It supports custom configuration for checking the following items:
Speaker
Microphone
Camera
Network (System network environment, along with the HTTP requests and WSS domains used by the classroom)
System Environment (TRTC, IM, etc.)
A visualized summary report is provided, and the full diagnostic report can be exported.
Users can follow the progress bar to complete individual checks (customizable). Upon completion, the diagnostic results are automatically applied to the classroom session. The system defaults to selecting the verified device and domain configurations, ensuring the best possible initial user experience.
Integration Guide
We offer multiple integration methods, including direct URL access, iframe embedding, Electron SDK, and Mobile Native SDKs.
An npm package will be available in the future for direct use in your Web projects.
URL and Parameters
The following URL and parameters apply to all integration methods below. Note that regardless of the integration approach, this URL is required (Mobile Native SDKs only require the parameters).
|
list
| 1111
| A 4-digit bitmask control (1 = enabled, 0 = disabled). Order: 1st: Speaker 2nd: Microphone 3rd: Camera 4th: Network & System Environment Example: 0101 enables only Microphone and Network & System checks. |
language
| auto
| UI language. Currently supports Simplified Chinese and English: - auto: Auto-detect - zh: Simplified Chinese - en: English |
theme
| light
| Theme appearance: - light: Light mode - dark: Dark mode |
Web
Web integration supports direct URL access or embedding via iframe.
Direct URL
Once completed, the results are automatically stored in the localStorage key tic_last_check_result. The classroom page (v1.10.3 and later) automatically reads this configuration upon loading, applying it as the default for network domains and devices.
Note: If your classroom project uses a custom domain, ensure the device check page is also served via CDN under the same domain to maintain same-origin policy compliance.
iframe Integration
You can integrate this feature into any page via an iframe. Simply set the src attribute of your iframe to the Device Check URL. After the check, the page sends a postMessage to the parent window containing the results:
{
type: 'TIC_DEVICE_CHECK_RESULT',
payload: result
}
Store this result and append the result object to the classroom entry URL when the user joins, for example: &tic_last_check_result={}.
Note: If both the URL and localStorage contain results, the URL parameter takes precedence.
Electron
Electron integration is provided via our SDK.
1. Ensure you are using the required base library versions:
2. Install the SDK via npm:
npm install tcic-electron-sdk@latest
3. Import the module and call openSiteWithUrl to launch the device check page:
const TCIC = require('tcic-electron-sdk');
TCIC.openSiteWithUrl({
url: `https://www.tencentclass.com/devicecheck/index.html?list=1111`, // 'list' is required for Electron
onReady: (mainWindow) => {
console.log('TCIC Device Check ready', mainWindow);
},
onClose: () => {
console.log('TCIC Device Check close');
}
});
3. Upon completion, results are cached in Electron's localStorage and automatically applied when you invoke TCIC.initialize to join a class.
Mobile Native
Mobile Native integration uses the same SDK as the main classroom application.
iOS
1. Install and configure the Low-Code Interactive Classroom iOS Native SDK (refer to this documentation). Minimum SDK version: 1.8.5.19. 2. Follow the classroom entry workflow. To trigger the device check, use the following customParams instead of standard parameters like schoolId or classId:
TCICClassConfig *roomConfig = [[TCICClassConfig alloc] init];
NSMutableDictionary<NSString *, NSString *> *customParams = [NSMutableDictionary dictionary];
customParams[@"deviceCheck"] = @"true";
customParams[@"deviceCheckParams"] = @"{"list": 1111}";
roomConfig.customParams = [customParams copy];
3. Results are saved to the iOS SDK's `localStorage` and applied automatically when joining the class.
Android
1. Install and configure the Low-Code Interactive Classroom Android Native SDK refer to this documentation. Minimum SDK version: 1.8.27. 2. Initialize the Web engine as described in the documentation before proceeding.
3. Configure the following parameters when triggering the class entry workflow:
Map<String, String> customParamsMap = new HashMap<>();
customParamsMap.put("deviceCheck", "true");
customParamsMap.put("deviceCheckParams", "{\\"list\\": 1111}");
TCICClassConfig.Builder builder = new TCICClassConfig.Builder()
.customParams(customParamsMap);
Results are saved to the Android SDK's localStorage and applied automatically when joining the class.
Exporting Results
In addition to automatic application, users can manually click "Copy Result" to export the full diagnostic log. Please share this log with our team if you need assistance troubleshooting device issues.
Custom Development
For UI or interaction adjustments, we provide SDK and UI component npm packages for your deployment:
Headless SDK: @tencent-classroom/device-check-sdk provides the core logic for microphone, camera, speaker, network, and system environment checks. It is web-ready and supports Web, Electron, and Mobile Native environments. Note: All custom builds must be deployed to a live environment. We highly recommend hosting the custom device check page under the same origin as your classroom to ensure localStorage settings persist seamlessly.
Implementation for Custom Pages
Web: Simply direct users to your custom URL.
Electron: Pass your custom URL to TCIC.openSiteWithUrl.
Mobile Native: Set the deviceCheckUrl parameter in your TCICClassConfig customParams alongside the deviceCheckParams.
Mobile Native: Set the deviceCheckUrl parameter in your TCICClassConfig customParams alongside the deviceCheckParams.