Build a Flutter Live Streaming App in 10 Minutes

#flutter #programming #javascript #tutorial

Ready to add live streaming to your next mobile app? In this quick tutorial, I’ll show you how to integrate the Tencent RTC SDK, set up a fully-functional UI, and get your very own broadcast feature running—all in just 10 minutes. Whether you’re looking to enrich your current application or prototype a brand-new platform, this streamlined guide may help you.

Step 1. Activate the service

Before using the Audio and Video Services, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate the service.

Step 2. Import the TUILiveKit component

From the root directory of the project, install the component live_uikit plug-in by executing the following command from the command line.

flutter pub add tencent_live_uikit

Step 3. Complete the project configuration

If you need to compile and run on the Android platform, because we use Java's reflection features inside the SDK, you need to add some classes in the SDK to the non-confusion list.

First, you need to configure and enable the obfuscation rule in your project's android/app/build.gradle file:

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

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

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

Configure to enable Multidex support in the android/app/build.gradle file of your project.

  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}

Step 4. Set up navigatorObserver and localizationsDelegates

In the Flutter application framework, add TUICallKit.navigatorObserver to navigatorObservers, and add LiveKitLocalizations.localizationsDelegates to localizationsDelegates. For example, using the MaterialApp framework, the code is as follows:

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

 ......

class XXX extends StatelessWidget {
  const XXX({super.key});

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [TUILiveKitNavigatorObserver.instance],
      localizationsDelegates: [...LiveKitLocalizations.localizationsDelegates],
      ......
    );
  }
}

Step 5. log in to TUILiveKit componet

To log in to the TUICallKit component, add the following code to your project to call the relevant APIs in TUICore. This step is very important, as the user can use the component features properly only after successfully logging in. Carefully check that the relevant parameters are correctly configured:

import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async {
  await TUILogin.instance.login(
    1400000001,     // Please replace with the SDKAppID obtained from step one
    "denny",        // Replace it with your UserID
    "xxxxxxxxxxx",  // Calculate a UserSig in the console and enter it here
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}

Parameter description: The key parameters used by the login function are as detailed below:

SDKAppID: Obtained in the last step in Step 1 and not detailed here.

UserID: The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).

UserSig: The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SDKSecretKey to encrypt the information such as SDKAppID and UserID. You can generate a temporary UserSig on the **UserSig Tools** page in the console.

For more information, see UserSig.

Step 6. Enter the live preview screen

Note: Make sure you've correctly followed Step 5 to complete the login. Only after you log in to TUILogin.login can you enter the live preview screen normally.

In the code section where you start live streaming (executed with a click event), perform the following operations to launch the host's live streaming page:

import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......

Navigator.push(context, MaterialPageRoute(
  builder: (context) {
    return TUILiveRoomAnchorWidget(
        roomId: LiveIdentityGenerator.instance.generateId(AppStore.userId, RoomType.live));
  },
));