Build a Flutter Voice Chat Room

Posted on by


I will introduce how to build a Flutter voice chat room 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.

voice chat room



Step 1: Activating Service

See Activate Service (TUILiveKit) 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 tencent_live_uikit plug-in via command line.

flutter pub add tencent_live_uikit
Enter fullscreen mode

Exit fullscreen mode



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'
        }
    }
}
Enter fullscreen mode

Exit fullscreen mode

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.** { *; }
Enter fullscreen mode

Exit fullscreen mode

  1. Configure to enable Multidex support in the

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

  android {
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    }
}
Enter fullscreen mode

Exit fullscreen mode



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
   ],
   //...
);
Enter fullscreen mode

Exit fullscreen mode



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");
      },
    ),
  );
}
Enter fullscreen mode

Exit fullscreen mode

For more information, see UserSig.



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);
   }));
Enter fullscreen mode

Exit fullscreen mode



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()));
      }));
Enter fullscreen mode

Exit fullscreen mode

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()]
)
Enter fullscreen mode

Exit fullscreen mode

build successfully



Source link