Flutter预构建直播UI插件zego_uikit_prebuilt_live_streaming的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter预构建直播UI插件zego_uikit_prebuilt_live_streaming的使用

如果您发现这个包对您有帮助，请在pub.dev上给它一个👍！您的支持和鼓励是我们继续改进和维护这个包的动力。感谢您对我们工作的认可！👏👏

Live Streaming Kit

Live Streaming Kit 是一个功能丰富的直播组件，仅需几行代码即可将自定义直播功能集成到您的应用程序中。并且，通过配置参数，您可以定制各种直播特性。

何时需要Live Streaming Kit

  • 快速开发应用
    • 当您希望尽快搭建直播原型时
    • 将速度或效率作为首要考虑因素时
  • 按需定制UI
    • 根据实际业务需求定制UI时
    • 不想浪费时间开发基础功能时

功能特性

  • 即用型直播
  • 共同主持（邀请共同主持人 & 申请成为共同主持人）
  • PK对决
  • 变声与混响效果
  • 基础美颜功能
  • 屏幕共享
  • 自定义UI样式
  • 实时互动文本聊天
  • 实时观众人数显示
  • 设备管理
  • 可扩展菜单栏

文档资源

迁移指南

更多资源

示例Demo

以下是一个简单的Flutter应用示例，展示了如何使用zego_uikit_prebuilt_live_streaming插件来创建一个直播页面：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zego Live Streaming Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LiveStreamingPage(isHost: true),
    );
  }
}

class LiveStreamingPage extends StatelessWidget {
  final bool isHost;

  LiveStreamingPage({required this.isHost});

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltLiveStreaming(
      appID: 123456789, // 替换为您的AppID
      appSign: 'your AppSign', // 替换为您的AppSign
      userID: 'local_user_id',
      userName: 'local_user_name',
      liveID: 'live_id',
      config: isHost
          ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
          : ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
    );
  }
}

使用说明

  1. 替换占位符：将代码中的appID、appSign、userID、userName和liveID替换为您自己的值。
  2. 运行应用：确保已正确配置Flutter环境后，运行此应用以查看直播功能。

通过以上步骤，您就可以快速体验zego_uikit_prebuilt_live_streaming插件的强大功能，并根据需要进一步定制直播界面和功能。

预览图

以下是部分功能的预览图，展示了一些常见的使用场景：

  • 共同主持 cohosting

  • 直播列表 Live list

  • 虚拟礼物 Send virtual gifts

  • 小游戏集成 Integrate Minigame

  • 屏幕共享 Screen shared by mobile apps

  • 小窗口模式 overlay

  • 画中画模式 pip

  • 自定义布局 Custom Layout

希望这些内容能帮助您更好地理解和使用zego_uikit_prebuilt_live_streaming插件。如果有任何问题或需要进一步的帮助，请随时查阅官方文档或联系技术支持。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成并使用zego_uikit_prebuilt_live_streaming插件的一个示例代码案例。这个插件主要用于快速集成ZEGO云直播的预构建UI组件。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  zego_uikit_prebuilt_live_streaming: ^最新版本号 # 请替换为实际发布的最新版本号

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

步骤 2: 配置Android和iOS

确保你已经按照ZEGO官方文档配置了Android和iOS平台的必要权限和设置。这通常包括在AndroidManifest.xml中添加必要的权限，以及在iOS的Info.plist中添加相应的配置。

步骤 3: 初始化ZEGO并集成UI组件

在你的Flutter项目的主文件（通常是main.dart）中，按照以下步骤初始化ZEGO并集成预构建的直播UI组件。

import 'package:flutter/material.dart';
import 'package:zego_express_engine/zego_express_engine.dart';
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late ZegoExpressEngine _engine;
  late ZegoUIKitPrebuiltLiveStreaming _zegoUIKit;

  @override
  void initState() {
    super.initState();
    initZegoEngine();
  }

  void initZegoEngine() async {
    // 初始化ZEGO引擎
    _engine = ZegoExpressEngine();
    ZegoEngineConfig config = ZegoEngineConfig()
      ..appID = "你的AppID" // 替换为你的ZEGO AppID
      ..serverRegion = ZegoRegion.REGION_CN; // 设置服务器区域

    await _engine.init(config);

    // 初始化UI组件
    _zegoUIKit = ZegoUIKitPrebuiltLiveStreaming(
      zegoExpressEngine: _engine,
      viewContainer: Container(
        color: Colors.black,
      ),
      // 其他UI组件配置参数
      listener: ZegoUIKitPrebuiltLiveStreamingListener(
        onError: (code, msg) {
          print("UI组件错误: $code, $msg");
        },
        // 其他回调事件处理
      ),
    );

    // 开始直播或观看直播的逻辑可以在这里实现
    // 例如，调用_zegoUIKit.startPublishing()或_zegoUIKit.startPlaying()等
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ZEGO Live Streaming Demo'),
        ),
        body: Center(
          child: _zegoUIKit.viewContainer, // 显示UI组件的容器
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 示例按钮，点击可以触发开始直播或停止直播等操作
            // _zegoUIKit.startPublishing() 或 _zegoUIKit.stopPublishing()
          },
          tooltip: 'Action',
          child: Icon(Icons.live_help),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放ZEGO引擎资源
    _engine.destroy();
    super.dispose();
  }
}

注意事项

  1. 权限配置：确保在Android和iOS项目中正确配置了所需的权限。
  2. AppID：将代码中的你的AppID替换为你从ZEGO控制台获取的AppID。
  3. 回调处理：根据需要实现更多的回调处理，比如用户加入、离开直播间，网络状态变化等。
  4. UI自定义：如果需要自定义UI，可以参考ZEGO UIKit的文档进行进一步的定制。

这个示例展示了如何在Flutter项目中集成并使用zego_uikit_prebuilt_live_streaming插件进行直播功能的快速开发。根据实际需求，你可能需要添加更多的功能和错误处理。

回到顶部