tencent cloud

Feedback

Android&iOS&Flutter

Last updated: 2024-08-09 15:08:11

    Description of the Feature

    Conference(TUIRoomKit) now supports a new feature for conference reservations. Users can reserve a room and schedule conferences. When the conference time arrives, users can start the conference with one click. This article will detail the related features and explain how to use this functionality in the TUIRoomKit component.
    
    
    

    Preparation Requirements

    Before using the scheduled conference feature provided by Conference(TUIRoomKit), you need to complete the related configuration for integrating Conference and log in. For more details, refer to Integration.
    Note:
    The scheduled conference feature requires Conference v2.5.0 and above.

    How to Schedule a Conference

    To utilize the scheduled conference feature, you need to access the conference scheduling page provided by TUIRoomKit:
    Android
    iOS
    Flutter
    According to your business, simply call the following code in the corresponding Activity to schedule a conference.
    java
    kotlin
    Intent intent = new Intent(this, ScheduleConferenceActivity.class); startActivity(intent);
    val intent = Intent(this, ScheduleConferenceActivity::class.java)
    startActivity(intent)
    class YourViewController: UIViewContrller {
    // The memberSelectFactory parameter is used to create your User Selection Page.
    // For detailed usage, please refer to "Invite to Enter Room".
    func jumpToScheduleViewController {
    let scheduleViewController =
    ScheduleConferenceViewController(memberSelectFactory: nil)
    navigationController?.pushViewController(scheduleViewController, animated: true)
    }
    }
    According to your business, navigate to ScheduleRoomPage when needed to access the conference scheduling page.
    import 'package:tencent_conference_uikit/tencent_conference_uikit.dart
    
    Navigator.push(
    context,
    MaterialPageRoute(
    builder: (context) => ScheduleRoomPage(),
    ),
    );
    On the conference scheduling page, after filling in and selecting the Relevant Information for the scheduled conference, click the Schedule Room button to complete the schedule.

    View scheduled conferences

    TUIRoomKit provides UI components for the conference list. By arranging the conference list component on your page, you can view and manage all conferences by the current user:
    Android
    iOS
    Flutter
    1. Based on your business, add the meeting list layout to your layout:
    <!-- For example, if your parent layout is ConstraintLayout, add the following code -->
    <FrameLayout android:id="@+id/tuiroomkit_fl_conference_list_container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/>
    2. Add the following code in the corresponding Activity to pull up the meeting list:
    java
    kotlin
    ConferenceListFragment fragment = new ConferenceListFragment(); FragmentTransaction transaction = this.getSupportFragmentManager().beginTransaction(); transaction.add(R.id.tuiroomkit_fl_conference_list_container, fragment); transaction.commitAllowingStateLoss();
    val fragment = ConferenceListFragment()
    val transaction = supportFragmentManager.beginTransaction()
    transaction.add(R.id.tuiroomkit_fl_conference_list_container, fragment)
    transaction.commitAllowingStateLoss()
    class YourViewController: UIView {
    // ConferenceListView initialization requires two parameters:
    // @param viewController, the viewController to which the meeting list page is added
    // @param memberSelectFactory, creates your User Selection Page. For detailed usage, please refer to "Invite to Join Conference"
    func showConferenceList {
    let listView = ConferenceListView(viewController: self, memberSelectFactory: nil)
    view.addSubview(listView)
    }
    }
    import 'package:flutter/material.dart';
    import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
    
    // In your own page, add ConferenceListWidget
    class YourPage extends StatelessWidget {
    const YourPage({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(title: const Text("Your Page")),
    body: Column(
    children: [
    ...YourWidgets(), // Your other widgets, this is just an exam
    const ConferenceListWidget(), // Conference list component
    ],
    ),
    );
    }
    }

    Conference Scheduling Control

    Schedule Conference

    On the conference scheduling page, users can set conference information according to their needs. The configurable options include: Room Name, Room Type, Start Time, Room Duration, Timezone, Participating Members, Member Management (Mute All, Mute All Video), etc. For detailed introduction of the feature of inviting members to participate, refer to Invite to Join Conference.

    
    
    

    View details

    In the Conference List, users can click on a conference to view the detailed information of the corresponding scheduled conference.
    
    
    

    Edit Conference Information

    The conference owner can modify the information of the scheduled conference. After completing the modifications, click Save to update the scheduled conference information with the new details.
    For a detailed introduction of the feature to invite participating members, refer to Invite to Join Conference.

    
    
    

    Invite to Join Conference

    Users can pop up the participant selection screen by clicking the Participating Members button on the scheduling or modifying conference interface. Here, you can invite or remove members. After inviting members and completing the scheduling or modification of the conference, the conference you reserved will appear in the participants' conference list.
    
    
    
    By default, the Invite Member User List is empty. If you need to use this feature, you must import the members to be invited according to your business needs through the following methods:
    Android
    iOS
    Flutter
    The list of members invited by the Android TUIRoomKit comes from the Chat friends relationship , it is necessary to use Chat to add friends, and integrate the tuicontact members list component.
    1. Complete the following steps for quick integration with TUIContact :
    Clone or download the code from GitHub, then copy the tuicontact subdirectory from the Android directory to the same level as your current project's app directory, as shown below:
    
    
    
    Find the setting.gradle (or settings.gradle.kts) file in the engineering root directory, and add the following code to import the tuicontact component into your current project.
    settings.gradle
    setting.gradle.kts
    include ':tuicontact'
    include (":tuicontact")
    Find the build.gradle (or build.gradle.kts) file in the app directory, and add the following code to declare the current app's dependency on the newly added tuicontact component.
    build.gradle
    build.gradle.kts
    implementation project(':tuicontact')
    implementation(project(":tuicontact"))
    2. Add Friend
    You can add a friend using the code below after logging in. The friend you add will appear in the Invite Members screen for you to select. If you want to officially go live and use the Chat Friend Relationship, please refer to Chat Friend Management Documentation or Adding Friends RestAPI.
    // Add a friend
    V2TIMFriendAddApplication application = new V2TIMFriendAddApplication("userId");
    application.setAddType(V2TIMFriendInfo.V2TIM_FRIEND_TYPE_BOTH);
    V2TIMManager.getFriendshipManager().addFriend(application, new V2TIMValueCallback<V2TIMFriendOperationResult>() {
    @Override
    public void onSuccess(V2TIMFriendOperationResult v2TIMFriendOperationResult) {
    // Friend request sent successfully
    }
    
    @Override
    public void onError(int code, String desc) {
    // Failed to add the friend
    }
    });

    How to experience the invite member feature

    First, refer to Run Sample Code, and complete the demo. In the members.json file of the demo project, some test user information has been pre-configured. You can choose two accounts, log in with the configured userId on two different phones, and then select the other user when scheduling or editing a meeting. This way, the scheduled meeting will appear in the other user's schedule list.
    
    
    

    Code Implementation for Member List Page

    Considering the complexity of the user list data on the invite members page, we have designed a solution that allows you to customize the Member Selection Interface. Next, we will guide you on how to integrate your own member selection page (of course, you can also directly use the UI provided in the demo, which will be introduced later).
    1. Prepare your Friend Selection Page viewController, implementing the SelectMemberControllerProtocol protocol.
    // Sample Code
    class SelectMemberViewController: UIViewController, SelectMemberControllerProtocol {
    weak var delegate: MemberSelectionDelegate?
    var selectedUsers: [User]
    func didSelectFinished() {
    // Through the delegate, call back the selected members to Conference in the method where the selection i
    delegate?.onMemberSelected(self, invitees: selectedMembers)
    }
    }
    2. When initializing ScheduleConferenceViewController and ConferenceListView, pass in a closure. In the closure, return the SelectMemberViewController you created in Back .
    // Sample Code
    class YourViewController: UIViewContrller {
    func jumpToScheduleViewController {
    let scheduleViewController = ScheduleConferenceViewController { selectedList in
    return SelectMemberViewController(selectedUsers: selectedList)
    }
    navigationController?.pushViewController(scheduleViewController, animated: true)
    }
    }
    3. With the above two steps, you can display your own member selection page. We also provide the page code in the demo as shown in the image above. You can directly copy the following files into your project to get our example page.
    
    
    
    In the loadMembers method of SelectMembersViewModel, you can load your own member list data (you can also directly obtain Chat Relationship Chain Data).
    When you need to use the member invitation feature to invite members into the conference, we provide the following two solutions for you to add the members you need to invite:

    Solution 1: Using json to configure user information

    You can refer to our Example Project. In the example/assets directory, members.json stores the user information required for invitations. Follow these steps:
    1. In the assets directory of your project, create a new members.json file listing all the user information you need. The file format should be the same as the members.json mentioned above.
    2. In the pubspec.yaml file of your project, complete the following configuration:
    assets:
    - assets/members.json
    After completing the above configuration, you can select the members listed in members.json in the member invitation interface.

    Solution 2: Using Chat Buddy Information

    If you have not configured the members.json mentioned above, the invite friends interface will default to pulling your Chat Buddy Information. When you need to invite other members to the conference, you can add the members you want to invite as friends according to your business needs.
    
    Prerequisites: log in to Chat SDK, the login process is the same as the log in to Floating Chat process. If you have already completed the login process or are using In-Conference Chat, you can skip this step.
    The code for adding friends is as follows:
    import 'package:tencent_cloud_chat_sdk/manager/v2_tim_manager.dart';
    
    // In Flutter Conference, there is already a dependency on tencent_cloud_chat_sdk, so there is no need to configure it separately
    // Replace the userID in the code with the UserID of the user you want to add to complete the friend addit
    V2TIMManager().getFriendshipManager().addFriend(
    userID: 'userID', addType: FriendTypeEnum.V2TIM_FRIEND_TYPE_BOTH);
    After adding friends, you can choose to invite the added users each time you make a reservation.
    If you need more related friend operations, please refer to: Friend Management. If you need to use Rest API to batch add friends, please refer to: Adding Friends RestAPI.

    Notes

    After successfully scheduling a conference, you can get the conference id and reservation information.
    To batch schedule conferences at different dates/times, select the times and submit in batches.
    The start time for scheduling a conference cannot be earlier than the current time, but there is no limit on the number of days in advance.
    After the scheduled conference reaches the end time, if the conference has not been dissolved and there are no users in the conference, the conference will be retained for 6 hours from the scheduled end time. During this period, you can still enter the conference at any time.

    Exchange and Feedback

    If you have any requirements or feedback, you can 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