实时互动-教育版 Flutter 快速接入

腾讯云实时互动-教育版是一款集成音视频连麦、互动白板和直播等多功能的产品，能够帮助您节省90%的开发工作量。在教育、医疗、金融和企业培训等领域，可帮助您快速搭建一对一教学、互动小班课、直播大班课和直播带货等多种互动直播业务场景。
TCIC Client 是一个包含 LCIC 所有功能的 Flutter 插件，您可以通过该插件快速集成 LCIC 功能，实现互动直播、互动白板、音视频连麦等核心能力。
﻿
﻿
﻿
支持平台
Android：API 21+ (Android 5.0 及以上)
iOS：12.0+
环境要求
Flutter 环境
Flutter SDK：^3.7.0
Dart SDK：≥ 1.17.0
Android 环境
Android SDK：API 21+
NDK：27.0.12077973+
Java：11+
Kotlin：支持
iOS 环境
iOS：12.0+
Xcode：14.0+
CocoaPods：1.12.0+
说明：
在线 DEMO 体验，可单击查看 TCIC Flutter Simple Demo。
快速跑通
1. 安装依赖
在您的 Flutter 项目根目录下执行以下命令安装依赖：
flutter pub add tcic_client_ui
2. 权限相关配置
在教学场景中，通常需要使用音视频互动、屏幕共享等功能，因此需在原生工程中配置对应权限。
Android 端配置
1. 权限配置
在 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"/>
2. 屏幕录制配置
同样在 AndroidManifest.xml 中添加屏幕录制辅助 Activity 及画中画支持：
<activity
    android:name=".MainActivity"
    android:supportsPictureInPicture="true" /> <!-- 画中画功能 -->
            
<activity 
    android:name="com.tencent.rtmp.video.TXScreenCapture$TXScreenCaptureAssistantActivity" 
    android:theme="@android:style/Theme.Translucent"/>
3. build.gradle 配置
在 android/app/build.gradle.kts 中进行如下配置：
android {
    namespace = "com.tencent.tcic"
    compileSdk = flutter.compileSdkVersion
    ndkVersion = "27.0.12077973" // 指定 NDK 版本
    
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
    
    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_11.toString()
    }
    
    defaultConfig {
        applicationId = "com.tencent.tcic"
        minSdk = flutter.minSdkVersion
        targetSdk = flutter.targetSdkVersion
    }
    
    // 解决重复 so 文件冲突
    packagingOptions {
        pickFirst("lib/arm64-v8a/libliteavsdk.so")
        pickFirst("lib/armeabi-v7a/libliteavsdk.so")
        pickFirst("lib/x86/libliteavsdk.so")
        pickFirst("lib/x86_64/libliteavsdk.so")
    }
}
4. 混淆配置
在 android/app/proguard-rules.pro 中添加：
# 腾讯云 SDK 混淆配置
-keep class com.tencent.** { *; }
-keep class com.tencent.rtc.** { *; }
-keep class com.tencent.liteav.** { *; }
-keep class com.tencent.trtc.** { *; }
-keep class com.tencent.imsdk.** { *; }
-keep class com.tencent.tls.** { *; }
-dontwarn com.tencentcloudapi.cls.android.producer.**
﻿
# Flutter 相关
-keep class io.flutter.** { *; }
-keep class io.flutter.plugins.** { *; }
iOS 端配置
权限配置
在 ios/Runner/Info.plist 中添加以下权限描述：
<!-- 相机权限 -->
<key>NSCameraUsageDescription</key>
<string>互动课堂需要访问您的相机以进行视频通话。</string>
﻿
<!-- 麦克风权限 -->
<key>NSMicrophoneUsageDescription</key>
<string>互动课堂需要访问您的麦克风以进行语音通话。</string>
﻿
<!-- 网络配置 -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
﻿
<!-- 后台模式 -->
<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>fetch</string>
    <string>picture-in-picture</string>
    <string>processing</string>
</array>
﻿
<!-- 屏幕录制扩展 App Group -->
<key>com.apple.security.application-groups</key>
<array>
    <string>group.com.tencent.comm.tcic.sharescreen</string>
</array>
3. 跑通代码
配置完权限后，将通过 接入准备 中获取的 classId、userId、token 传入组件即可启动课堂。
import 'package:tcic_client_ui/tcic_client_ui.dart';
import 'package:tcic_client_ui/controller/tcic_contoller.dart';
import 'package:tcic_client_ui/utils/model/enum/role_enum.dart';
import 'package:tcic_client_ui/utils/model/tcic_cofig_model.dart';
﻿
// 1. 创建控制器
final controller = TCICController();
﻿
// 2. 配置参数
final config = TCICConfig(
  userId: 'user123',        // 替换为您的 userId
  classId: 'class456',      // 替换为您的 classId
  role: RoleEnum.student,   // 设置角色
  token: 'your_token_here', // 替换为您的 token
);
﻿
// 3. 跳转到课堂页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TCICView(
      controller: controller,
      config: config,
    ),
  ),
);
跨应用屏幕共享 (iOS 专属)
iOS 系统上的跨应用屏幕分享，需要增加 Extension 录屏进程以配合主 App 进程进行推流。Extension 录屏进程由系统在需要录屏时创建，负责接收系统采集到的屏幕图像。
注意：
如果跳过步骤1（即不配置 App Group，接口传 null），屏幕分享依然可以运行，但稳定性会有所降低。
强烈建议配置正确的 App Group 以保障功能稳定性。
步骤1：创建 App Group
使用您的账号登录 Apple Developer，按以下步骤操作（完成后需重新下载 Provisioning Profile）：
1. 单击左侧的 Certificates, IDs & Profiles。
2. 在右侧界面中单击 + 号。
3. 选择 App Groups，单击 Continue。
4. 填写 Description 和 Identifier（Identifier 需传入接口中的 AppGroup 参数），单击 Continue。
﻿
﻿
﻿
5. 回到 Identifier 页面，选择 App IDs，单击您的 App ID（主 App 与 Extension 需进行相同配置）。
6. 选中 App Groups 并单击 Edit。
7. 选择刚创建的 App Group，保存配置。
﻿
﻿
﻿
8. 重新下载 Provisioning Profile 并配置到 Xcode 中。
步骤2：创建 Broadcast Upload Extension
1. 在 Xcode 菜单依次单击 File > New > Target...，选择 Broadcast Upload Extension。
2. 填写相关信息（无需勾选 Include UI Extension），单击 Finish。
3. 获取定制的 TXLiteAVSDK_ReplayKitExt.xcframework，将其拖入工程并勾选刚创建的 Target。
4. 选中新 Target，单击 + Capability，双击 App Groups。
﻿
﻿
﻿
5. 在生成的 Target.entitlements 文件中填写上述创建的 App Group Identifier。
﻿
﻿
﻿
6. 对主 App 的 Target 执行相同的 App Group 配置。
7. 在新 Target 中，将自动生成的 SampleHandler.swift 文件内容替换为以下代码（请将 APPGROUP 替换为您自己的 Identifier）：
import ReplayKit
import TXLiteAVSDK_ReplayKitExt
﻿
// 替换为您自己的 App Group Identifier
let APPGROUP = "group.com.tencent.comm.tcic.sharescreen"
﻿
class SampleHandler: RPBroadcastSampleHandler, TXReplayKitExtDelegate {
﻿
    let recordScreenKey = Notification.Name.init("TRTCRecordScreenKey")
﻿
    override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) {
        TXReplayKitExt.sharedInstance().setup(withAppGroup: APPGROUP, delegate: self)
    }
﻿
    override func broadcastPaused() {
        // 用户已请求暂停直播
    }
﻿
    override func broadcastResumed() {
        // 用户已请求恢复直播
    }
﻿
    override func broadcastFinished() {
        TXReplayKitExt.sharedInstance().finishBroadcast()
    }
﻿
    func broadcastFinished(_ broadcast: TXReplayKitExt, reason: TXReplayKitExtReason) {
        var tip = ""
        switch reason {
        case TXReplayKitExtReason.requestedByMain:
            tip = "屏幕共享已结束"
        case TXReplayKitExtReason.disconnected:
            tip = "应用断开"
        case TXReplayKitExtReason.versionMismatch:
            tip = "集成错误（SDK 版本号不相符合）"
        default:
            break
        }
﻿
        let error = NSError(domain: NSStringFromClass(self.classForCoder), code: 0, userInfo: [NSLocalizedFailureReasonErrorKey:tip])
        finishBroadcastWithError(error)
    }
﻿
    override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) {
        switch sampleBufferType {
        case RPSampleBufferType.video:
            TXReplayKitExt.sharedInstance().sendVideoSampleBuffer(sampleBuffer)
        case RPSampleBufferType.audioApp:
            // 处理应用程序音频
            break﻿
        case RPSampleBufferType.audioMic:
            // 处理麦克风音频
            break
        @unknown default:
            fatalError("未知类型")
        }
    }
}
参数说明
TCICView 组件参数
参数名
类型
是否必填
描述
controller
TCICController
是
控制器实例。
config
TCICConfig
是
核心配置信息。
callback
TCICCallback
否
课堂事件回调函数。
TCICConfig 核心配置
字段名
类型
是否必填
描述
userId
String
是
用户 ID。
classId
String
是
课堂 ID。
token
String
是
认证令牌。
role
RoleEnum
否
用户角色（学生/老师等）。
langConfig
TCICLangConfig
否
语言配置。
nameConfig
TCICNameConfig
否
角色名称自定义配置。
fontConfig
TCICFontConfig
否
字体配置。
liveplayerConfig
TCICLivePlayerConfig
否
直播播放器配置。
isLatestBackend
bool
否
是否使用最新后端。
isTestBackend
bool
否
是否使用测试后端。
componentConfig
List<TCICComponentConfig>
否
UI 组件自定义配置列表。
UI 组件配置 (TCICComponentConfig)
TCICComponentConfig 是一个抽象类，用于配置课堂界面中的各个 UI 组件。
使用示例：
final config = TCICConfig(
  userId: 'user123',
  classId: 'class456',
  role: RoleEnum.student,
  token: 'your_token_here',
  componentConfig: [
    HeaderComponentConfig(
      isShow: true,
      enableHandsUp: true,
      iconConfig: HeaderIconConfig(
        micIcon: 'custom_mic_icon.png',
        cameraIcon: 'custom_camera_icon.png',
      ),
    ),
    MemebersComponentConfig(enableStageUpDownAction: true),
    MessageComponentConfig(),
    SetttingComponentConfig(),
    VideoComponentConfig(),
    WhiteboardComponentConfig(),
  ],
);
HeaderComponentConfig (头部组件)
字段名
类型
描述
isShow
bool
是否显示头部组件（默认 true）。
enableHandsUp
bool
是否显示举手（默认 true）。
enableScreenShare
bool
是否显示屏幕共享（默认 true）。
enableMessage
bool
是否显示消息（默认 true）。
enableCourseware
bool
是否显示课件（默认 true）。
enableSetting
bool
是否显示设置（默认 true）。
enableMemberList
bool
是否显示花名册（默认 true）。
showClassStatus
bool
是否显示课程状态（默认 true）。
showClassTime
bool
是否显示课程时间（默认 true）。
showOnlineMemberCount
bool
是否显示在线成员数量（默认 true）。
showQuitButton
bool
是否显示退出按钮（默认 true）。
iconConfig
HeaderIconConfig
自定义头部组件图标配置。
headerBuilder
Widget Function()
自定义整个头部组件。
SettingComponentConfig (设置组件)
字段名
类型
描述
enableAudioSetting
bool
是否启用音频设置（默认 true）。
enableVideoSetting
bool
是否启用视频设置（默认 true）。
enableGeneralSetting
bool
是否启用通用设置（默认 true）。
showMemberJoinExitInfo
bool
是否显示成员加入/退出提示（默认 true）。
WhiteboardComponentConfig (白板组件)
字段名
类型
描述
enableCreateBoard
bool
是否启用创建白板（默认 true）。
enableBoardList
bool
是否启用白板列表（默认 true）。
enableSwitchPage
bool
是否允许 PPT 课件翻页（默认 true）。
说明：
其他组件如 MessageComponentConfig、VideoComponentConfig 均支持通过 Builder 函数进行高度自定义。
回调函数 (TCICCallback)
通过传入 TCICCallback，您可以监听课堂内的各类核心事件：
回调方法
触发时机
备注
onJoinedClassSuccess
加入课堂成功时
-
onJoinedClassFailed
加入课堂失败时
-
beforeExitedClass
退出课堂前
返回 false 可拦截/取消退出操作。
afterExitedClass
退出课堂后
-
onKickedOffClass
被踢出课堂时
-
onMemberJoinedClass
其他成员加入课堂时
-
onMemberLeaveClass
其他成员离开课堂时
-
onReceivedMessage
收到聊天消息时
-
beforeRenderMessage
渲染消息前
返回 false 可拦截该消息的 UI 渲染。
常见问题
1. 权限问题
Android 权限被拒绝：
检查 AndroidManifest.xml 中是否已添加相应权限。
确保在代码中动态申请了运行时权限。
iOS 权限被拒绝：
检查 Info.plist 中是否已添加权限描述文本。
确保权限描述文本清晰明了，否则可能被 App Store 拒绝。
2. 音视频问题
无法听到声音：
检查设备音量设置及麦克风权限是否已授权。
无法看到视频：
检查相机权限是否已授权，确认设备相机硬件功能正常。
3. 网络与连接问题
连接失败：
验证 SDKAppId 和 token 是否正确且未过期。
检查设备网络连接及防火墙设置。
音视频卡顿：
检查网络带宽是否充足，考虑在设置中降低音视频质量。
4. 白板问题
白板无法加载：
检查网络连接状态，验证白板配置参数是否合法。
白板操作无响应：
确认当前用户的角色权限（如观众角色默认无白板操作权限）。

字段名	类型	描述
`isShow`	bool	是否显示头部组件（默认 `true`）。
`enableHandsUp`	bool	是否显示举手（默认 `true`）。
`enableScreenShare`	bool	是否显示屏幕共享（默认 `true`）。
`enableMessage`	bool	是否显示消息（默认 `true`）。
`enableCourseware`	bool	是否显示课件（默认 `true`）。
`enableSetting`	bool	是否显示设置（默认 `true`）。
`enableMemberList`	bool	是否显示花名册（默认 `true`）。
`showClassStatus`	bool	是否显示课程状态（默认 `true`）。
`showClassTime`	bool	是否显示课程时间（默认 `true`）。
`showOnlineMemberCount`	bool	是否显示在线成员数量（默认 `true`）。
`showQuitButton`	bool	是否显示退出按钮（默认 `true`）。
`iconConfig`	HeaderIconConfig	自定义头部组件图标配置。
`headerBuilder`	Widget Function()	自定义整个头部组件。

字段名	类型	描述
`enableAudioSetting`	bool	是否启用音频设置（默认 `true`）。
`enableVideoSetting`	bool	是否启用视频设置（默认 `true`）。
`enableGeneralSetting`	bool	是否启用通用设置（默认 `true`）。
`showMemberJoinExitInfo`	bool	是否显示成员加入/退出提示（默认 `true`）。

参数名	类型	是否必填	描述
`controller`	TCICController	是	控制器实例。
`config`	TCICConfig	是	核心配置信息。
`callback`	TCICCallback	否	课堂事件回调函数。

回调方法	触发时机	备注
`onJoinedClassSuccess`	加入课堂成功时	-
`onJoinedClassFailed`	加入课堂失败时	-
`beforeExitedClass`	退出课堂前	返回 `false` 可拦截/取消退出操作。
`afterExitedClass`	退出课堂后	-
`onKickedOffClass`	被踢出课堂时	-
`onMemberJoinedClass`	其他成员加入课堂时	-
`onMemberLeaveClass`	其他成员离开课堂时	-
`onReceivedMessage`	收到聊天消息时	-
`beforeRenderMessage`	渲染消息前	返回 `false` 可拦截该消息的 UI 渲染。

Flutter 快速接入

本页目录：

支持平台

环境要求

Flutter 环境

Android 环境

iOS 环境

快速跑通

1. 安装依赖

2. 权限相关配置

Android 端配置

1. 权限配置

2. 屏幕录制配置

3. build.gradle 配置

4. 混淆配置

iOS 端配置

3. 跑通代码

跨应用屏幕共享 (iOS 专属)

步骤1：创建 App Group

步骤2：创建 Broadcast Upload Extension

参数说明

TCICView 组件参数

TCICConfig 核心配置

UI 组件配置 (TCICComponentConfig)

HeaderComponentConfig (头部组件)

SettingComponentConfig (设置组件)

WhiteboardComponentConfig (白板组件)

回调函数 (TCICCallback)

常见问题

1. 权限问题

2. 音视频问题

3. 网络与连接问题

4. 白板问题