tencent cloud

实时音视频

动态与公告
产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
产品简介
产品概述
基本概念
产品功能
产品优势
应用场景
性能数据
购买指南
计费概述
免费时长说明
月订阅
现收现付
TRTC 逾期与暂停政策
常见问题解答
退款说明
新手指引
Demo 体验
视频通话 SDK
组件介绍
开通服务
跑通 Demo
快速接入
离线唤醒
会话聊天
云端录制
AI 降噪
界面定制
Chat 集成通话能力
更多特性
无 UI 集成
服务端 API
客户端 API
解决方案
错误码表
发布日志
常见问题
视频会议 SDK
组件介绍（TUIRoomKit）
开通服务（TUIRoomKit）
跑通 Demo（TUIRoomKit）
快速接入（TUIRoomKit）
屏幕共享（TUIRoomKit）
预定会议（TUIRoomKit）
会中呼叫（TUIRoomKit）
界面定制（TUIRoomKit）
虚拟背景（TUIRoomKit）
会议控制（TUIRoomKit）
云端录制（TUIRoomKit）
AI 降噪（TUIRoomKit）
会中聊天（TUIRoomKit）
机器人推流（TUIRoomKit）
更多特性（TUIRoomKit）
客户端 API（TUIRoomKit）
服务端 API（TUIRoomKit）
常见问题（TUIRoomKit）
错误码 (TUIRoomKit)
SDK更新日志（TUIRoomKit）
直播与语聊 SDK
Live 视频直播计费说明
组件介绍
开通服务（TUILiveKit）
跑通 Demo
无 UI 集成
UI 自定义
直播监播
视频直播
语聊房
高级功能
客户端 API
服务端 API
错误码
发布日志
常见问题
RTC Engine
开通服务
SDK 下载
API-Example
接入指引
API-参考手册
高级功能
AI 集成
概述
MCP 配置
Skills 配置
集成指南
常见问题
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
控制台指南
应用管理
套餐包管理
用量统计
监控仪表盘
开发辅助
解决方案
实时合唱
常见问题
迁移指南
计费相关
功能相关
UserSig 相关
应对防火墙限制相关
缩减安装包体积相关
Andriod 与 iOS 相关
Web 端相关
Flutter 相关
Electron 相关
TRTCCalling Web 相关
音视频质量相关
其他问题
旧版文档
RTC RoomEngine SDK（旧）
集成 TUIRoom (Web)
集成 TUIRoom (Android)
集成 TUIRoom (iOS)
集成 TUIRoom (Flutter)
集成 TUIRoom (Electron)
TUIRoom API 查询
实现云端录制与回放（旧）
监控仪表盘计费（旧）
协议与策略
安全合规认证
安全白皮书
信息安全说明
服务等级协议
苹果隐私策略：PrivacyInfo.xcprivacy
TRTC 政策
隐私协议
数据处理和安全协议
词汇表
文档实时音视频直播与语聊 SDK无 UI 集成搭建视频直播快速接入快速接入（Flutter）

快速接入（Flutter）

PDF
聚焦模式
字号
最后更新时间： 2026-02-06 15:33:54
本文档将帮助您使用 AtomicXCore SDK 的核心组件 LiveCoreWidget，快速构建一个包含主播开播和观众观看功能的基础直播 App。

核心功能

LiveCoreWidget 是一个专为直播场景设计的轻量级 Widget 组件，是您构建直播场景的核心，它封装了所有复杂的底层直播技术（例如推拉流、连麦、音视频渲染）。您可以将 LiveCoreWidget 作为直播画面的"画布"，专注于上层 UI 与交互的开发。
通过下方的视图层级示意图，您可以直观了解 LiveCoreWidget 在直播界面中的位置和作用：


准备工作

步骤1：开通服务

请参见 开通服务，获取体验版或付费版 SDK。

步骤2：在当前项目中导入 AtomicXCore

1. 安装组件：请在您的 pubspec.yaml 文件中添加 atomic_x_core 依赖，然后执行 flutter pub get。
dependencies:
  atomic_x_core: ^3.6.0
2. 配置工程权限：Android 和 iOS 工程都需要配置权限。
Android
iOS
请在 android/app/src/main/AndroidManifest.xml 文件中添加相机和麦克风的使用权限说明。
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
请在应用 iOS 目录的 Podfile 和 ios/Runner 目录的 Info.plist 文件中添加相机和麦克风的使用权限说明。
Podfile
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
Info.plist
<key>NSCameraUsageDescription</key>
<string>TUILiveKit需要访问你的相机权限，开启后录制的视频才会有画面</string>
<key>NSMicrophoneUsageDescription</key>
<string>TUILiveKit需要访问您的麦克风权限，开启后录制的视频才会有声音</string>


步骤3：实现登录逻辑

在您的项目中调用 LoginStore.shared.login 完成登录，这是使用 AtomicXCore 所有功能的关键前提。
重要：
推荐在您 App 自身的用户账户登录成功后，再调用 LoginStore.shared.login，以确保登录业务逻辑的清晰和一致。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final result = await LoginStore.shared.login(
    sdkAppID: 1400000001,           // 替换为您的 sdkAppID
    userID: "test_001",             // 替换为您的 userID
    userSig: "xxxxxxxxxxx",         // 替换为您的 userSig
  );

  if (result.isSuccess) {
    debugPrint("login success");
  } else {
    debugPrint("login failed code: ${result.errorCode}, message: ${result.errorMessage}");
  }

  runApp(const MyApp());
}
登录接口参数说明：
参数
类型
说明
sdkAppID
int
userID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用1、123等简单 ID。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 UserSig 或者通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

搭建基础直播间

步骤1：实现主播视频开播

主播开播流程如下，您只需执行以下几步操作，即可快速搭建主播视频直播。

提示：
主播开播推流的业务代码，您也可以参考 TUILiveKit 开源项目中的 live_room_anchor_widget.dart 文件来了解完整的实现逻辑。
1. 初始化主播推流视图
在您的主播页面中，创建一个 LiveCoreWidget 实例，并通过 LiveCoreController 控制直播行为。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAnchorPage 代表您的主播开播页面
class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  // 1. 创建 LiveCoreController 实例
  late final LiveCoreController _controller;

  @override
  void initState() {
    super.initState();
    // 2. 初始化 controller
    _controller = LiveCoreController.create();
    // 3. 设置直播 ID
    _controller.setLiveID(widget.liveId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 4. 将主播推流页面加载到您的视图上
          LiveCoreWidget(controller: _controller),
          // 您的其他 UI 组件
        ],
      ),
    );
  }
}
2. 打开摄像头和麦克风
通过调用 DeviceStore 的 openLocalCamera、openLocalMicrophone 接口打开摄像头和麦克风，您无需做额外操作，LiveCoreWidget 会自动预览当前摄像头的视频流，示例代码如下：
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAnchorPage 代表您的主播开播页面
class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  late final LiveCoreController _controller;

  @override
  void initState() {
    super.initState();
    _controller = LiveCoreController.create();
    _controller.setLiveID(widget.liveId);
    // 打开设备
    _openDevices();
  }

  void _openDevices() {
    // 1. 打开前置摄像头
    DeviceStore.shared.openLocalCamera(true);
    // 2. 打开麦克风
    DeviceStore.shared.openLocalMicrophone();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          LiveCoreWidget(controller: _controller),
        ],
      ),
    );
  }
}
3. 开始直播
通过调用 LiveListStore 的 createLive 接口开始视频直播，完整示例代码如下：
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAnchorPage 代表您的主播开播页面
class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  late final LiveCoreController _controller;

  @override
  void initState() {
    super.initState();
    _controller = LiveCoreController.create();
    _controller.setLiveID(widget.liveId);
    _openDevices();
  }

  void _openDevices() {
    DeviceStore.shared.openLocalCamera(true);
    DeviceStore.shared.openLocalMicrophone();
  }

  // 调用开播接口开始直播
  Future<void> _startLive() async {
    // 1. 准备 LiveInfo 对象
    final liveInfo = LiveInfo(
      // 设置直播的房间 id
      liveID: widget.liveId,
      // 设置直播的房间名称
      liveName: "test 直播",
      // 配置布局模板，默认：600 动态宫格布局
      seatLayoutTemplateID: 600,
      // 配置主播始终在麦位上
      keepOwnerOnSeat: true,
    );

    // 2. 调用 LiveListStore.shared.createLive 开始直播
    final result = await LiveListStore.shared.createLive(liveInfo);

    if (result.isSuccess) {
      debugPrint("startLive success");
    } else {
      debugPrint("startLive error: ${result.errorMessage}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          LiveCoreWidget(controller: _controller),
          // 开播按钮
          Positioned(
            bottom: 50,
            left: 0,
            right: 0,
            child: Center(
              child: ElevatedButton(
                onPressed: _startLive,
                child: const Text('开始直播'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
LiveInfo 参数说明：
参数名
类型
属性
描述
liveID
String
必填
直播间的唯一标识符。
liveName
String
选填
直播间的标题。
notice
String
选填
直播间的公告信息。
isMessageDisable
bool
选填
是否禁言（true：是，false：否）。
isPublicVisible
bool
选填
是否公开可见（true：是，false：否）。
isSeatEnabled
bool
选填
是否启用麦位功能（true：是，false：否）。
keepOwnerOnSeat
bool
选填
是否保持房主在麦位上。
maxSeatCount
int
选填
最大麦位数量。
seatMode
TakeSeatMode
选填
上麦模式（TakeSeatMode.free：自由上麦，TakeSeatMode.apply：申请上麦）。
seatLayoutTemplateID
int
必填
麦位布局模板 ID。
coverURL
String
选填
直播间的封面图片地址。
backgroundURL
String
选填
直播间的背景图片地址。
categoryList
List<int>
选填
直播间的分类标签列表。
activityStatus
int
选填
直播活动状态。
isGiftEnabled
bool
选填
是否启用礼物功能（true：是，false：否）。
4. 结束直播
直播结束后，主播可以调用 LiveListStore 的 endLive 接口结束直播。SDK 会处理停止推流和销毁房间的逻辑。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAnchorPage 代表您的主播开播页面
class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  // ... 其他代码 ...

  // 结束直播
  Future<void> _stopLive() async {
    final result = await LiveListStore.shared.endLive();

    if (result.isSuccess) {
      debugPrint("endLive success");
    } else {
      debugPrint("endLive error: ${result.errorMessage}");
    }
  }

  // ... 其他代码 ...
}

步骤2：实现观众进房观看

观众观看流程如下，通过简单几步操作，即可实现观众观看直播。

提示：
观众进房拉流的业务代码，您也可以参考 TUILiveKit 开源项目中的 audience_widget.dart 文件来了解完整的实现逻辑。
1. 实现观众拉流页面
在您的观众页面中，创建 LiveCoreWidget 实例，并通过 LiveCoreController 控制直播行为。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAudiencePage 代表您的观众观看页面
class YourAudiencePage extends StatefulWidget {
  final String liveId;

  const YourAudiencePage({super.key, required this.liveId});

  @override
  State<YourAudiencePage> createState() => _YourAudiencePageState();
}

class _YourAudiencePageState extends State<YourAudiencePage> {
  // 1. 创建 LiveCoreController 实例
  late final LiveCoreController _controller;

  @override
  void initState() {
    super.initState();
    // 2. 初始化 controller
    _controller = LiveCoreController.create();
    // 3. 绑定直播 id
    _controller.setLiveID(widget.liveId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 4. 将观众拉流页面加载到您的视图上
          LiveCoreWidget(controller: _controller),
        ],
      ),
    );
  }
}
2. 进入直播间观看
通过调用 LiveListStore 的 joinLive 接口加入直播，您无需做额外操作，LiveCoreWidget 会自动播放当前房间的视频流，完整示例代码如下：
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAudiencePage 代表您的观众观看页面
class YourAudiencePage extends StatefulWidget {
  final String liveId;

  const YourAudiencePage({super.key, required this.liveId});

  @override
  State<YourAudiencePage> createState() => _YourAudiencePageState();
}

class _YourAudiencePageState extends State<YourAudiencePage> {
  late final LiveCoreController _controller;

  @override
  void initState() {
    super.initState();
    _controller = LiveCoreController.create();
    _controller.setLiveID(widget.liveId);
    // 进入直播间
    _joinLive();
  }

  Future<void> _joinLive() async {
    // 调用 LiveListStore.shared.joinLive 进入直播间
    // - liveId: 与主播开播同样的 liveId
    final result = await LiveListStore.shared.joinLive(widget.liveId);

    if (result.isSuccess) {
      debugPrint("joinLive success");
    } else {
      debugPrint("joinLive error: ${result.errorMessage}");
      // 进房失败，也需要退出页面
      // if (mounted) Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          LiveCoreWidget(controller: _controller),
        ],
      ),
    );
  }
}
3. 退出直播
观众退出直播间时，需要调用 LiveListStore 的 leaveLive 接口退出直播。SDK 会自动停止拉流并退出房间。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAudiencePage 代表您的观众观看页面
class YourAudiencePage extends StatefulWidget {
  final String liveId;

  const YourAudiencePage({super.key, required this.liveId});

  @override
  State<YourAudiencePage> createState() => _YourAudiencePageState();
}

class _YourAudiencePageState extends State<YourAudiencePage> {
  // ... 其他代码 ...

  // 退出直播
  Future<void> _leaveLive() async {
    final result = await LiveListStore.shared.leaveLive();

    if (result.isSuccess) {
      debugPrint("leaveLive success");
    } else {
      debugPrint("leaveLive error: ${result.errorMessage}");
    }
  }

  // ... 其他代码 ...
}

步骤3：监听直播事件

在观众加入直播间后，您还需要处理一些房间内的"被动"事件。例如，主播主动结束了直播，或者观众因为违规等原因被踢出房间。如果不监听这些事件，观众端 UI 可能会停留在黑屏页面，影响用户体验。
您可以通过 LiveListListener 来实现事件监听。
import 'package:flutter/material.dart';
import 'package:atomic_x_core/atomicxcore.dart';

/// YourAudiencePage 代表您的观众观看页面
class YourAudiencePage extends StatefulWidget {
  final String liveId;

  const YourAudiencePage({super.key, required this.liveId});

  @override
  State<YourAudiencePage> createState() => _YourAudiencePageState();
}

class _YourAudiencePageState extends State<YourAudiencePage> {
  late final LiveCoreController _controller;
  // 1. 定义 LiveListListener 来管理事件监听
  late final LiveListListener _liveListListener;

  @override
  void initState() {
    super.initState();
    _controller = LiveCoreController.create();
    _controller.setLiveID(widget.liveId);
    // 2. 监听直播事件
    _setupLiveEventListener();
    // 3. 进入直播间
    _joinLive();
  }

  // 4. 新增一个方法来设置事件监听
  void _setupLiveEventListener() {
    _liveListListener = LiveListListener(
      onLiveEnded: (liveID, reason, message) {
        // 监听到直播结束
        debugPrint("Live ended. liveID: $liveID, reason: ${reason.value}, message: $message");
        // 在此处处理退出直播间的逻辑，例如关闭当前页面
        // if (mounted) Navigator.of(context).pop();
      },
      onKickedOutOfLive: (liveID, reason, message) {
        // 监听到被踢出直播
        debugPrint("Kicked out of live. liveID: $liveID, reason: ${reason.value}, message: $message");
        // 在此处处理退出直播间的逻辑
        // if (mounted) Navigator.of(context).pop();
      },
    );
    LiveListStore.shared.addLiveListListener(_liveListListener);
  }

  Future<void> _joinLive() async {
    final result = await LiveListStore.shared.joinLive(widget.liveId);
    if (result.isSuccess) {
      debugPrint("joinLive success");
    } else {
      debugPrint("joinLive error: ${result.errorMessage}");
    }
  }

  Future<void> _leaveLive() async {
    final result = await LiveListStore.shared.leaveLive();
    if (result.isSuccess) {
      debugPrint("leaveLive success");
    } else {
      debugPrint("leaveLive error: ${result.errorMessage}");
    }
  }

  @override
  void dispose() {
    // 5. 移除事件监听
    LiveListStore.shared.removeLiveListListener(_liveListListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          LiveCoreWidget(controller: _controller),
        ],
      ),
    );
  }
}

运行效果

集成 LiveCoreWidget 后，您将得到一个纯净的视频渲染视图，它已具备完整的直播业务能力，但没有任何交互 UI。您可以参考下一章节 丰富直播场景 来完善直播场景。
布局
动态宫格布局
浮动小窗布局
固定宫格布局
固定小窗布局
模板 ID
600
601
800
801
描述
默认布局，可根据连麦人数动态调整宫格大小。
连麦嘉宾以浮动小窗形式显示。
连麦人数固定，每个嘉宾占据一个固定宫格。
连麦人数固定，嘉宾以固定小窗形式显示。

丰富直播场景

当您完成了基础的直播功能后，您可以参考以下功能指南来为直播添加丰富的互动玩法。
直播功能
功能介绍
功能 Stores
实现指南
实现观众音视频连线
观众申请上麦，与主播进行实时视频互动。
实现主播跨房连线 PK
两个不同房间的主播进行连线，实现互动或 PK。
添加弹幕聊天功能
观众可以在直播间发送和接收实时文字消息。
构建礼物赠送系统
观众可以向主播赠送虚拟礼物，增加互动和趣味性。
GiftStore

API 文档

Store/Component
功能描述
API 文档
LiveCoreWidget
直播视频流展示与交互的核心视图组件：负责视频流渲染和视图挂件处理，支持主播直播、观众连麦、主播连线等场景。
API 文档
LiveCoreController
LiveCoreWidget 的控制器：用于设置直播 ID、控制预览等操作。
API 文档
LiveListStore
直播间全生命周期管理：创建 / 加入 / 离开 / 销毁房间，查询房间列表，修改直播信息（名称、公告等），监听直播状态（如被踢出、结束）。
API 文档
DeviceStore
音视频设备控制：麦克风（开关 / 音量）、摄像头（开关 / 切换 / 画质）、屏幕共享，设备状态实时监听。
API 文档
CoGuestStore
观众连麦管理：连麦申请 / 邀请 / 同意 / 拒绝，连麦成员权限控制（麦克风 / 摄像头），状态同步。
API 文档
CoHostStore
主播跨房连线：支持多布局模板（动态网格等），发起 / 接受 / 拒绝连线，连麦主播互动管理。
API 文档
BattleStore
主播 PK 对战：发起 PK（配置时长 / 对手），管理 PK 状态（开始 / 结束），同步分数，监听对战结果。
API 文档
GiftStore
礼物互动：获取礼物列表，发送 / 接收礼物，监听礼物事件（含发送者、礼物详情）。
API 文档
BarrageStore
弹幕功能：发送文本 / 自定义弹幕，维护弹幕列表，实时监听弹幕状态。
API 文档
LikeStore
点赞互动：发送点赞，监听点赞事件，同步总点赞数。
API 文档
LiveAudienceStore
观众管理：获取实时观众列表（ID / 名称 / 头像），统计观众数量，监听观众进出事件。
API 文档
AudioEffectStore
音频特效：变声（童声 / 男声）、混响（KTV 等）、耳返调节，实时切换特效。
API 文档
BaseBeautyStore
基础美颜：调节磨皮 / 美白 / 红润（0-100 级），重置美颜状态，同步效果参数。
API 文档

常见问题

主播调用 createLive 或 观众调用 joinLive 后为什么画面是黑的，没有视频画面？

检查 setLiveID：请确保在调用开播或观看接口前，已经为 LiveCoreController 实例设置了正确的 liveID。
检查设备权限：请确保 App 已获得摄像头和麦克风的系统使用权限。
检查主播端：主播端是否正常调用 DeviceStore.shared.openLocalCamera(true) 打开了摄像头。
检查网络：请检查设备网络连接是否正常。

Flutter 项目如何请求权限？

您可以使用 permission_handler 插件来请求摄像头和麦克风权限：
import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  await [
    Permission.camera,
    Permission.microphone,
  ].request();
}

如何在 Flutter 中处理页面生命周期？

建议在 dispose 方法中清理资源，例如移除事件监听器：
@override
void dispose() {
  LiveListStore.shared.removeLiveListListener(_liveListListener);
  super.dispose();
}
上一篇: 快速接入（Web）下一篇: 观众列表（Android）

帮助和支持

本页内容是否解决了您的问题？

填写满意度调查问卷，共创更好文档体验。

文档反馈