tencent cloud

Feedback

Last updated: 2024-04-12 11:29:00
    This article will introduce how to complete the integration of the TUIRoomKit component in the shortest time. By following this document, you will complete the following key steps within an hour and ultimately obtain an audio/video conference function with a complete UI interface.

    Environment Preparation

    Platform
    Version
    Flutter
    3.0.0 and above versions.
    Android
    Minimum compatibility with Android 4.1 (SDK API Level 16), recommended to use Android 5.0 (SDK API Level 21) and above.
    Android Studio 3.5 and above (Gradle 3.5.4 and above).
    Mobile devices with Android 4.1 and above.
    iOS
    iOS 12.0 and higher.

    Step 1: Activate the Service

    Before initiating a meeting with TUIRoomKit, you need to activate the exclusive multi-person audio and video interaction service for TUIRoomKit on the console. For specific steps, please refer to Activate Service.

    Step 2: Integrate the TUIRoomKit Component

    Add the rtc_conference_tuikit plugin dependency in pubspec.yaml file in your project
    dependencies:
    rtc_conference_tui_kit: The latest version
    Execute the following command to install the plugin
    flutter pub get

    Step 3: Complete Project Configuration

    Since the rtc_conference_tui_kit has utilized the relevant features of the GetX state management library, you need to replace MaterialApp with GetMaterialApp in your application. Alternatively, you can set the navigatorKey attribute in your MaterialApp to Get.key for the same effect.
    Open your project with Xcode, choose Project > Building Settings > Deployment, and set Strip Style to Non-Global Symbols to maintain the necessary global symbol information.
    If you need to use audio and video features on iOS, authorize the microphone and camera usage rights (Android has declared the relevant permissions in the SDK, and no manual configuration is necessary).
    Add the following two items to your application's Info.plist. They correspond to the messages in the popup licensing dialog box while microphone and camera permissions are requested.
    <key>NSCameraUsageDescription</key>
    <string>TUIRoom requires access to your camera.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>TUIRoom requires access to your microphone.</string>
    After the above are added, add the following preprocessor definitions 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: Log in to TUIRoomKit Component

    Add the following code to your project, which serves to log in to the component by calling the relevant interfaces in TUIRoomKit. This step is extremely critical, as only after logging in can you use the various functions of TUIRoomKit, so please be patient and check if the relevant parameters are configured correctly:
    import 'package:rtc_room_engine/rtc_room_engine.dart';
    
    var result = await TUIRoomEngine.login(
    SDKAPPID, // Please replace with your SDKAPPID
    'userId', // Please replace with your user ID
    'userSig', // Please replace with your userSig
    );
    
    if (result.code == TUIError.success) {
    // login success
    } else {
    // login error
    }
    Parameter Description Here is a detailed introduction to the key parameters used in the login function:
    SDKAppID:You have already obtained it in Step 1, so it will not be repeated here.
    UserID:The ID of the current user, string type, only allows to contain English letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
    UserSig:Encrypt the SDKAppID, UserID, etc. with the SDK Secret Key obtained in Step 1 to get the UserSig, which is a ticket for authorization and is used for Tencent Cloud to recognize whether the current user can use the TRTC service. You can create a temporarily available UserSig through the UserSig Tools through the project sidebar in the console.
    
    
    For more information, please refer to the UserSig related.
    Note:
    This step is also the step with the most feedback from developers we have received so far. Common problems are as follows:
    SDKAppID is set incorrectly. Please use the SDKAppID of the international site correctly, otherwise, you will not be able to access it.
    UserSig is misconfigured as an encryption key (SDKSecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SDKSecretKey, not by directly configuring the SDKSecretKey as UserSig.
    UserID is set to simple strings like "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, simple UserIDs like "1", "123", "111" are easily occupied by your colleagues, causing login failure. Therefore, we recommend that you set some UserIDs with high identifiability when debugging.
    The sample code in Github uses the genTestUserSig function to calculate UserSig locally to quickly get you through the current access process. However, this solution exposes your SDKSecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SDKSecretKey. Therefore, we strongly recommend that you put the calculation logic of UserSig on the server side and have the app request the real-time calculated UserSig from your server every time it uses the TUIRoomKit Component.

    Step 5: Use TUIRoomKit

    Set User Information (optional)

    You can set the username and avatar by calling TUIRoomEngine's setSelfInfo.
    import 'package:rtc_room_engine/rtc_room_engine.dart';
    
    TUIRoomEngine.setSelfInfo(userName, avatarURL);
    Parameter
    Type
    Meaning
    userName
    String
    User Name
    avatarURL
    String
    User Avatar URL

    Start a quick conference

    By calling the quickStart method of ConferenceSession, you can start a quick conference.
    import 'package:rtc_conference_tui_kit/rtc_conference_tui_kit.dart';
    
    ConferenceSession.newInstance('your roomId')
    ..onActionSuccess = _quickStartSuccess
    ..onActionError = _quickStartError
    ..quickStart();
    
    void _quickStartSuccess() {
    // You can navigate to the conference page on your own in this success callback of starting a quick conference.
    Navigator.push(
    context,
    MaterialPageRoute(
    builder: (context) => ConferenceMainPage(),
    ),
    );
    }
    
    void _quickStartError(ConferenceError error, String message) {
    debugPrint("code: $error message: $message");
    }

    Join a conference

    By calling the join method of ConferenceSession, you can join the specified conference.
    import 'package:rtc_conference_tui_kit/rtc_conference_tui_kit.dart';
    
    ConferenceSession.newInstance('your roomId')
    ..onActionSuccess = _joinSuccess
    ..onActionError = _joinError
    ..join();
    
    void _joinSuccess() {
    //You can navigate to the conference page on your own in this success callback of joining a conference.
    Navigator.push(
    context,
    MaterialPageRoute(
    builder: (context) => ConferenceMainPage(),
    ),
    );
    }
    
    void _joinError(ConferenceError error, String message) {
    debugPrint("code: $error message: $message");
    }

    More Features

    TUIRoomEngine SDK Provided Rich Audio Video Room Features, Specific Content Please Refer API Overview.

    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.

    Technical Support

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

    7x24 Phone Support