使用声网 SDK 和 Flutter UIKit 创建视频推流应用非常简单，同时声网还有许多其他功能，可以提高视频通话的质量和便利性。例如，我们可以在视频通话过程中使用虚拟背景，为视频通话增添趣味性。

我们可以通过以下三种方式自定义视频通话的背景：

使用图像作为背景
使用纯色作为背景
在现有背景上使用模糊效果

本教程教大家使用声网 Flutter SDK 和 Flutter UIKit 在 Flutter 中添加虚拟背景。

前期准备和要求

有声网开发者帐户（详细步骤可参考这篇文章）。

了解如何使用声网 Flutter UIKit 创建直播推流 Flutter 应用（点击这里查看教程）
了解 Flutter 开发的基础知识
一个支持 Flutter 开发的编辑器，例如 Android Studio 或 VS Code
一个安卓或 iOS 设备

设置

第一步：如果你不打算把它集成到现有的项目中，可以用你的编辑器创建一个新的 Flutter 应用程序。

第二步：打开 pubspec.yaml 文件，添加下列依赖：

image_picker: ^0.8.4+9
  agora_uikit:
    git:
      url: https://github.com/AgoraIO-Community/Flutter-UIKit

第三步：确保安卓目录下的项目级 build.gradle 有以下内容：

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' }
    }
}

第四步：我们需要在 android/app/src/main 目录下的 AndroidManifest.xml 文件中添加以下权限，以获得必要的用户权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.BLUETOOTH" />

以上就是所有设置，现在，我们来研究代码！

视频通话的用户界面

我们不需要在构建用户界面方面做太多的工作，因为所有这些都已经由 Flutter UIKit 完成了。

// Instantiate the client
final AgoraClient client = AgoraClient(
  agoraConnectionData: AgoraConnectionData(
    appId: "<--Add Your App Id Here-->",
    channelName: "test",
  ),
);

// Initialize the Agora Engine
@override
void initState() {
  super.initState();
  initAgora();
}

void initAgora() async {
  await client.initialize();
}

// Build your layout
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            AgoraVideoViewer(client: client), 
            AgoraVideoButtons(client: client),
          ],
        ),
      ),
    ),
  );
}

使用虚拟背景

我们主要使用 main.dart 来启动视频通话应用程序。

导入必要的依赖

import 'package:agora_uikit/agora_uikit.dart';
import 'package:custom_background_flutter/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:agora_rtc_engine/rtc_engine.dart';
import 'package:image_picker/image_picker.dart';

声明一些变量

整个过程我们需要以下四个变量：

_client ：这是一个 AgoraClient 类型的变量，用于调用 Flutter UIKIT，没有它就不可能进行视频调用。
_engine ：这是一个 RTCEngine 类型的变量，用于使用Flutter SDK 的所有方法。
_picker ：这个 ImagePicker 类型的变量用于从手机的图库或相机中获取图片。
_virtualBackgroundToggle ：我们用这个布尔型变量开启或关闭虚拟背景效果。

我们可以在有状态/无状态微件中添加这些内容，并把微件传递给材料类的主页属性，方式如下：

late AgoraClient _client;
late RtcEngine _engine;
final ImagePicker _picker = ImagePicker();
late bool _virtualBackgroundToggle;

初始化 Flutter UIKIT

在调用构建方法之前，我们需要在 initState() 中初始化 Flutter UIKIT：

void initAgora() async {
  _client = AgoraClient(
    agoraConnectionData: AgoraConnectionData(
      appId: '<- enter your app ID here ->',
      channelName: '<- enter your channel name ->',
    ),
    enabledPermission: [
      Permission.camera,
      Permission.microphone,
    ],
  );
  await _client.initialize();
  _engine = _client.sessionController.value.engine!;
  _virtualBackgroundToggle = false;
}

虚拟背景效果按钮

我们将使用 AgoraVideoButtons 类中的 extraButtons 属性来开发一个按钮，用来启用或关闭虚拟背景效果。在这里选择应用哪种效果：

虚拟背景会自动检测视频通话中的任何主体，不会与任何主体重叠。这在 Flutter SDK中有三种不同的方式：

虚拟背景图像—— 我们可以使用任何可用的软件包从手机的相册或相机中获取图像，将其作为背景添加到我们的视频通话中。
虚拟背景色—— 我们可以添加任何十六进制颜色作为背景。
虚拟背景模糊—— 我们可以为现有背景添加一个额外的模糊效果，并且可以选择模糊等级：低-中-高。

Widget get galleryButton => CircleAvatar(
  backgroundColor: Colors.white,
  child: IconButton(
    onPressed: () async {
    if (_virtualBackgroundToggle) {
      _disableVirtualBackground();
      } else {
        /* For VIRTUAL BACKGROUND IMG
        _virtualBackgroundIMG(); */

        /* For VIRTUAL BACKGROUND COLOR
        _virtualBackgroundCOLOR(Colors.pink); */

        /* For VIRTUAL BACKGROUND BLUR 
        _virtualBackgroundBLUR(VirtualBackgroundBlurDegree.Medium); */
      }
    },
    icon: const Icon(CupertinoIcons.photo),
    color: Colors.blueAccent,
    enableFeedback: true,
  ),
);

关键是要记住，每次只启用上述虚拟背景中的一个。我使用了虚拟背景图片作为例子。我们可以开启其他两个中的任何一个，同时注释掉其他的。

应用虚拟背景图像

我们采用以下步骤来应用虚拟背景图像：

通过合适的意图，使用第三方包从相册/相机中获取图像
当活动返回一个结果时，启用虚拟背景图像
选择的图像必须符合此规范

Future<XFile?> _getImage() async {
  final image = await _picker.pickImage(source: ImageSource.gallery);
  return image;
}

Future<void> _virtualBackgroundIMG() async {
  await _getImage().then((XFile? value) {
  if (value == null) {
    debugPrint("FILE NOT FOUND");
  } else {
    final backgroundSource = VirtualBackgroundSource();
    backgroundSource.backgroundSourceType = VirtualBackgroundSourceType.Img;
    backgroundSource.source = value.path;
    _enableVirtualBackground(backgroundSource);
  }
 });
}

应用虚拟背景色

我们可以使用任何符合此规范的十六进制颜色作为虚拟背景。

void _virtualBackgroundCOLOR(Color? color) {
  final backgroundSource = VirtualBackgroundSource();
  backgroundSource.backgroundSourceType = VirtualBackgroundSourceType.Color;
  backgroundSource.color = color;
  _enableVirtualBackground(backgroundSource);
}

应用虚拟背景模糊

我们可以应用三种模糊级别：低、中、高

void _virtualBackgroundBLUR(VirtualBackgroundBlurDegree blurDegree) {
  final backgroundSource = VirtualBackgroundSource();
  backgroundSource.backgroundSourceType = VirtualBackgroundSourceType.Blur;
  backgroundSource.blurDegree = blurDegree;
  _enableVirtualBackground(backgroundSource);
}

开启虚拟背景

最后，我们需要使用 Flutter UIKIT 和 Flutter SDK 来启用虚拟背景。这里，我们将执行 enableVirtualBackground() 方法，你可能已经在上面找到了。

void _enableVirtualBackground(VirtualBackgroundSource backgroundSource) {
  _engine.enableVirtualBackground(true, backgroundSource);
  _engine.setEventHandler(RtcEngineEventHandler(
  virtualBackgroundSourceEnabled: ((enabled, reason) {
    debugPrint(
      "Virtual Background - ${backgroundSource.backgroundSourceType}");
      debugPrint(enabled.toString());
      debugPrint(reason.toString());
      _virtualBackgroundToggle = !_virtualBackgroundToggle;
    }),
  ));
 _showSnackBar("Enabled Virtual Background");
}

关闭虚拟背景

使用 Flutter UIKIT 和 Flutter SDK，只需用一行代码就能快速关闭虚拟背景!

void _disableVirtualBackground() {
  _engine.enableVirtualBackground(false, VirtualBackgroundSource());
  _showSnackBar("Disabled Virtual Background");
}

总结

我们现在有了一个可以设置虚拟背景的视频通话应用程序！这个应用可以在安卓应用程序中运行。

还有一大堆很好添加的其他功能，欢迎点击这里查看。

测试

大家可以通过GitHub link试用这个应用程序。克隆资源库之后，只需在安卓设备上运行该应用，即可测试该应用。

其他资源

要了解更多关于声网Agora Android SDK 和其他用例的信息，请点击这里查看开发者指南。

也可以点击这里查看上面上述函数的完整文档及其他函数。

原文作者：Rishav Naskar
原文链接：https://www.agora.io/en/blog/add-custom-backgrounds-to-your-live-video-calling-application-using-the-agora-flutter-uikit/