Flutter视频通话UI插件easy_agora_uikit的使用

easy_agora_uikit 是一个用于在 Flutter 应用中快速集成 Agora 视频通话功能的 UI 插件。它简化了 Agora SDK 的集成过程，提供了预构建的 UI 组件，使得开发者可以快速实现视频通话功能。

安装

首先，你需要在 pubspec.yaml 文件中添加 easy_agora_uikit 依赖：

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

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

基本使用

1. 初始化 Agora

   在使用 easy_agora_uikit 之前，你需要初始化 Agora SDK。通常你需要在应用的 main.dart 文件中进行初始化。

   import 'package:easy_agora_uikit/easy_agora_uikit.dart';
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await EasyAgoraUikit.init(
       appId: 'YOUR_AGORA_APP_ID',
     );
     runApp(MyApp());
   }
   

2. 创建视频通话页面

   你可以使用 EasyAgoraUikit 提供的 AgoraVideoView 来显示视频通话的 UI。

   import 'package:flutter/material.dart';
   import 'package:easy_agora_uikit/easy_agora_uikit.dart';
   
   class VideoCallPage extends StatelessWidget {
     final String channelName;
     final String token;
   
     VideoCallPage({required this.channelName, required this.token});
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: AgoraVideoView(
           channelName: channelName,
           token: token,
           onCallEnd: () {
             // 通话结束后的操作
             Navigator.pop(context);
           },
         ),
       );
     }
   }
   

3. 导航到视频通话页面

   在需要启动视频通话的地方，你可以导航到 VideoCallPage。

   Navigator.push(
     context,
     MaterialPageRoute(
       builder: (context) => VideoCallPage(
         channelName: 'your_channel_name',
         token: 'your_token',
       ),
     ),
   );
   

配置选项

AgoraVideoView 提供了一些可配置的选项，例如：

• channelName: 视频通话的频道名称。
• token: Agora 的临时令牌。
• onCallEnd: 通话结束时的回调函数。
• role: 用户角色（主播或观众），默认为 ClientRole.Broadcaster。
• videoEnabled: 是否启用视频，默认为 true。
• audioEnabled: 是否启用音频，默认为 true。

处理通话事件

你可以通过 AgoraVideoView 提供的事件回调来处理通话中的各种事件，例如：

• onUserJoined: 当有用户加入频道时触发。
• onUserOffline: 当用户离开频道时触发。
• onError: 当发生错误时触发。

示例代码

以下是一个完整的示例代码：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyAgoraUikit.init(
    appId: 'YOUR_AGORA_APP_ID',
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Agora Video Call'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => VideoCallPage(
                  channelName: 'test_channel',
                  token: 'your_token',
                ),
              ),
            );
          },
          child: Text('Start Video Call'),
        ),
      ),
    );
  }
}

class VideoCallPage extends StatelessWidget {
  final String channelName;
  final String token;

  VideoCallPage({required this.channelName, required this.token});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: AgoraVideoView(
        channelName: channelName,
        token: token,
        onCallEnd: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}