Docs Overview/
Live/
UIKit/
Flutter/
Get Started/
Video Live Integration/

Video Live Integration

Environment Preparations

Platform
Version
Flutter
Flutter 3.22.0 or later.
Dart version 3.4.0 or higher.
Android
Android Studio 3.5 or later.
Android devices 5.0 or later.
iOS
Xcode 13.0 or later.
Please ensure that your project has a valid developer signature set.

Step 1. Activate the service

Before using the Audio and Video Services provided by Tencent Cloud, 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 tencent_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

Android
iOS
1. 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.** { *; }
2. Configure to enable Multidex support in the android/app/build.gradle file of your project.
  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}
1. Use Xcode to open your project, select Item > Building Settings > Deployment, and set the Strip Style to Non-Global Symbols to retain the necessary global symbol information.
2. Optional If you need to debug on the iOS Emulator and you are using a Mac computer with an Intel Chip, you need to add the following code in the project's ios/Podfile file:
target 'xxxx' do
  ......
end
......

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
      config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
    end
  end
end
3. Since TUILiveKit will use iOS's audio and video features, you need to grant permissions for the microphone and camera.
Authorization Operation Method: In your iOS project's Info.plist, under the first-level <dict> directory, add the following two items. They correspond to the system's prompt messages when asking for microphone and camera permissions.
<key>NSCameraUsageDescription</key>
<string>CallingApp needs to access your camera to capture video.</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp needs to access your microphone to capture audio.</string>
After completing the above additions, add the following preprocessor Definition in your ios/Podfile , to enable camera and microphone permissions.
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
      'PERMISSION_MICROPHONE=1',
      'PERMISSION_CAMERA=1',
      ]
    end
  end
end

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.
Note:
Many developers have contacted us with many questions regarding this step. Below are some of the frequently encountered problems:
SDKAppID is invalid.
userSig is set to the value of Secretkey mistakenly. The userSig is generated by using the SecretKey for the purpose of encrypting information such as sdkAppId, userId, and the expiration time. But the value of the userSig that is required cannot be directly substituted with the value of the SecretKey.
userId is set to a simple string such as 1, 123, or 111, and your colleague may be using the same userId while working on a project simultaneously. In this case, login will fail as TRTC doesn't support login on multiple terminals with the same UserID. Therefore, we recommend you use some distinguishable userId values during debugging.
The sample code on GitHub uses the genTestUserSig function to calculate UserSig locally, so as to help you complete the current integration process more quickly. However, this scheme exposes your SecretKey in the application code, which makes it difficult for you to upgrade and protect your SecretKey subsequently. Therefore, we strongly recommend you run the UserSig calculation logic on the server and make the application request the UserSig calculated in real time every time the application uses the TUILiveKit component from the server.

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));
  },
));



Video Live Preview Screen



Live video streaming with pictures

Step 7. Pull the room list

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 your widget, by loading the TUILiveKit's LiveListWidget component, you can display the room list.
Java
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......


return Scaffold(
  body: SizedBox(
    width: _screenWidth,
    height: double.infinity,
    child: LiveListWidget(),    // Adding the room list component LiveListWidget of TUILiveKit in your own widget tree
  ),
);





Step 8. Enter the live room

On the room list page described in Step 7, click any live room to enter it.



Video Live Room



Video Live Room

Suggestions and Feedback

If you have any suggestions or feedback, please contact info_rtc@tencent.com.