予約会議
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:
According to your business, simply call the following code in the corresponding Activity to schedule a conference.
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.dartNavigator.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:
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:
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 addedfunc 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 ConferenceListWidgetclass YourPage extends StatelessWidget {const YourPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Your Page")),body: Column(children: [...YourWidgets(), // Your other widgets, this is just an examconst 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:
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:
// Replace SelectParticipantActivity.class with the custom address book activityConferenceSession.sharedInstance().setContactsViewProvider(SelectParticipantActivity.class);
// Replace SelectParticipantActivity::class.java with the custom address book activityConferenceSession.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.
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.
// Retrieve the selected user listConferenceParticipants participants = (ConferenceParticipants) bundle.getSerializable(CONFERENCE_PARTICIPANTS); ArrayList<User> selectedList = participants.selectedList;
// Retrieve the selected user listval participants = bundle.getSerializable(CONFERENCE_PARTICIPANTS) as ConferenceParticipantsval 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 Codeclass 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 idelegate?.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 CodeConferenceSession.sharedInstance.setContactsViewProvider { participants inreturn 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 additV2TIMManager().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:
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.