tcic_client_ui #

Tencent Cloud Real-time Interactive - Education Edition (formerly Low-code Interactive Classroom LCIC) is a multi-functional product integrating audio and video calling, interactive whiteboard, and live streaming. It can help you save 90% of development work. In the fields of education, healthcare, finance, and corporate training, you can quickly build various interactive live streaming business scenarios such as one-on-one teaching, interactive small classes, live large classes, and live streaming with goods. TCIC Client is a Flutter plugin that includes all LCIC functions. You can quickly integrate LCIC functions through this plugin to realize interactive live streaming, interactive whiteboard, audio and video calling, and other functions.

Supported Platforms #

• Android
• iOS

Prerequisites #

You have Sign up for a Tencent Cloud account and completed the Identity Verification.

Step 1: Create a New Application #

1. Log in to the Low-code Interative Classroom, and select Quick Start from the left navigation bar.
2. By default, you enter the "Create application" interface, where you can select "Create new application" for the application type. Enter the application name, such as TestLCIC. If you have already created an application, you can click "Select an existing application" for the application type.
3. Add or edit tags based on actual business needs, and then click Create.

Note: Each account can receive one free trial application. To create a commercial application, you can create the corresponding version of the application on the purchase page according to your business needs. The application name only allows underscores, numbers, or Chinese and English characters.

Step 2: Enter SDKAppId and Key (SecretKey) #

1. Choose Application Management > Settings to obtain the SDKAppId.
2. Enter Cloud Access Management to obtain the key. If there is no key, you need to create a new one in API Key Management. For details, refer to Key Management.

Step 3: Get Parameters Required to Enter the Classroom #

1. Choose Application Management > Settings through the Console to retrieve the SDKAppId, which serves as the identifier for the school (schoolId).
2. By utilizing the Cloud API endpoint CreateRoom, you can create a classroom and obtain the classroom number (classid).
3. Registering a user through the Cloud API endpoint RegisterUser allows for the acquisition of the corresponding user ID (userid).
4. Logging in via the Cloud API endpoint LoginUser grants access to the user authentication token.

Quick Start #

In the prerequisites, you have created an application and obtained the necessary classId, userId, and token parameters. You just need to pass these parameters into 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();

// Configure parameters
final config = TCICConfig(
  userId: 'user123',  /// User ID used when registering the user in the prerequisite steps
  classId: 'class456', /// Classroom ID created in the prerequisite steps
  role: RoleEnum.student,
  token: 'your_token_here', /// Token obtained by logging in the user in the prerequisite steps
  // Optional parameters
  isTestBackend: false, /// Whether to use the 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, and you can use this component in your application to implement classroom functions.

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 instances of specific component configuration classes to the componentConfig list, you can achieve custom configuration of each component.

Component Configuration Usage Example

// Create controller
final controller = TCICController();

// Configure 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, and its field information is as follows:

HeaderIconConfig Field Information

HeaderIconConfig is used to configure the icons of the header component, and its field information is as follows:

MemebersComponentConfig Field Information #

MemebersComponentConfig is used to configure the members component, and its field information is as follows:

MessageComponentConfig Field Information #

MessageComponentConfig is used to configure the message component, and its field information is as follows:

SetttingComponentConfig Field Information #

SetttingComponentConfig is used to configure the settings component, and its field information is as follows:

VideoComponentConfig Field Information #

VideoComponentConfig is used to configure the video component, and its field information is as follows:

WhiteboardComponentConfig Field Information #

WhiteboardComponentConfig is used to configure the whiteboard component, and its field information is as follows:

TCICLangConfig Field Information #

TCICLangConfig is used to configure language information, and its field information is as follows:

TranslateLangEnum Values

TranslateLangEnum is used to define supported language types, and its values are as follows:

TCICFontConfig Field Information #

TCICFontConfig is used to configure font information, and its field information is as follows:

FontWeight Values

FontWeight is used to define font weights, and its values are as follows:

FontStyle Values

FontStyle is used to define font styles, and its values are as follows:

TCICNameConfig Field Information #

TCICNameConfig is used to configure name display in different languages, and its field information is as follows:

NameConfigInfo Field Information

NameConfigInfo is used to define various names in specific languages, and its field information is as follows:

Callback Functions #

TCICCallback supports the following callbacks:

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