Start Broadcasting and Listen
适用场景
主播开播和观众收听功能主要依赖于核心部件(
LiveStreamCore)，该核心部件提供了开启语音聊天室、关闭语音聊天室，直播间内麦位管理，如申请上麦，邀请上麦，移动麦位，踢人下麦等丰富的 API。环境准备
平台 | 版本 |
Flutter | Flutter 3.27.4 及更高版本。 Dart 3.6.2 或更高的版本。 |
Android | Android Studio 3.5及以上版本。 Android 5.0 及以上版本的 Android 设备。 |
iOS | Xcode 15.0及以上版本。 请确保您的项目已设置有效的开发者签名。 |
步骤一：开通服务
步骤二：导入 LiveStreamCore 组件
flutter pubaddlive_stream_core
步骤三：登录
在您的项目中添加如下代码，它的作用是通过调用
RTCRoomEngine 中的登录相关接口完成 TUI 组件的登录。这一步骤至关重要，只有在成功登录之后，您才能正常使用 LiveStreamCore 提供的各项功能。final result = await TUIRoomEngine.login('Replace with your activated SDKAppID','Replace with your userId','Replace with your userSig');
参数说明
这里详细介绍一下 login 函数中所需要用到的几个关键参数：
参数 | 类型 | 说明 |
SDKAppID | int | 在步骤一中的最后一步中您已经获取到，这里不再赘述。 |
UserID | String | 当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符和下划线。 |
userSig | String | 使用 步骤一 的第3步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。更多信息请参见 如何计算及使用 UserSig。 |
说明：
开发环境：如果您正在本地开发调试阶段，可以采用本地
GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。
步骤四：使用核心部件实现语音聊天室功能
说明：
创建语音聊天室核心部件实例
您需要先创建一个控制器
SeatGridController ，然后再将其赋值给语音聊天室核心部件 SeatGridWidget 。SeatGridController 负责提供API, SeatGridWidget 用于展示麦位UI。您可将 SeatGridWidget 添加在您需要展示麦位 UI 的任何地方。final controller = SeatGridController();SeatGridWidget(controller: controller);
主播开启语音聊天室和观众加入语音聊天室
主播开启语音聊天室：开启一个语音聊天室，并将本地麦克风采集的数据推流到语音聊天室。
import 'package:live_stream_core/live_stream_core.dart';import 'package:rtc_room_engine/rtc_room_engine.dart';final roomInfo = TUIRoomInfo(roomId: 'replace with your roomId');roomInfo.name = 'replace with your roomName';roomInfo.seatMode = TUISeatMode.applyToTake;roomInfo.isSeatEnabled = true;roomInfo.roomType = TUIRoomType.livingRoom;final startVoiceRoomResult = await controller.startVoiceRoom(roomInfo);final startMicrophoneResult = await controller.startMicrophone();
观众加入直播间:
import 'package:live_stream_core/live_stream_core.dart';final result = await controller.joinVoiceRoom('replace with your roomId');
主播开启语音聊天室 | 观众加入语音聊天室 |
 |
 |
观众连麦
设置麦位列表排列布局
您可通过
setLayoutMode 接口实现麦位布局。setLayoutMode 这一接口内置3种布局：聚焦布局(focus)、宫格布局(grid)和垂直布局(vertical)，同时也支持自定义布局(free)。// 接口定义void setLayoutMode(LayoutMode layoutMode, SeatWidgetLayoutConfig? layoutConfig);// 接口使用import 'package:live_stream_core/live_stream_core.dart';// 设置宫格布局controller.setLayoutMode(LayoutMode.grid, null);// 设置聚焦布局controller.setLayoutMode(LayoutMode.focus, null);// 设置垂直布局controller.setLayoutMode(LayoutMode.vertical, null);// 设置自定义布局final rowConfig = SeatWidgetLayoutRowConfig(count: 2,seatSpacing: 20.0,seatSize: const Size(80, 80),alignment: SeatWidgetLayoutRowAlignment.spaceBetween);final layoutConfig = SeatWidgetLayoutConfig(rowConfigs: [rowConfig, rowConfig]);controller.setLayoutMode(LayoutMode.free, layoutConfig);
说明：
自定义布局的参数设置可查看 SeatWidgetLayoutRowConfig 中参数说明，其中对齐方式 alignment 可参见 SeatWidgetLayoutRowAlignment 中描述对齐方式效果可参见 示意图。
宫格布局 | 元素布局 | 纵向布局 | 自定义布局 |
 |  |
 |
 |
自定义布局对齐方式示意图：
自定义麦位视图
如果您认为我们默认的 UI 不满足您的需求，您想自定义自己的麦位UI，您可通过
SeatGridWidget 的参数 seatWidetBuilder 实现指定麦位的 UI 样式。// seatWidetBuilder 定义typedef SeatWidgetBuilder = Widget Function(BuildContext context,ValueNotifier<TUISeatInfo> seatInfoNotifier,ValueNotifier<int> volumeNotifier);// 使用示例import 'package:live_stream_core/live_stream_core.dart';import 'package:rtc_room_engine/rtc_room_engine.dart';SeatGridWidget(controller: controller,onSeatWidgetTap: (TUISeatInfo seatInfo) {// debugPrint('click seatWidget index:${seatInfo.index}');},seatWidgetBuilder: (BuildContext context,ValueNotifier<TUISeatInfo> seatInfoNotifier,ValueNotifier<int> volumeNotifier) {// 返回您的自定义麦位部件return Container();})
自定义麦位布局前 | 自定义麦位布局后 |
 |
 |
