Flutter音视频通话UI插件zego_uikit_prebuilt_call的使用

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

Flutter音视频通话UI插件zego_uikit_prebuilt_call的使用

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

Call Kit

Call Kit 是一个预构建的功能丰富的通话组件，只需几行代码即可将一对一和群组语音/视频通话集成到您的应用中。

我们还支持在线邀请和离线邀请，并且包含了业务逻辑与UI，您可以根据实际业务需求添加或移除功能。

ZEGOCLOUD Video Call Feature Intro

何时需要Call Kit？

  • 快速构建应用

    • 当您想要尽快原型化一对一或群组语音/视频通话时
    • 将速度或效率作为首要优先级
    • Call Kit允许您在几分钟内完成集成

  • 按需定制UI和功能

    • 根据实际业务需求自定义通话中的功能
    • 减少开发基本功能的时间浪费
    • Call Kit包含业务逻辑和UI，允许您相应地自定义功能

功能

  • 一对一/群组通话
  • 通话邀请/离线通话邀请
  • 漏接电话&回拨
  • 屏幕共享
  • 可定制的UI样式
  • 实时声音波形显示
  • 设备管理
  • 一对一通话期间切换视图
  • 可扩展的菜单栏
  • 参与者列表
  • 自定义通话铃声

文档

示例代码

以下是一个简单的示例代码，展示了如何使用zego_uikit_prebuilt_call进行一对一视频通话：

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

/// 请参阅以下链接以查看更多详细信息：
/// https://github.com/ZEGOCLOUD/zego_uikit_prebuilt_call_example_flutter

/// 这是一个普通的通话演示。
/// 关于通话邀请或离线通话，请参阅GitHub演示
Widget normalCallPage() {
  return ZegoUIKitPrebuiltCall(
    appID: -1, // 您的应用AppID,
    appSign: 'your AppSign', // 您的应用签名
    userID: 'local user id', // 本地用户ID
    userName: 'local user name', // 本地用户名
    callID: 'call id', // 通话ID
    config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall(), // 配置为一对一视频通话
  );
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Flutter Call Demo')),
      body: Center(child: ElevatedButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => normalCallPage()),
          );
        },
        child: Text('Start Call'),
      )),
    ),
  ));
}

更多功能演示

更多功能演示和完整示例代码可以在ZEGOCLOUD GitHub仓库中找到。

迁移指南

更多资源

预览

  • 一对一通话 1v1_call

  • 群组通话 group_call

  • 激活在线邀请 actived_online_invitation

  • 背景在线邀请 background_online_invitation

  • 通话中邀请 calling_invitation

  • Android离线邀请 android_offline_invitation

  • iOS离线邀请 ios_offline_invitation

  • Android漏接电话

    • 群组通话 group_missed_call
    • 一对一 oneonone_missed_call

  • 缩小窗口(Overlay) overlay

  • PIP pip

希望这些信息能帮助您更好地理解和使用zego_uikit_prebuilt_call插件。如果您有任何问题或需要进一步的帮助，请随时联系我们的技术支持团队。


更多关于Flutter音视频通话UI插件zego_uikit_prebuilt_call的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter音视频通话UI插件zego_uikit_prebuilt_call的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用zego_uikit_prebuilt_call插件来进行音视频通话UI展示的代码示例。这个插件是ZEGO提供的一个预构建的UI组件，可以简化音视频通话界面的开发。

前提条件

  1. 确保你已经有一个Flutter开发环境。
  2. 确保你已经注册并获取了ZEGO的App ID和App Key。
  3. 确保你已经将zego_express_engine和zego_uikit_prebuilt_call添加到你的pubspec.yaml文件中。

添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  zego_express_engine: ^版本号  # 替换为最新版本号
  zego_uikit_prebuilt_call: ^版本号  # 替换为最新版本号

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

初始化ZEGO SDK

在你的Flutter应用的入口文件（通常是main.dart）中，进行ZEGO SDK的初始化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化ZegoExpressEngine
    ZegoExpressEngine.init(
      appId: '你的AppID',  // 替换为你的AppID
      appKey: '你的AppKey',  // 替换为你的AppKey
    );

    // 配置ZegoUIKit
    ZegoUIKitPrebuiltCallConfig zegoUIKitConfig = ZegoUIKitPrebuiltCallConfig(
      // 根据需要配置其他参数
    );
    ZegoUIKitPrebuiltCall.setConfig(zegoUIKitConfig);

    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

使用ZegoUIKitPrebuiltCall

在你的主页（MyHomePage）中，使用ZegoUIKitPrebuiltCallWidget来展示音视频通话UI：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ZegoUIKitPrebuiltCallController? _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _controller = ZegoUIKitPrebuiltCallController();

    // 监听事件，比如开始通话、结束通话等
    _controller?.addListener(() {
      if (_controller?.callStatus == ZegoCallStatus.connected) {
        // 通话已连接
      } else if (_controller?.callStatus == ZegoCallStatus.disconnected) {
        // 通话已断开
      }
    });

    // 初始化SDK并登录
    ZegoExpressEngine.instance.startEngine().then((_) {
      ZegoExpressEngine.instance.login('用户ID').then((_) {
        // 登录成功后，可以开始发起或接听通话
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('音视频通话'),
      ),
      body: Center(
        child: _controller != null
            ? ZegoUIKitPrebuiltCallWidget(
                controller: _controller!,
                // 根据需要配置其他参数
              )
            : Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 发起通话的逻辑，例如：
          // _startCall('对方用户ID');
        },
        tooltip: '发起通话',
        child: Icon(Icons.phone),
      ),
    );
  }

  void _startCall(String userId) {
    // 发起通话
    ZegoExpressEngine.instance.startCall(
      userId: userId,
      isVideoEnabled: true,  // 是否开启视频
      isAudioEnabled: true,  // 是否开启音频
      roomName: '房间名',  // 可选，房间名
      extra: '额外信息',  // 可选，额外信息
    );
  }

  @override
  void dispose() {
    // 释放资源
    _controller?.dispose();
    ZegoExpressEngine.instance.stopEngine();
    super.dispose();
  }
}

注意事项

  1. 权限处理：确保在AndroidManifest.xml和Info.plist中添加了音视频通话所需的权限。
  2. 错误处理：在实际项目中，需要添加更多的错误处理和状态管理。
  3. UI定制：如果需要自定义UI，可以参考ZEGO官方文档进行进一步的定制。

上述代码展示了如何在Flutter项目中集成并使用zego_uikit_prebuilt_call插件进行音视频通话UI的展示。希望这对你有所帮助！

回到顶部