English | 简体中文
Tencent Cloud UIKit for Video Conference
TUIRoomKit is Tencent Cloud launched a positioning enterprise meeting, online class, network salon and other scenes of the UI component, through the integration of the component, you only need to write a few lines of code can add similar video conference functions for your App, and support screen sharing, member management, ban the ban painting, chat and other functions. TUIRoomKit supports Windows, Mac, Android, iOS, Web, Electron and other development platforms.
Features
- Easy access: Provide open source components with UI, save 90% development time, fast online video conference function.
- Platform connectivity: TUIRoomKit components of all platforms are interconnected and accessible.
- Screen sharing: Based on the screen acquisition capability of each platform jointly polished by 3000+ market applications, with exclusive AI coding algorithm, lower bit rate and clearer picture.
- Member management: It supports multiple standard room management functions such as all mute, single member gag, drawing, inviting to speak, kicking out of the room, etc.
- Other features: Support room members chat screen, sound Settings and other features, welcome to use.
Make a first video Conference
Here is an example of integration with UI (ie TUIRoomKit), which is also our recommended integration method. The key steps are as follows:
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。 |
iOS | iOS 12.0 and higher. |
Active the service
First, please Create an application in the TRTC Console and record the SDKAppID and SecretKey parameters. These parameters will be used in the subsequent integration process. The location of the application creation and parameters is shown in the following figure:
! This component uses two basic PaaS services of Tencent Cloud: TRTC and IM. When you activate TRTC, IM will be activated automatically. For information about the billing , see Pricing.
Access and use
-
Step 1: Add the dependency
Add the rtc_conference_tui_kit plugin dependency in
pubspec.yaml
file in your projectdependencies: rtc_conference_tui_kit: latest release version
Execute the following command to install the plugin
flutter pub get
-
Step 2: Complete Project Configuration
-
Since the
rtc_conference_tui_kit
component uses theGetX
state management library for navigation, you need to useGetMaterialApp
instead ofMaterialApp
in your application. Or you can set thenavigatorKey
property in yourMaterialApp
toGet.key
to achieve the same effect. -
Use
Xcode
to open your project, selectProject
->Building Settings
->Deployment
, and set theStrip Style
toNon-Global Symbols
to retain all global symbol information. -
To use the audio and video functions on iOS, you need to authorize the use of the mic and camera (For Android, the relevant permissions have been declared in the SDK, so you do not need to manually configure them).
Add the following two items to the
Info.plist
of the App, which correspond to the prompt messages of the mic and camera when the system pops up the authorization dialog box.<key>NSCameraUsageDescription</key> <string>TUIRoom needs access to your Camera permission</string> <key>NSMicrophoneUsageDescription</key> <string>TUIRoom needs access to your Mic permission</string>
After completing the above additions, 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 3: Login
rtc_conference_tui_kit
pluginimport '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 }
-
Step 4: User
rtc_conference_tui_kit
plugin-
Set self nickName and avatar
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart'; var roomKit = TUIRoomKit.createInstance(); roomKit.setSelfInfo('nickName', 'avatarURL');
-
Create room
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart'; var roomKit = TUIRoomKit.createInstance(); TUIRoomInfo roomInfo = TUIRoomInfo(roomId: 'your roomId'); var result = await roomKit.createRoom(roomInfo); if (result.code == TUIError.success) { // create room success } else { // create room error }
-
Enter room(After calling this interface, the UI interface will be pulled up for you to enter the room.)
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart'; var roomKit = TUIRoomKit.createInstance(); var result = await roomKit.enterRoom('roomId', // Please replace with your room id isOpenMicrophone, // Whether to turn on the microphone when entering the room isOpenCamera, // Whether to turn on the microphone when entering the room userSpeaker); // Whether to use speakers to play sound when entering the room if (result.code == TUIError.success) { // enter room success } else { // enter room success }
-
Quick link
-
If you encounter difficulties, you can refer to FAQs, here are the most frequently encountered problems of developers, covering various platforms, I hope it can Help you solve problems quickly.
-
If you would like to see more official examples, you can refer to the example Demo of each platform: Web, Android, iOS, Electron, Windows.
-
If you would like to see some of our latest product features, you can check the Update Log, here are the latest features of TUIRoomKit, as well as the historical version features iterate
-
For complete API documentation, see API reference: including TUIRoomKit、 (with UIKit), TUIRoomEngine (without UIKit), and events Callbacks, etc.
-
If you want to learn more about the projects maintained by Tencent Cloud Media Services Team, you can check our Product Official Website, Github Organizations etc.
Communication and feedback
If you have any suggestions or comments in the use process, you are welcome to join our technical exchange group for technical exchange and product communication.
Libraries
- common/extension/double_extension
- common/extension/index
- common/index
- common/languages/en_us
- common/languages/index
- common/languages/translation_service
- common/languages/zh_cn
- common/models/audio
- common/models/index
- common/models/user
- common/models/video
- common/store/index
- common/store/room
- common/style/colors
- common/style/index
- common/style/theme
- common/values/constants
- common/values/images
- common/values/index
- common/widgets/bottom_sheet
- common/widgets/dialog
- common/widgets/index
- common/widgets/info_list
- common/widgets/rounded_container
- common/widgets/search_bar
- common/widgets/single_select_list
- common/widgets/slider
- common/widgets/switch
- common/widgets/toast
- common/widgets/user_info
- event/room_event_handler
- manager/rtc_engine_manager
- pages/conference_main/controller
- pages/conference_main/index
- pages/conference_main/view
- pages/conference_main/widgets/bottom_view/controller
- pages/conference_main/widgets/bottom_view/index
- pages/conference_main/widgets/bottom_view/view
- pages/conference_main/widgets/bottom_view/widgets/widgets
- pages/conference_main/widgets/exit/controller
- pages/conference_main/widgets/exit/index
- pages/conference_main/widgets/exit/view
- pages/conference_main/widgets/invite_sheet/invite_sheet
- pages/conference_main/widgets/local_screen_sharing/local_screen_sharing
- pages/conference_main/widgets/raise_hand_list/controller
- pages/conference_main/widgets/raise_hand_list/index
- pages/conference_main/widgets/raise_hand_list/view
- pages/conference_main/widgets/raise_hand_list/widgets/title
- pages/conference_main/widgets/raise_hand_list/widgets/user_item
- pages/conference_main/widgets/raise_hand_list/widgets/user_table
- pages/conference_main/widgets/raise_hand_list/widgets/widgets
- pages/conference_main/widgets/setting/controller
- pages/conference_main/widgets/setting/index
- pages/conference_main/widgets/setting/view
- pages/conference_main/widgets/setting/widgets/audio_setting
- pages/conference_main/widgets/setting/widgets/setting_info_select
- pages/conference_main/widgets/setting/widgets/setting_item
- pages/conference_main/widgets/setting/widgets/video_setting
- pages/conference_main/widgets/setting/widgets/widgets
- pages/conference_main/widgets/top_view/controller
- pages/conference_main/widgets/top_view/index
- pages/conference_main/widgets/top_view/view
- pages/conference_main/widgets/top_view/widgets/meeting_title
- pages/conference_main/widgets/top_view/widgets/room_info_sheet
- pages/conference_main/widgets/top_view/widgets/widgets
- pages/conference_main/widgets/transfer_host/controller
- pages/conference_main/widgets/transfer_host/index
- pages/conference_main/widgets/transfer_host/view
- pages/conference_main/widgets/transfer_host/widgets/title
- pages/conference_main/widgets/transfer_host/widgets/user_item
- pages/conference_main/widgets/transfer_host/widgets/user_table
- pages/conference_main/widgets/transfer_host/widgets/widgets
- pages/conference_main/widgets/user_list/controller
- pages/conference_main/widgets/user_list/index
- pages/conference_main/widgets/user_list/view
- pages/conference_main/widgets/user_list/widgets/user_control
- pages/conference_main/widgets/user_list/widgets/user_control_item
- pages/conference_main/widgets/user_list/widgets/user_item
- pages/conference_main/widgets/user_list/widgets/user_table
- pages/conference_main/widgets/user_list/widgets/widgets
- pages/conference_main/widgets/video_seat/video_layout/controller
- pages/conference_main/widgets/video_seat/video_layout/index
- pages/conference_main/widgets/video_seat/video_layout/view
- pages/conference_main/widgets/video_seat/video_layout/widgets/video_item/view
- pages/conference_main/widgets/video_seat/video_layout/widgets/video_item/widgets/video_user_info
- pages/conference_main/widgets/video_seat/video_layout/widgets/video_item/widgets/volume_bar
- pages/conference_main/widgets/video_seat/video_layout/widgets/video_item/widgets/widgets
- pages/conference_main/widgets/video_seat/video_layout/widgets/widgets
- pages/conference_main/widgets/video_seat/video_layout/widgets/with_draggable_window_widget
- pages/conference_main/widgets/video_seat/video_page_turning/controller
- pages/conference_main/widgets/video_seat/video_page_turning/index
- pages/conference_main/widgets/video_seat/video_page_turning/view
- pages/conference_main/widgets/video_seat/video_page_turning/widgets/page_indicator
- pages/conference_main/widgets/video_seat/video_page_turning/widgets/widgets
- pages/conference_main/widgets/widgets
- platform/rtc_conference_tuikit_method_channel
- platform/rtc_conference_tuikit_platform_interface
- rtc_conference_tuikit
- rtc_conference_tuikit_impl