tencent cloud

Feedback

Android&iOS&Flutter

Last updated: 2024-10-11 18:02:22
    If the UI interaction of conference(TUIRoomKit) does not meet your product requirements, and you have your own interaction and business logic needs for custom implementation of scheduled meeting-related interaction features, you can integrate TUIRoomEngineSDK and refer to key code related calls to meet your needs.

    Description of the Feature

    TUIRoomKit supports schedule conference, allowing users to book a room and schedule conference. This article will detail the features of this functionality and explain how to use it within the TUIRoomKit component.
    Schedule Conference
    Conference List
    Configure Conference
    nvite Members
    
    
    
    
    
    
    
    
    

    
    
    

    Feature Integration

    Before using the schedule conference feature, you need to complete the relevant configuration for TUIRoomKit and log in to . For details, please refer to Quick Access.
    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 {
    func jumpToScheduleViewController {
    let scheduleViewController = ScheduleConferenceViewController()
    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(),
    ),
    );
    Configure Conference Details: Room Name, Room Type, Start Time, Room Duration, Timezone, Invite Members (Member List needs to be imported), Room Encryption, and Member Management (Mute All, Disable Drawing for All).
    How to invite members: Click "Add" to invite members. By default, you need to input the user list. To facilitate a quick experience, we provide a demo user list. Please refer to How to invite members.
    Enter the schedule conference interface
    Configure conference details
    Scheduled successful
    
    
    
    
    
    
    
    
    

    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
    func showConferenceList {
    let listView = ConferenceListView(viewController: self)
    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
    ],
    ),
    );
    }
    }
    The conference list provides the following features:
    View the conference list: The list includes meetings you created and meetings you were invited to.
    View conference details: You can click on a specific meeting to view its details.
    Modify conference information: Click on a conference in the conference list, if the conference has not started yet, and you are the organizer, you can edit the information for that conference.
    Click on the conference list
    View conference details
    Modify conference Information
    
    
    
    
    
    
    
    
    

    How to Invite Members

    In the schedule conference or modify conference interface, you can click the Participating Members button to pop up the member selection interface.By default, you need to input the user list (you can use our provided demo user list for a quick experience). You can import the members to be invited according to your business needs as follows: For different platforms, please refer to:
    Android
    iOS
    Flutter

    How to experience the Invite Members feature

    First, refer to Running Demo. In the Demo project, we provide a address book demo (Android/app/src/main/java/com/tencent/liteav/demo/SelectParticipants), and some test user information has been pre-configured in the members.json file. You can select two accounts, log in with the userId we configured on two different phones, then select the other user when scheduling or editing a meeting. The scheduled meeting will appear in the other user's schedule list.
    
    
    

    How to use the custom address book

    1. TUIRoomKit associates with the custom address book: Before Scheduling a conference or Pulling the conference list, you can set up the custom user list using the following method:
    java
    kotlin
    // Replace SelectParticipantActivity.class with the custom address book activity
    ConferenceSession.sharedInstance().setContactsViewProvider(SelectParticipantActivity.class);
    // Replace SelectParticipantActivity::class.java with the custom address book activity
    ConferenceSession.sharedInstance().setContactsViewProvider(SelectParticipantActivity::class.java)
    Note:
    SelectParticipantActivity is an example code for the custom address book. You can view it in the Demo project (directory: app/src/main/java/com/tencent/liteav/demo/SelectParticipants).
    2. Return the selected user list from the custom address book to TUIRoomKit: After completing user selection in the address book, you need to return the selected user list to TUIRoomKit. You can return the data to TUIRoomKit using the following method.
    java
    kotlin
    Intent intent = new Intent();
    // participants is the list of selected users, must be of type ArrayList<User>. intent.putExtra(SELECTED_PARTICIPANTS, participants);
    setResult(3, intent);
    finish();
    val intent = Intent()
    // participants is the list of selected users, must be of type ArrayList<User>.
    intent.putExtra(SELECTED_PARTICIPANTS, participants)
    setResult(3, intent)
    finish()
    3. When modifying meeting members, TUIRoomKit transmits the list of selected members to the address book: You can obtain the list of selected users for the conference using the following method.
    java
    kotlin
    // Retrieve the selected user list
    ConferenceParticipants participants = (ConferenceParticipants) bundle.getSerializable(CONFERENCE_PARTICIPANTS); ArrayList<User> selectedList = participants.selectedList;
    // Retrieve the selected user list
    val participants = bundle.getSerializable(CONFERENCE_PARTICIPANTS) as ConferenceParticipants
    val selectedList: ArrayList<User> = participants.selectedList

    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, ContactViewProtocol {
    weak var delegate: ContactViewSelectDelegate?
    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)
    }
    }
    Note:
    The in-conference call feature also requires using your custom-defined address book component. If you still need to use the in-meeting call feature, it is recommended to place a ConferenceParticipants object in your address book page's constructor parameter. The data source will be mentioned in the code in step two.
    The ConferenceParticipants class has two members:
    selectedList: the selected members;
    unSelectableList: Non-selectable members. You can set the corresponding members as non-selectable on the UI. The schedule meeting feature does not use this field.
    2. Return the selected user list from the custom address book to TUIRoomKit: After completing user selection in the address book, you need to return the selected user list to TUIRoomKit. You can return the data to TUIRoomKit using the following method.
    // Sample Code
    ConferenceSession.sharedInstance.setContactsViewProvider { participants in
    return SelectMemberViewController(participants: participants)
    }
    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.
    After completing the steps above, by clicking the Add button, a member selection interface will pop up. Here, you can invite or remove members. Once modified, the conference you have booked will appear in the other party's conference list.
    Schedule conference interface click Add
    Add or delete members from the user list
    
    
    
    
    
    

    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.

    Feature customization

    If the current UI does not meet your needs, you can achieve the desired UI effect by modifying the source code. For different platforms, please refer to:
    Android
    iOS
    Flutter
    You can achieve the desired UI effect by modifying the source code in the Android/tuiroomkit/src/main/java/com/tencent/cloud/tuikit/roomkit/view/page/widget/ScheduleConference directory. To make it easier for you to customize the UI, here is an introduction to the Room Password file.
    SchdeuleConference
    ├── ConferenceDetails // Conference details interface
    ├── ConferenceList // Conference list interface
    ├── ModifyConference // Modify conference interface
    ├── SelectScheduleParticipant // Calling the address book list transmitted from outside
    ├── TimeZone // Configure timezone interface
    └── View // Schedule conference interface
    You can achieve a satisfactory UI by modifying the source code in the iOS/TUIRoomKit/Source directory. To make it easier for you to customize the UI, here is an introduction to the files related to the room password.
    Source
    ├── ConferenceListView.swift // Conference list
    ├── ScheduleConferenceViewController.swift // Schedule conference interface
    └── View
    └── ConferenceOptions
       ├── ConferenceInvitation // Conference invitation
       ├── MemberSelect // Invite members
       ├── ModifySchedule // Modify conference
       └── ScheduleConference
    └── View
    ├── ScheduleConference // Schedule conference
    ├── ScheduleDetails // Schedule conference details
    └── Widget // Conference pop view
    You can modify the source code under the tencent_conference_uikit/lib/pages directory to achieve your desired UI results. To make UI customization easier for you, here is an introduction to the files for scheduled conference.
    pages
    ├── conferenceList // Folder for scheduled conference list
    | ├── view.dart // Scheduled conference list page
    | └── widget.dart
    | ├── conference_date_item.dart // Single date widget in the conference list
    | ├── conference_item.dart // Single conference widget in the meeting list
    | └── no_schedule_widget.dart // Widget displayed when there are no conference in the conference list
    ├── schedule_conference // Folder for scheduled conference page
    │ ├── view.dart // Scheduled conference page
    │ └── widgets
    │ ├── attendee_selector // Folder for attendee selection page
    │ │ ├── view.dart // Attendee selection page
    │ │ └── widgets
    │ │ └── selected_attendees.dart // Pop-up page of selected attendees
    │ ├── duration_selector.dart // Widget for selecting conference duration
    │ ├── room_control.dart // Widget for muting/unmuting all attendees or disabling/enabling video during the conference
    │ ├── room_info.dart // Widget for overall room information of the scheduled conference
    │ ├── room_type.dart // Widget for selecting room type
    │ ├── start_time_selector.dart // Widget for selecting conference start time
    │ └── time_zone_selector.dart // Page for selecting conference time zone
    └── schedule_details // Folder for conference details
    │ ├── view.dart // conference details page
    │ └── widgets
    │ ├── details_button_item.dart // Single button widget in the conference details page
    └── └── room_info.dart // Meeting information widget
    Note:
    If you have any suggestions or feedback, contact us at info_rtc@tencent.com.

    Key code

    If you want to implement the schedule conference feature from Definition, please refer to TUIConferenceListManager: Android, iOS&Mac.
    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