开发环境要求
Android SDK:API 21+ (Android 5.0+)
NDK:27.0.12077973+
Java:11+
Kotlin:支持
前置准备
步骤一:创建新的应用
1. 登录 实时互动-教育版 控制台,进入左侧导航栏的概览,选择新建应用。
2. 若尚未创建应用,则默认进入“创建应用”界面,输入应用名称,例如 TestLCIC。

若您已创建应用,可前往应用管理中,选择使用已有应用即可。

步骤二:获取 SDKAppId 和密钥(SecretKey)
1. 进入 应用管理 > 应用配置,获取应用 ID(SDKAppId)。
2. 进入 访问管理(CAM)控制台 获取密钥,若无密钥,需要在 API 密钥管理中进行新建,具体可参见 访问密钥管理 。


步骤三:获取进入课堂所需参数
1. 通过调用云 API 接口 RegisterUser 注册用户,可以获取到对应的用户 ID(userId)信息。
2. 通过云 API 接口 LoginUser 登录,可以获取到用户鉴权 token 信息。
3. 通过云 API 接口 CreateRoom 创建课堂,可以获取到课堂号(classId)信息。
字段 | 类型 | 必填 | 含义 | 备注 |
userid | string | 是 | 用户名。 | |
classid | string | 是 | 课堂 ID。 | |
token | string | 是 | 后台鉴权参数。 | |
role | string | 否 | 进入课堂角色,默认空。 | 可选参数 supervisor(巡课/内容审查) ,只有已注册应用内巡课用户才有权限。 |
lng | string | 否 | 语言参数,默认 zh-CN。 | 当前支持中文(简体)、中文(繁体) 、English、韩语、日语、阿拉伯语、越南语。可拼接相应参数,展示对应语种。参数:zh-CN、zh-TW、en-US、ka、ja、ar、vi。 |
location | boolean | 否 | 是否上报经纬度位置信息。 | 默认 false 不上报。 |
layout | string | 否 | 页面布局。 | 默认顶部布局(top),当前仅视频文档模式有效,支持双排布局(double)、右侧布局(right)、左侧布局(left)、三分布局(three)。 |
boardColor | string | 否 | 白板颜色。 | 白板颜色设置,默认为:#182E25 ,支持 Hex 格式,也支持 rgba(0, 0, 0, .3)设置。 |
noEndClass | boolean | 否 | 禁用下课。 | 助教进房时带上这个参数,在助教点击退出时,将隐藏「下课」,仅展示「离开」按钮。 |
快速跑通
步骤一:导入 SDK
1. 在您的
Android
项目中的 settings.gradle
中添加:maven("https://storage.googleapis.com/download.flutter.io")maven("https://android.qcloudclass.com/repo")
2. 在您的
Android
项目中的build.gradle
文件中添加依赖,并且设置compileSdk
。compileSdk = 35implementation("com.qcloudclass.tcic_client_module:flutter_release:1.0")implementation("com.qcloudclass:tcic:1.0.9")implementation("io.flutter:flutter_embedding_release:1.0.0-18b71d647a292a980abb405ac7d16fe1f0b20434")
3. 在您的
AndroidManifest.xml
中的application
添加 tools:replace="android:allowBackup"
。<applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"tools:replace="android:allowBackup" // 添加这一行android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.Tcic_android_simple_demo"tools:targetApi="31">... 其他代码
步骤二:权限配置
在
android/app/src/main/AndroidManifest.xml
中添加以下权限:<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.RECORD_AUDIO" /><uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /><uses-permission android:name="android.permission.BLUETOOTH" /><uses-permission android:name="android.permission.CAMERA" /><uses-feature android:name="android.hardware.camera.autofocus" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
步骤三:初始化 SDK
在您的页面首次进入的时候需要初始化 TCIC SDK,您可以根据您的实际业务来处理。
TCICManager.initialize(context);
步骤四:设置回调事件
如果您需要监听课堂相关的事件,可添加相关回调,同初始化一样,您只需要添加一次即可。
TCICManager.setCallback(object : TCICManager.TCICCallback {override fun onJoinedClassSuccess() {Log.d(TAG, "onJoinedClassSuccess called from Flutter")runOnUiThread {Toast.makeText(ctx, "加入课堂成功", Toast.LENGTH_SHORT).show()}}override fun afterExitedClass() {Log.d(TAG, "afterExitedClass called from Flutter")runOnUiThread {Toast.makeText(ctx, "已退出课堂,关闭页面", Toast.LENGTH_SHORT).show()TCICManager.closeTCICActivity();}}override fun onJoinedClassFailed() {Log.d(TAG, "onJoinedClassFailed called from Flutter")runOnUiThread {Toast.makeText(ctx, "加入课堂失败", Toast.LENGTH_SHORT).show()}}override fun onKickedOffClass() {Log.d(TAG, "onKickedOffClass called from Flutter")runOnUiThread {Toast.makeText(ctx, "被踢出课堂", Toast.LENGTH_SHORT).show()}}override fun onMemberJoinedClass(data: Map<*, *>) {Log.d(TAG, "onMemberJoinedClass: $data")runOnUiThread {Toast.makeText(ctx,"成员加入: $data",Toast.LENGTH_SHORT).show()}}override fun onMemberLeaveClass(data: Map<*, *>) {Log.d(TAG, "onMemberLeaveClass: $data")runOnUiThread {Toast.makeText(ctx,"成员离开: $data",Toast.LENGTH_SHORT).show()}}override fun onRecivedMessage(message: Map<*, *>) {Log.d(TAG, "onRecivedMessage: $message")runOnUiThread {Toast.makeText(ctx,"收到消息: $message",Toast.LENGTH_SHORT).show()}}override fun onError(errorCode: String, errorMsg: String) {Log.e(TAG, "onError: $errorCode - $errorMsg")runOnUiThread {Toast.makeText(ctx,"错误: $errorMsg",Toast.LENGTH_SHORT).show()}}})
步骤五:进入课堂页面
在前置准备中,您已了解如何获取 token、userId 等进入课堂的必要参数,您只需要根据您的实际业务,填入这些参数即可。
@Composablefun Greeting(name: String, modifier: Modifier = Modifier) { val context = LocalContext.current// 这里用 Column 来垂直排列文本和按钮androidx.compose.foundation.layout.Column(modifier = modifier) {Button(onClick = {val token = "";val classId = ""val userId = ""val role = 1 /// 用户角色,0: 学生,1: 老师, 3: 助教, 4: 巡课val config = TCICConfig(token, classId, userId, role);TCICManager.setConfig(config);// 打开activitycontext.startActivity(TCICManager.getTCICIntent(context));}) {Text(text = "点击我进房")}}}
步骤六:页面自定义 view
您同时可以自定义课堂中的某些部分,例如 Header 组件, Message 组件的消息体等;例如自定义 Header 组件 Left 部分。下文以构造
Header
组件部分为例。创建 viewCreator
public class HeaderLeftViewCreator implements NativeViewCreator {@Overridepublic View createView(Context context, int id, Object args) {// 水平布局:文本 + info 图标LinearLayout layout = new LinearLayout(context);layout.setOrientation(LinearLayout.HORIZONTAL);layout.setGravity(Gravity.CENTER_VERTICAL);layout.setBackgroundColor(Color.TRANSPARENT);// 创建文本TextView textView = new TextView(context);String text = "Header Left 原生View";textView.setText(text);textView.setTextSize(12); // 12pxtextView.setTextColor(Color.WHITE);textView.setGravity(Gravity.CENTER_VERTICAL);LinearLayout.LayoutParams textParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);textView.setLayoutParams(textParams);layout.addView(textView);// 创建 info 图标ImageView infoIcon = new ImageView(context);infoIcon.setImageResource(android.R.drawable.ic_menu_info_details); // 使用系统 info 图标infoIcon.setColorFilter(Color.WHITE); // 设置图标颜色为白色// 在 createView 里LinearLayout.LayoutParams iconParams = new LinearLayout.LayoutParams(dp2px(context, 32), dp2px(context, 32)); // 32dp x 32dpiconParams.setMargins(8, 0, 0, 0); // 左边距 8pxinfoIcon.setLayoutParams(iconParams);layout.addView(infoIcon);return layout;}// dp 转 px 工具private int dp2px(Context context, float dp) {return (int) (dp * context.getResources().getDisplayMetrics().density + 0.5f);}@Overridepublic void disposeView(View view) {// 可以在这里处理 View 的清理工作// 例如取消监听器、释放资源等}}
将 View Creator 注册到 SDK
所有组件的配置以及自定义配置都只需要在
TCICConfig
中进行配置即可。val headerComponentConfig = TCICHeaderComponentConfig();headerComponentConfig.setHeaderLeftBuilder(::HeaderLeftViewCreator)val token = "";val classId = ""val userId = ""val role = 1 /// 用户角色,0: 学生,1: 老师, 3: 助教, 4: 巡课val config = TCICConfig(token, classId, userId, role);config.headerComponentConfig = headerComponentConfig;TCICManager.setConfig(config);context.startActivity(TCICManager.getTCICIntent(context));
这样您就获得了一个自定义 `Header` 组件的页面。
其他
TCICCallback 接口
public interface TCICCallback {/*** 加入课堂成功*/void onJoinedClassSuccess();/*** 退出课堂后*/void afterExitedClass();/*** 加入课堂失败*/void onJoinedClassFailed();/*** 被踢出课堂*/void onKickedOffClass();/*** 成员加入课堂* @param userId 用户信息*/void onMemberJoinedClass(Map userId);/*** 成员离开课堂* @param userId 用户信息*/void onMemberLeaveClass(Map userId);/*** 收到消息* @param messageJson 消息内容*/void onRecivedMessage(Map messageJson);/*** 发生错误* @param errorCode 错误代码* @param errorMsg 错误信息*/void onError(String errorCode, String errorMsg);}
头部组件配置 (TCICHeaderComponentConfig)
TCICHeaderComponentConfig headerConfig = new TCICHeaderComponentConfig();// 设置左侧视图headerConfig.setHeaderLeftBuilder(new HeaderLeftViewCreator());// 设置头部视图headerConfig.setHeaderBuilder(new HeaderViewCreator());// 设置头部操作视图headerConfig.setHeaderActionsBuilder(new HeaderActionCreator());// 设置右侧视图headerConfig.setHeaderRightBuilder(new HeaderRightViewCreator());
消息组件配置
TCICMessageComponentConfig messageConfig = new TCICMessageComponentConfig();// 设置消息头部视图messageConfig.setMessageHeaderBuilder(new MessageHeaderViewCreator());// 设置消息气泡视图messageConfig.setMessageBubbleBuilder(new MessageBubbleViewCreator());// 设置消息项视图messageConfig.setMessageItemBuilder(new MessageItemViewCreator());// 设置消息行视图messageConfig.setMessageRowBuilder(new MessageRowViewCreator());
音视频组件配置
TCICVideoComponentConfig videoConfig = new TCICVideoComponentConfig();// 设置视频操作视图videoConfig.setVideoActionBuilder(new VideoActionViewCreator());// 设置视频浮动视图videoConfig.setVideoFloatBuilder(new VideoFloatViewCreator());
自定义视图
public class CustomViewCreator implements NativeViewCreator {@Overridepublic View createView(Context context) {// 创建自定义视图View customView = LayoutInflater.from(context).inflate(R.layout.custom_view, null);return customView;}}
注册自定义视图
TCICManager.registerNativeViewCreator("custom_view_type", new CustomViewCreator());// 检查视图是否已注册boolean isRegistered = TCICManager.isViewCreatorRegistered("custom_view_type");// 获取所有已注册的视图类型List<String> registeredTypes = TCICManager.getRegisteredViewCreators();
技术支持
如果您在使用过程中遇到问题,可以通过以下方式获取技术支持:
腾讯云开发者社区