tcic_client_ui

Tencent Cloud Real-Time Interactive Education Edition (formerly Low-Code Interactive Classroom LCIC) is a multi-functional product that integrates audio/video connectivity, interactive whiteboards, and live streaming, helping you save 90% of development work. In education, healthcare, finance, and corporate training fields, it can quickly build various interactive live streaming business scenarios such as one-on-one teaching, interactive small classes, live large classes, and live commerce.

TCIC Client is a Flutter plugin that contains all LCIC functionality. You can quickly integrate LCIC features through this plugin to implement interactive live streaming, interactive whiteboards, audio/video connectivity, and other functions.

Supported Platforms

• Android (API 21+)
• iOS (12.0+)

Environment Requirements

Flutter Environment

• Flutter SDK: >=1.17.0
• Dart SDK: ^3.7.0

Android Environment

• Android SDK: API 21+ (Android 5.0+)
• NDK: 27.0.12077973+
• Java: 11+
• Kotlin: Supported

iOS Environment

• iOS: 12.0+
• Xcode: 14.0+
• CocoaPods: 1.12.0+

Dependencies

Core Dependencies

dependencies:
  # Tencent Cloud Real-Time Audio/Video SDK
  tencent_rtc_sdk: 12.6.1
  
  # Tencent Cloud IM SDK
  tencent_cloud_chat_sdk: ^8.6.7019+2
  
  # Tencent Cloud Whiteboard SDK
  tencent_cloud_whiteboard: path: ../tencent_cloud_whiteboard
  
  # Tencent Cloud Live SDK
  live_flutter_plugin: 12.6.0
  
  # Tencent Cloud COS SDK
  tencentcloud_cos_sdk_plugin_nobeacon: 1.2.4
  
  # Tencent Cloud CLS SDK
  tencentcloud_cls_sdk_dart_producer: ^0.0.2

Functional Dependencies

dependencies:
  # State Management
  get: ^4.7.2
  
  # Network Requests
  dio: ^5.8.0+1
  
  # Event Bus
  event_bus: ^2.0.1
  
  # Permission Management
  permission_handler: ^11.4.0
  
  # File Picker
  file_picker: ^10.0.0
  
  # Path Management
  path_provider: ^2.1.5
  path: ^1.9.1
  
  # UI Components
  flutter_svg: ^2.0.17
  photo_view: ^0.15.0
  expandable: ^5.0.1
  
  # Utility Libraries
  logger: ^2.5.0
  shared_preferences: ^2.5.3
  device_info_plus: ^11.4.0
  flutter_screenutil: ^5.9.3

Android Configuration

1. Permission Configuration

Add the following permissions in 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. Screen Recording Configuration

Add screen recording assistant Activity:

<activity 
    android:name="com.tencent.rtmp.video.TXScreenCapture$TXScreenCaptureAssistantActivity" 
    android:theme="@android:style/Theme.Translucent"/>

3. build.gradle Configuration

Configure in android/app/build.gradle.kts:

android {
    namespace = "com.tencent.tcic"
    compileSdk = flutter.compileSdkVersion
    ndkVersion = "27.0.12077973"
    
    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
    }
    
    // Resolve duplicate so file conflicts
    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. ProGuard Configuration

Add in android/app/proguard-rules.pro:

# Tencent Cloud SDK ProGuard Configuration
-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.** { *; }

# Flutter Related
-keep class io.flutter.** { *; }
-keep class io.flutter.plugins.** { *; }

iOS Configuration

1. Permission Configuration

Add the following permission descriptions in ios/Runner/Info.plist:

<!-- Camera Permission -->
<key>NSCameraUsageDescription</key>
<string>Video calls require camera permission.</string>

<!-- Microphone Permission -->
<key>NSMicrophoneUsageDescription</key>
<string>Voice calls require microphone permission.</string>

<!-- Network Configuration -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

<!-- Background Modes -->
<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
</array>

<!-- Screen Recording Extension -->
<key>com.apple.security.application-groups</key>
<array>
    <string>group.com.tencent.comm.tcic.sharescreen</string>
</array>

2. Podfile Configuration

Configure in ios/Podfile:

platform :ios, '12.0'

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  
  # Resolve Dependency Conflicts
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
        config.build_settings['ENABLE_BITCODE'] = 'NO'
        config.build_settings['VALID_ARCHS'] = 'arm64 x86_64'
      end
    end
  end
end

3. Screen Recording Extension

If screen recording functionality is needed, you need to add ReplayKit extension:

1. Create Broadcast Upload Extension in Xcode
2. Configure Info.plist and permissions
3. Implement screen recording logic

Prerequisites

Before using TCIC Client, you need to complete the following prerequisites:

Step 1: Create a New Application

1. Log in to the Real-Time Interactive Education Edition Console, go to the Overview in the left navigation bar, and select "Create New Application".
2. If you haven't created an application yet, you'll enter the "Create Application" interface by default. Enter an application name, such as TestLCIC.
3. If you already have an application, you can go to Application Management and select to use an existing application.

Note: Each account can receive one free trial application. If you need to create a commercial application, you can create the corresponding version application on the purchase page according to your business needs. Application names only allow underscores, numbers, or Chinese and English characters.

Step 2: Get SDKAppId and Secret Key

1. Go to Application Management > Application Configuration to get the SDKAppId.
2. Go to Access Management (CAM) Console to get the secret key. If you don't have a secret key, you need to create one in API Key Management. For details, see Access Key Management.

Step 3: Get Parameters Required for Entering Classroom

1. Call the cloud API interface RegisterUser to register a user, and you can get the corresponding user ID (userid) information.
2. Call the cloud API interface LoginUser to log in, and you can get the user authentication token information.
3. Call the cloud API interface CreateRoom to create a classroom, and you can get the classroom ID (classid) information.

Field	Type	Meaning	Remarks	Required
userid	string	Username	Obtained through the RegisterUser interface.	Yes
classid	string	Classroom ID	Obtained through the CreateRoom interface creation return.	Yes
token	string	Background authentication parameter	Obtained through the LoginUser interface.	Yes
role	string	Role for entering classroom, default empty	Optional parameter supervisor (supervision/content review), only registered application supervision users have permission.	No
lng	string	Language parameter, default zh-CN	Currently supports Chinese (Simplified), Chinese (Traditional), English, Korean, Japanese, Arabic, Vietnamese. You can concatenate corresponding parameters to display the corresponding language. Parameters: zh-CN, zh-TW, en-US, ka, ja, ar, vi.	No
location	boolean	Whether to report latitude and longitude location information	Default false, not reported.	No
layout	string	Page layout	Default top layout (top), currently only valid for video document mode, supports double row layout (double), right layout (right), left layout (left), three-part layout (three).	No
boardColor	string	Whiteboard color	Whiteboard color setting, default is: #182E25, supports Hex format, also supports rgba(0, 0, 0, .3) setting.	No
noEndClass	boolean	Disable end class	When teaching assistant enters the room with this parameter, when the teaching assistant clicks exit, "End Class" will be hidden, only showing the "Leave" button.	No

Quick Start

In the prerequisites, you have already created an application and obtained the necessary classId, userId, and token parameters. Just pass these parameters to the component for use.

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';

// Create controller
final controller = TCICController();

// Configuration parameters
final config = TCICConfig(
  userId: 'user123',  /// User ID used when registering user in prerequisite steps
  classId: 'class456', /// Classroom ID created in prerequisite steps
  role: RoleEnum.student,
  token: 'your_token_here', /// Token obtained when logging in user in prerequisite steps
  // Optional parameters
  isTestBackend: false, /// Whether to use backend test environment
);

// According to your business scenario, navigate to the classroom page
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TCICView(
      controller: controller,
      config: config,
    ),
  ),
);

Through the above steps, you have successfully integrated the classroom component. You can use this component in your application to implement classroom functionality.

Parameter Description

TCICView Component Parameters

Parameter Name	Type	Required	Description
controller	TCICController	Yes	Controller instance
config	TCICConfig	Yes	Configuration information
callback	TCICCallback	No	Callback function

TCICConfig Field Information

Field Name	Type	Required	Description
userId	String	Yes	User ID
classId	String	Yes	Classroom ID
token	String	Yes	Authentication token
role	RoleEnum	Yes	User role (student/teacher, etc.)
langConfig	TCICLangConfig	No	Language configuration
nameConfig	TCICNameConfig	No	Name configuration
fontConfig	TCICFontConfig	No	Font configuration
liveplayerConfig	TCICLivePlayerConfig	No	Live player configuration
isLatestBackend	bool	No	Whether to use the latest backend
isTestBackend	bool	No	Whether to use the test backend
componentConfig	List	No	Component configuration list

TCICComponentConfig Field Information

TCICComponentConfig is an abstract class used to configure various components in the classroom interface. By adding specific component configuration class instances to the componentConfig list, you can achieve custom configuration of various components.

Component Configuration Usage Example

// Create controller
final controller = TCICController();

// Configuration parameters
final config = TCICConfig(
  userId: 'user123',
  classId: 'class456',
  role: RoleEnum.student,
  token: 'your_token_here',
  // Component configuration list
  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(),
  ],
);

// According to your business scenario, navigate to the classroom page
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TCICView(
      controller: controller,
      config: config,
    ),
  ),
);

HeaderComponentConfig Field Information

HeaderComponentConfig is used to configure the header component. Its field information is as follows:

Field Name	Type	Required	Description
isShow	bool	No	Whether to show header component (default true)
enableHandsUp	bool	No	Whether to show hands up (default true)
enableScreenShare	bool	No	Whether to show screen sharing (default true)
enableMessage	bool	No	Whether to show message (default true)
enableCoureseware	bool	No	Whether to show courseware (default true)
enableSetting	bool	No	Whether to show settings (default true)
enableMemberList	bool	No	Whether to show member list (default true)
showClassStatus	bool	No	Whether to show class status (default true)
showClassTime	bool	No	Whether to show class time (default true)
showOnlineMemberCount	bool	No	Whether to show online member count (default true)
showQuitButton	bool	No	Whether to show quit button (default true)
showClassLogo	bool	No	Whether to show class logo (default true)
showClassName	bool	No	Whether to show class name (default true)
showClassInfo	bool	No	Whether to show class info (default true)
showNetworkStatus	bool	No	Whether to show network status (default true)
iconConfig	HeaderIconConfig	No	Custom header component icon configuration
headerBuilder	Widget Function()	No	Custom entire header component
headerLeftBuilder	Widget Function()	No	Custom header component left component
headerRightBuilder	Widget Function()	No	Custom header component right component
headerActionsBuilder	Widget Function()	No	Custom header component middle component

HeaderIconConfig Field Information

HeaderIconConfig is used to configure the header component icons. Its field information is as follows:

Field Name	Type	Required	Description
micIcon	String	No	Microphone icon
micDisableIcon	String	No	Microphone disabled icon
cameraIcon	String	No	Camera icon
cameraDisableIcon	String	No	Camera disabled icon
handupIcon	String	No	Hands up icon
screenShareIcon	String	No	Screen sharing icon
messageIcon	String	No	Message icon
coursewareIcon	String	No	Courseware icon
settingIcon	String	No	Settings icon
membersIcon	String	No	Members icon

MemebersComponentConfig Field Information

MemebersComponentConfig is used to configure the members component. Its field information is as follows:

Field Name	Type	Required	Description
enableStageUpDownAction	bool	No	Whether to enable stage up/down (default true)

MessageComponentConfig Field Information

MessageComponentConfig is used to configure the message component. Its field information is as follows:

Field Name	Type	Required	Description
messageItemBuilder	Widget Function(V2TimMessage)	No	Message Item builder
messageHeaderBuilder	Widget Function(V2TimMessage)	No	Message header builder
messageBubbleBuilder	Widget Function(V2TimMessage, Widget)	No	Message bubble builder
messageRowBuilder	Widget Function(V2TimMessage)	No	Message row builder

SetttingComponentConfig Field Information

SetttingComponentConfig is used to configure the settings component. Its field information is as follows:

Field Name	Type	Required	Description
enableAudioSetting	bool	No	Whether to enable audio settings (default true)
enableVideoSetting	bool	No	Whether to enable video settings (default true)
enableGeneralSetting	bool	No	Whether to enable general settings (default true)
showMemberJoinExitInfo	bool	No	Whether to show member join/exit info (default true)
showMemberHansupInfo	bool	No	Whether to show member hands up info (default true)

VideoComponentConfig Field Information

VideoComponentConfig is used to configure the video component. Its field information is as follows:

Field Name	Type	Required	Description
videoFloatBuilder	Widget Function()	No	Video float layer builder
videoActionBuilder	Widget Function()	No	Video component action button builder

WhiteboardComponentConfig Field Information

WhiteboardComponentConfig is used to configure the whiteboard component. Its field information is as follows:

Field Name	Type	Required	Description
enableCreateBoard	bool	No	Whether to enable create board (default true)
enableBoardList	bool	No	Whether to enable board list (default true)
enableSwitchPage	bool	No	Whether PPT courseware can turn pages (default true)

TCICLangConfig Field Information

TCICLangConfig is used to configure language information. Its field information is as follows:

Field Name	Type	Required	Description
lang	TranslateLangEnum	Yes	Language type (zh, en, ja, ko, zhTw, etc.)

TranslateLangEnum Enum Values

TranslateLangEnum is used to define supported language types. Its enum values are as follows:

Enum Value	Description
zh	Chinese
en	English
ja	Japanese
ko	Korean
zhTw	Traditional Chinese
fr	French
de	German
es	Spanish
ru	Russian

TCICFontConfig Field Information

TCICFontConfig is used to configure font information. Its field information is as follows:

Field Name	Type	Required	Description
fontFamily	String	No	Font family name
fontPath	String	No	Font file path (relative to assets directory)
fontUrl	String	No	Font file URL (web font)
enableCustomFont	bool	Yes	Whether to enable custom font (default false)
fontWeights	Map<FontWeight, String>	No	Font weight configuration
fontStyles	Map<FontStyle, String>	No	Font style configuration

FontWeight Enum Values

FontWeight is used to define font weights. Its enum values are as follows:

Enum Value	Description
w100	Thin
w200	Extra Light
w300	Light
w400	Normal
w500	Medium
w600	Semi Bold
w700	Bold
w800	Extra Bold
w900	Black

FontStyle Enum Values

FontStyle is used to define font styles. Its enum values are as follows:

Enum Value	Description
normal	Normal
italic	Italic

TCICNameConfig Field Information

TCICNameConfig is used to configure name display in different languages. Its field information is as follows:

Field Name	Type	Required	Description
zh	NameConfigInfo	No	Chinese name configuration
en	NameConfigInfo	No	English name configuration
ja	NameConfigInfo	No	Japanese name configuration
ko	NameConfigInfo	No	Korean name configuration
zhTw	NameConfigInfo	No	Traditional Chinese name configuration

NameConfigInfo Field Information

NameConfigInfo is used to define specific names in specific languages. Its field information is as follows:

Field Name	Type	Required	Description
teacher	String	No	Teacher
assistant	String	No	Teaching Assistant
student	String	No	Student
host	String	No	Host
coHost	String	No	Co-host
panelist	String	No	Panelist
viewer	String	No	Viewer
raiseHand	String	No	Raise Hand
lowerHand	String	No	Lower Hand
chat	String	No	Chat
whiteboard	String	No	Whiteboard
fileShare	String	No	File Share
screenShare	String	No	Screen Share

Callback Functions

TCICCallback supports the following callbacks:

• onJoinedClassSuccess: Successfully joined classroom
• afterExitedClass: After exiting classroom
• onJoinedClassFailed: Failed to join classroom
• onKickedOffClass: Kicked out of classroom
• onMemberJoinedClass: Member joined classroom
• onMemberLeaveClass: Member left classroom
• onRecivedMessage: Received message
• beforeExitedClass: Before exiting classroom (return false to cancel exit)
• beforeRenderMessage: Before rendering message (return false to not render)

Common Issues

1. Permission Issues

Android Permission Denied:

• Check if corresponding permissions are added in AndroidManifest.xml
• Runtime permissions need to be dynamically requested in code
• Some permissions (such as camera, microphone) require manual user authorization

iOS Permission Denied:

• Check if permission descriptions are added in Info.plist
• Ensure permission description text is clear and understandable
• Some permissions will pop up authorization dialog on first use

2. Audio/Video Issues

Cannot Hear Sound:

• Check device volume settings
• Confirm microphone permission is authorized
• Check audio device connection status

Cannot See Video:

• Check camera permission is authorized
• Confirm device camera function is normal
• Check network connection status

3. Network Issues

Connection Failed:

• Check network connection status
• Confirm firewall settings
• Verify if SDKAppId and token are correct

Audio/Video Lag:

• Check if network bandwidth is sufficient
• Confirm if device performance meets requirements
• Consider reducing audio/video quality settings

4. Whiteboard Issues

Whiteboard Cannot Load:

• Check network connection status
• Confirm whiteboard service is normal
• Verify whiteboard configuration parameters

Whiteboard Operations No Response:

• Check if touch events are normal
• Confirm whiteboard component status
• Verify user permission settings

Technical Support

If you encounter problems during use, you can get technical support through the following ways:

• Tencent Cloud Real-Time Interactive Education Edition Official Documentation
• Tencent Cloud Developer Community
• GitHub Issues

Changelog

v0.0.2

• Added component configuration functionality
• Optimized language configuration support
• Improved font configuration options
• Fixed known issues

v0.0.1

• Initial version release
• Support for basic classroom functionality
• Integration of audio/video, whiteboard, IM and other functions

License

This project is licensed under the Apache License 2.0.