이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Docs Overview/
Conference/
iOS/
기본 기능/
회의 예약 /

회의 예약

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.