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__))
  
  # Tencent Cloud SDK Related Configuration
  pod 'TXLiteAVSDK_Professional', '~> 12.6.1'
  pod 'TXLiteAVSDK_TRTC', '~> 12.6.1'
  
  # 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.

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 #

TCICConfig Field Information #

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:

HeaderIconConfig Field Information

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

MemebersComponentConfig Field Information #

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

MessageComponentConfig Field Information #

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

SetttingComponentConfig Field Information #

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

VideoComponentConfig Field Information #

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

WhiteboardComponentConfig Field Information #

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

TCICLangConfig Field Information #

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

TranslateLangEnum Enum Values

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

TCICFontConfig Field Information #

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

FontWeight Enum Values

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

FontStyle Enum Values

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

TCICNameConfig Field Information #

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

NameConfigInfo Field Information

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

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.