Live UIKit for Flutter Quickstart

English | 简体中文

TUILiveKit is an interactive live streaming UI component launched by Tencent Cloud. By integrating this component, you can add interactive live streaming features to your app with just a few lines of code. It supports features such as interactive co-hosting, chat barrage, heartbeats, interactive gifts, and sound effects transformation.

Before getting started

This section shows you the prerequisites you need for testing Live for Flutter example.

Requirements

Flutter

  • Flutter 3.22.0 or later.
  • Dart version 3.4.0 or higher.

Android

  • Android Studio 3.5 or later.
  • Android devices 5.0 or later.

iOS

  • Xcode 13.0 or later.
  • Please ensure that your project has a valid developer signature set.

Getting started

If you would like to try the sample app specifically fit to your usage, you can do so by following the steps below.

Create an application.

  1. Go to the Application management page in the TRTC console, select Create Application, enter an application name such as TUIKitDemo, and click Confirm.
  2. Click Application Information on the right of the application, note the SDKAppID and key:
    • SDKAppID: A number in parentheses after 'TUIKitDemo'.
    • SDKSecretKey: Click Copy SDKSecretKey.

Build and run the example

1. Clone this repository

git clone https://github.com/Tencent-RTC/TUILiveKit.git

2. Open the TUILiveKit/Flutter project through Android Studio

3. Set SDKAppID and SDKSecretKey

Open the Flutter/example/lib/debug/generate_test_user_sig.dart files, will be submitted to apply for access to the corresponding SDKAppID and SDKSecretKey fill in among them:

static int sdkAppId = 0;
static String secretKey = '';

4. Build and run the example application on Simulator or iOS devices

Making your first live

  1. Use two mobile phones (A and B) to log in to the application using a string of user ids. If you log in to the application for the first time, you need to add a user name
  2. The user on mobile phone A clicks the "Start Live" button to initiate live broadcast
  3. You can pull down to refresh the room list on mobile phone B, and click to enter the live broadcast room to watch the live broadcast

Libraries

common/boot/boot
common/boot/index
common/constants/constants
common/constants/index
common/index
common/language/gen/livekit_localizations
common/language/gen/livekit_localizations_en
common/language/gen/livekit_localizations_zh
common/language/index
common/logger/index
common/logger/logger
common/resources/colors
common/resources/images
common/resources/index
common/ui_component/audience_list/audience_list_panel_widget
common/ui_component/audience_list/audience_list_widget
common/ui_component/audio_effect/index
common/ui_component/audio_effect/service/audio_effect_service
common/ui_component/audio_effect/store/audio_effect_state
common/ui_component/audio_effect/store/audio_effect_state_factory
common/ui_component/audio_effect/widget/audio_effect_panel_widget
common/ui_component/audio_effect/widget/change_voice_widget
common/ui_component/audio_effect/widget/reverb_widget
common/ui_component/beauty/beauty_panel_widget
common/ui_component/dashboard/anchor_dashboard_widget
common/ui_component/dashboard/audience_dashboard_widget
common/ui_component/index
common/ui_component/live_info/live_info_detail_widget
common/ui_component/live_info/live_info_widget
common/ui_component/music/index
common/ui_component/music/service/music_service
common/ui_component/music/store/music_state
common/ui_component/music/store/music_state_factory
common/ui_component/music/widget/music_panel_widget
common/ui_component/preview/live_cover_select_widget
common/ui_component/preview/live_info_edit_widget
common/ui_component/room_list/service/room_list_service
common/ui_component/room_list/store/room_list_state
common/ui_component/room_list/widget/room_list_widget
common/widget/action_sheet
common/widget/basic_widget
common/widget/global
common/widget/index
common/widget/toast
manager/controller/controller
manager/controller/index
manager/controller/media_controller
manager/controller/room_controller
manager/controller/seat_controller
manager/controller/user_controller
manager/controller/view_controller
manager/error/error_handler
manager/error/index
manager/index
manager/live_controller
manager/observer/index
manager/observer/live_observer
platform/index
platform/rtc_live_tuikit_method_channel
platform/rtc_live_tuikit_platform_interface
service/impl/live_service_impl
service/index
service/live_service
service/service_provider
state/index
state/live_define
state/live_state
state/operation/beauty_state
state/operation/index
state/operation/media_state
state/operation/operation_state
state/operation/room_state
state/operation/seat_state
state/operation/user_state
state/view/view_state
tencent_live_uikit
widget/index
widget/live_identity_generator
widget/live_list_widget
widget/live_navigator_observer
widget/live_room/anchor/anchor_widget
widget/live_room/anchor/common/settings_panel_widget
widget/live_room/anchor/common/video_params_panel_widget
widget/live_room/anchor/index
widget/live_room/anchor/live_streaming/anchor_living_function_widget
widget/live_room/anchor/live_streaming/anchor_living_widget
widget/live_room/anchor/preview/anchor_preview_function_widget
widget/live_room/anchor/preview/anchor_preview_widget
widget/live_room/anchor/video/anchor_video_widget
widget/live_room/audience/audience_widget
widget/live_room/audience/component/live_streaming/audience_function_widget
widget/live_room/audience/component/live_streaming/audience_living_widget
widget/live_room/audience/component/live_streaming/audience_waiting_pass_widget
widget/live_room/audience/component/video/audience_video_widget
widget/live_room/audience/index
widget/live_room/index
widget/live_room/live_room_anchor_widget
widget/live_room/live_room_audience_widget
widget/live_room/video/index
widget/live_room/video/nine_grid_layout
widget/live_room/video/video_item_widget
widget/live_room/video/video_widget_factory