Flutter腾讯云直播UI组件插件tencent_live_uikit的使用

Flutter腾讯云直播UI组件插件tencent_live_uikit的使用

直播UI组件插件TUILiveKit for Flutter 快速入门

准备工作

要求

Flutter
  • Flutter 3.22.0 或更高版本。
  • Dart 版本 3.4.0 或更高版本。
Android
  • Android Studio 3.5 或更高版本。
  • Android 设备 5.0 或更高版本。
iOS
  • Xcode 13.0 或更高版本。
  • 请确保您的项目具有有效的开发者签名。

开始使用

如果您想尝试适合您使用的示例应用，请按照以下步骤操作。

创建应用

  1. 访问TRTC控制台的应用管理页面，选择创建应用，输入应用名称（例如 TUIKitDemo），然后点击确认。
  2. 点击应用右侧的应用信息，记下 SDKAppID 和密钥：
    • SDKAppID: 在’TUIKitDemo’后面括号内的数字。
    • SDKSecretKey: 点击复制SDKSecretKey。

构建并运行示例

1. 克隆此仓库

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

2. 通过Android Studio打开TUILiveKit/Flutter项目

3. 设置SDKAppID和SDKSecretKey

打开 Flutter/example/lib/debug/generate_test_user_sig.dart 文件，将相应的SDKAppID和SDKSecretKey填入其中：

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

4. 在模拟器或iOS设备上构建并运行示例应用

制作您的第一个直播

  1. 使用两部手机（A和B）以一串用户ID登录应用程序。如果第一次登录应用程序，需要添加用户名。
  2. 手机A上的用户点击“开始直播”按钮发起直播。
  3. 手机B上的用户可以下拉刷新房间列表，点击进入直播房间观看直播。

完整示例代码

以下是完整的示例代码，展示了如何集成 tencent_live_uikit 插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:tencent_live_uikit/common/index.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
import 'package:tencent_live_uikit_example/generated/l10n.dart';
import 'package:tencent_live_uikit_example/src/view/index.dart';

void main() {
  runApp(const MyApp());
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    S.load(View.of(context).platformDispatcher.locale);
    return MaterialApp(
        navigatorObservers: [
          TUILiveKitNavigatorObserver.instance
        ],
        localizationsDelegates: const [
          ...LiveKitLocalizations.localizationsDelegates,
        ],
        supportedLocales: [
          ...S.delegate.supportedLocales,
          ...LiveKitLocalizations.supportedLocales
        ],
        builder: (context, child) => Scaffold(
              resizeToAvoidBottomInset: false,
              body: GestureDetector(
                onTap: () {
                  hideKeyboard(context);
                },
                child: child,
              ),
            ),
        home: const LoginWidget());
  }

  void hideKeyboard(BuildContext context) {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
      FocusManager.instance.primaryFocus?.unfocus();
    }
  }
}

更多关于Flutter腾讯云直播UI组件插件tencent_live_uikit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter腾讯云直播UI组件插件tencent_live_uikit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tencent_live_uikit 是一个用于 Flutter 的腾讯云直播 UI 组件插件，它提供了一套完整的直播 UI 组件，帮助开发者快速集成腾讯云直播功能。以下是使用 tencent_live_uikit 的基本步骤和示例。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 tencent_live_uikit 依赖：

dependencies:
  flutter:
    sdk: flutter
  tencent_live_uikit: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 SDK

在使用 tencent_live_uikit 之前，你需要初始化腾讯云直播 SDK。通常你可以在 main.dart 中进行初始化：

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化腾讯云直播 SDK
  await TencentLiveUIKit.init(
    appId: 'your_app_id',  // 你的腾讯云 AppID
    appKey: 'your_app_key',  // 你的腾讯云 AppKey
  );
  
  runApp(MyApp());
}

3. 使用直播 UI 组件

tencent_live_uikit 提供了多种直播 UI 组件，例如 LivePlayer、LivePusher 等。你可以在你的页面中直接使用这些组件。

示例：使用 LivePlayer 播放直播流

import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

class LivePlayerPage extends StatelessWidget {
  final String playUrl;

  LivePlayerPage({required this.playUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('直播播放'),
      ),
      body: Center(
        child: LivePlayer(
          url: playUrl,
          autoPlay: true,
          onPlayStateChanged: (state) {
            print('播放状态: $state');
          },
        ),
      ),
    );
  }
}

示例：使用 LivePusher 进行直播推流

import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

class LivePusherPage extends StatelessWidget {
  final String pushUrl;

  LivePusherPage({required this.pushUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('直播推流'),
      ),
      body: Center(
        child: LivePusher(
          url: pushUrl,
          autoStart: true,
          onPushStateChanged: (state) {
            print('推流状态: $state');
          },
        ),
      ),
    );
  }
}

4. 处理直播事件

tencent_live_uikit 提供了多种回调来处理直播事件，例如播放状态变化、推流状态变化等。你可以通过这些回调来处理不同的业务逻辑。

LivePlayer(
  url: playUrl,
  autoPlay: true,
  onPlayStateChanged: (state) {
    if (state == LivePlayState.playing) {
      print('直播开始播放');
    } else if (state == LivePlayState.stopped) {
      print('直播停止播放');
    }
  },
);
回到顶部