Start Broadcasting and Listen

Applicable scenario
Anchor starts live streaming and Listeners listen features mainly depend on core component (LiveStreamCore), which provides various APIs such as enabling/disabling voice chat room, managing microphone positions in the live streaming room, including applying for microphone mode, inviting speakers, moving seats, and kicking someone off the mic.
After you integrate the Voice Chat Room UIKit through Quick Integration, if the UI style does not match your ideal UI style, you can use the core component to rapidly deploy the main process of the voice chat room within half an hour. Then add your own business UI view on top of it.
Environment Preparation
Platform
Version
Flutter
Flutter 3.27.4 and higher versions.
Dart 3.6.2 or higher version.
Android
Android Studio 3.5 and above versions.
Android device running Android 5.0 and above versions.
iOS
Xcode 15.0 and above versions.
Ensure that your project has a deemed valid developer signature.
Step 1: activate the service
See Activate Service (TUILiveKit) to claim the experience version or activate the paid edition.
Step Two: Import the LiveStreamCore Component
In the root directory of the project, run the following command to install the live_stream_core plug-in via the command line.
flutter pub add live_stream_core
If you encounter any problems during integration or use, feel free to give us feedback.
Step Three: Sign In
Add the following code to your project. It enables the TUI component to log in by calling the login-related APIs in RTCRoomEngine. This step is crucial. Only after successful login can you properly use the features provided by LiveStreamCore.
final result = await TUIRoomEngine.login(
                    'Replace with your activated SDKAppID',
                    'Replace with your userId',
                    'Replace with your userSig');
Parameter Description
Here we detail the key parameters required in the login function:
Parameter
Type
Description
 SDKAppID
int
You have already obtained it in the last step of Step 1, so it will not be elaborated here.
UserID
String
The ID of the current user, in string format, only allows letters (a-z and A-Z), digits (0-9), hyphens, and underscores.
userSig
String
Use the SecretKey obtained in step 3 of Step One to encrypt information such as SDKAppID and UserID to generate a UserSig. It's a credential used for authentication purposes, allowing Tencent Cloud to identify if the current user is authorized to use the TRTC service. You can generate a temporary UserSig through the Auxiliary Tools in the console. For more information, please refer to How to Calculate and Use UserSig.
Note:
Development Environment: If you are in the local development and debugging stage, you can use the local GenerateTestUserSig.genTestSig function to generate userSig. In this method, the SDKSecretKey is vulnerable to decompilation and reverse engineering, and once your key is leaked, attackers can steal your Tencent Cloud traffic.
Production Environment: If your project is going to be launched, please adopt the method of Server-side Generation of UserSig.
Step 4: Use the Core Component to Implement the Live Voice Room Functionality
Note:
During use, if you have any queries about the API call methods, you can refer to Example.
Create a Core Component Instance for Voice Chat Room
You need to create a controller SeatGridController first, and then assign it to the voice chat room core component SeatGridWidget.
SeatGridController is responsible for providing APIs. SeatGridWidget is used to display the seat UI. You can add SeatGridWidget anywhere you need to display the seat UI.
final controller = SeatGridController();
SeatGridWidget(controller: controller);
Host Enables Voice Chat Room and Audience Joins Voice Chat Room
Host Enables Voice Chat Room: Start a voice chat room and stream the data of local microphone capture to the voice chat room.
import 'package:live_stream_core/live_stream_core.dart';
import 'package:rtc_room_engine/rtc_room_engine.dart';
﻿
final roomInfo = TUIRoomInfo(roomId: 'replace with your roomId');
roomInfo.name = 'replace with your roomName';
roomInfo.seatMode = TUISeatMode.applyToTake;
roomInfo.isSeatEnabled = true;
roomInfo.roomType = TUIRoomType.livingRoom;
final startVoiceRoomResult = await controller.startVoiceRoom(roomInfo);
﻿
final startMicrophoneResult = await controller.startMicrophone();
Audience Joins Live Room
import 'package:live_stream_core/live_stream_core.dart';
﻿
final result = await controller.joinVoiceRoom('replace with your roomId');
The host enables the voice chat room.
Audience joins a voice chat room.
﻿
﻿
﻿
﻿
﻿
﻿
Audience Mic Connection
If you need to implement the audience mic connection feature, see Seat Management document.
Set Microphone Position List Layout Arrangement
You can set the seat layout through the setLayoutMode API.
setLayoutMode API has 3 built-in layouts: focus layout (focus), grid layout (grid), and vertical layout (vertical). It also supports custom layout (free).
// API definition
void setLayoutMode(LayoutMode layoutMode, SeatWidgetLayoutConfig? layoutConfig);
﻿
// API utilization
import 'package:live_stream_core/live_stream_core.dart';
﻿
// Set grid layout
controller.setLayoutMode(LayoutMode.grid, null); 
﻿
// Set focus layout
controller.setLayoutMode(LayoutMode.focus, null); 
﻿
// Set vertical layout
controller.setLayoutMode(LayoutMode.vertical, null); 
﻿
// Set custom layout
final rowConfig = SeatWidgetLayoutRowConfig(      
      count: 2,      
      seatSpacing: 20.0,      
      seatSize: const Size(80, 80),      
      alignment: SeatWidgetLayoutRowAlignment.spaceBetween);
final layoutConfig = SeatWidgetLayoutConfig(      
      rowConfigs: [rowConfig, rowConfig]);
controller.setLayoutMode(LayoutMode.free, layoutConfig); 
Note:
The parameter settings of the custom layout can be viewed in the parameter descriptions in SeatWidgetLayoutRowConfig. Among them, the alignment mode "alignment" can be referred to in the description in SeatWidgetLayoutRowAlignment. The effect of the alignment mode can be seen in the schematic diagram .
Grid layout
Element layout
Vertical layout
Custom layout
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
Custom Layout Alignment Mode Diagram
﻿
﻿
﻿
Custom Seat View
If you consider our default UI does not meet your requirements and you want to customize your own seat UI, you can implement the UI style of the specified seat through the seatWidetBuilder parameter of SeatGridWidget.
// Definition of seatWidetBuilder
typedef SeatWidgetBuilder = Widget Function(    
    BuildContext context,    
    ValueNotifier<TUISeatInfo> seatInfoNotifier,
    ValueNotifier<int> volumeNotifier);
    
// Usage example
import 'package:live_stream_core/live_stream_core.dart';
import 'package:rtc_room_engine/rtc_room_engine.dart';
﻿
SeatGridWidget(   
    controller: controller,   
    onSeatWidgetTap: (TUISeatInfo seatInfo) {      
    // debugPrint('click seatWidget index:${seatInfo.index}');   
    },   
    seatWidgetBuilder: (         
          BuildContext context,         
          ValueNotifier<TUISeatInfo> seatInfoNotifier,         
          ValueNotifier<int> volumeNotifier) {            
              // Return your custom seat component       
              return Container();         
          }
)
Before customizing seat layout
After customizing seat layout
﻿
﻿
﻿
﻿
﻿
﻿

Grid layout	Element layout	Vertical layout	Custom layout

Platform	Version
Flutter	Flutter 3.27.4 and higher versions. Dart 3.6.2 or higher version.
Android	Android Studio 3.5 and above versions. Android device running Android 5.0 and above versions.
iOS	Xcode 15.0 and above versions. Ensure that your project has a deemed valid developer signature.

Parameter	Type	Description
SDKAppID	int	You have already obtained it in the last step of Step 1, so it will not be elaborated here.
UserID	String	The ID of the current user, in string format, only allows letters (a-z and A-Z), digits (0-9), hyphens, and underscores.
userSig	String	Use the SecretKey obtained in step 3 of Step One to encrypt information such as SDKAppID and UserID to generate a UserSig. It's a credential used for authentication purposes, allowing Tencent Cloud to identify if the current user is authorized to use the TRTC service. You can generate a temporary UserSig through the Auxiliary Tools in the console. For more information, please refer to How to Calculate and Use UserSig.

The host enables the voice chat room.	Audience joins a voice chat room.

Start Broadcasting and Listen

Applicable scenario

Environment Preparation

Step 1: activate the service

Step Two: Import the LiveStreamCore Component

Step Three: Sign In

Step 4: Use the Core Component to Implement the Live Voice Room Functionality

Create a Core Component Instance for Voice Chat Room

Host Enables Voice Chat Room and Audience Joins Voice Chat Room

﻿﻿﻿

Audience Mic Connection

Set Microphone Position List Layout Arrangement

﻿﻿﻿

﻿﻿﻿

﻿﻿﻿

Custom Layout Alignment Mode Diagram

Custom Seat View

﻿﻿﻿