tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Real-Time Communication
    Documentation
    Download PDF

    Flutter

    Last updated: 2024-08-13 17:40:41
    Download PDF

      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

      Before using the various features of the TUILiveKit component, you must first execute the TUI component's log in. In your project, it is recommended to add the following log in code in your business log in scenario or the first launch Activity of the App. Its function is to complete the log in of the TUI component by calling the relevant interfaces in TUICore. This step is extremely critical, as you can only use the various features of TUILiveKit normally after successfully logging in. Therefore, please patiently check whether the relevant parameters are configured correctly:
      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",        // Please replace with your UserID
          "xxxxxxxxxxx",  // You can calculate a UserSig in the console and fill it in 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 by clicking the UserSig Generate button 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:
      Please make sure to follow Step 5 and complete the log in to actio
      Where you need to start the live streaming (as determined by your business, execute it within its click event), perform the following operations to launch the broadcaster'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:
      Please make sure to follow Step 5 and complete the log in to action. Only after TUILogin.login log in to is successful, you can enter the live preview screen no
      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 room as audience

      In the Step 7 room list interface, click any room to automatically enter the live streaming room.
      
      
      
      Video Live Room
      
      
      
      Video Live Room

      Suggestions and Feedback

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

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy