Build a Flutter Voice Chat Room

[Lomanu4]

I will introduce

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

quickly. Follow this document, and you can complete the access work within 10 minutes and finally obtain a voice room feature with a complete UI interface.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Step 1: Activating Service


See

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

to claim the experience version or enable the paid edition.

Step 2: Import the TUILiveKit Component


In the root directory of the project, run the following command to install the

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

plug-in via command line.


flutter pub add tencent_live_uikit
Step 3: Complete Project Configuration


1.If you need to compile and run on the Android platform, since we use Java's reflection features internally in the SDK, some classes in the SDK need to be added to the non-obfuscation list.

First, need to configure and activate the obfuscation rule in the android/app/build.gradle file of the project:


android {
......
buildTypes {
release {
......
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}

Create a proguard-rules.pro file under the android/app directory of the project, and add the following code in the proguard-rules.pro file:


-keep class com.tencent.** { *; }

1. Configure to enable Multidex support in the

android/app/build.gradle file of the project.


android {
......
defaultConfig {
......
multiDexEnabled true
}
}
Step 4: Configure Routing and Internationalization


You need to configure routing and proxy in the app. Take configuration in MateriaApp as an example. Code as follows:


import 'package:tencent_live_uikit/tencent_live_uikit.dart';

return MaterialApp(
navigatorObservers: [TUILiveKitNavigatorObserver.instance],
localizationsDelegates: [
...LiveKitLocalizations.localizationsDelegates,
...BarrageLocalizations.localizationsDelegates,
...GiftLocalizations.localizationsDelegates,
],
supportedLocales: [
...LiveKitLocalizations.supportedLocales,
...BarrageLocalizations.supportedLocales,
...GiftLocalizations.supportedLocales
],
//...
);
Step 5: Log In


Before using the Voice Room feature, make sure you have executed the following login code to complete the initialization work.


import 'package:tencent_live_uikit/tencent_live_uikit.dart';

void login() async {
await TUILogin.instance.login(
1400000001, // Replace with the SDKAppID obtained in step 1
"denny", // Replace with your UserID
"xxxxxxxxxxx", // You can calculate a UserSig in the console and fill it in this position.
TUICallback(
onError: (code, message) {
print("TUILogin login fail, {code:$code, message:$message}");
},
onSuccess: () async {
print("TUILogin login success");
},
),
);
}

For more information, see

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.

Step 6: Integration of the Anchor Broadcast Page


Where you need to enable voice room (specifically determined by your business, executed in its click event), perform the following operations, route to the anchor broadcast page:


import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
builder: (context) {
final String userId = 'replace with your userId';
final String roomId = LiveIdentityGenerator.instance.generateId(userId, RoomType.live)
return TUILiveRoomAnchorWidget(roomId: roomId);
}));
Step 7: Integrating the Live List Page


On the live list page, the live voice chat rooms will be shown. You can click any live room and join the live room as an audience to listen and link mic.

You can perform the following operations to route to the live list page:


import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
builder: (context) {
return Scaffold(
body: SafeArea(child: LiveListWidget()));
}));

You can also directly add the live room list page as a subspace of one of your pages:


import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Single child widget, taking Container as an example
Container(
child: LiveListWidget()
)

// Multiple child widget, taking Column as an example
Column(
children:[LiveListWidget()]
)

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.