Flutter音视频UI组件插件wend_agora_uikits的使用

Agora VideoUIKit for Flutter

简介:
立即在您的Flutter应用中集成Agora视频通话或视频流功能。

开始使用

Agora Flutter VideoUIKit布局示例

路线图

• ❌ 添加用户名
• ✅ 更多事件回调
• ✅ 添加RTM SDK
• ❌ 屏幕共享
• ❌ 语音通话布局
• ❌ 可重新排序的列表视图（浮动布局）
• ❌ 云录制
• ❌ 将观众提升为广播员角色。
• ✅ 远程成员静音/取消静音
• ✅ Flutter Web支持作为预发布版本
• ❌ Flutter桌面支持作为预发布版本

使用要求

• Agora开发者账户: 如何开始使用Agora
• Android或iOS设备
• Flutter项目

安装

在您的Flutter项目中，将agora_uikit作为依赖项添加到pubspec.yaml文件中。

在Android项目的build.gradle文件中，添加以下内容到repositories部分末尾：

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

设备权限

Android

打开AndroidManifest.xml文件并添加所需的设备权限：

<manifest>
...
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Agora SDK需要蓝牙权限以支持蓝牙设备 -->
<uses-permission android:name="android.permission.BLUETOOTH" />
...
</manifest>

iOS

打开Info.plist文件并添加以下内容：

• 隐私 - 麦克风使用描述
• 隐私 - 摄像头使用描述

如果需要在后台运行语音通话，请启用后台模式。在Xcode中选择应用程序目标，点击“Capabilities”选项卡，启用“Background Modes”，并勾选“Audio, AirPlay, and Picture in Picture”。

使用方法

以下是完整的代码示例，展示如何使用wend_agora_uikits插件进行视频通话：

import 'package:wend_agora_uikits/agora_uikit.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  // 初始化Agora客户端
  final AgoraClient client = AgoraClient(
    agoraConnectionData: AgoraConnectionData(
      appId: "<--Add your App Id here-->", // 替换为您的Agora App ID
      channelName: "test",
      username: "user", // 用户名（可选）
    ),
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    initAgora(); // 初始化Agora引擎
  }

  void initAgora() async {
    await client.initialize(); // 初始化Agora客户端
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Agora VideoUIKit'), // 设置应用标题
          centerTitle: true,
        ),
        body: SafeArea(
          child: Stack(
            children: [
              // 视频查看器
              AgoraVideoViewer(
                client: client, // 绑定Agora客户端
                layoutType: Layout.floating, // 设置布局类型为浮动
                enableHostControls: true, // 启用主持人控件
              ),
              // 视频按钮
              AgoraVideoButtons(
                client: client, // 绑定Agora客户端
              ),
            ],
          ),
        ),
      ),
    );
  }
}