使用声网Agora Flutter UIKit 为实时视频通话应用添加自定义背景

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

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

  • 使用图像作为背景

  • 使用纯色作为背景

  • 在现有背景上使用模糊效果

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

前期准备和要求

  • 一个声网Agora 开发者账户——点击这里注册

  • 了解如何使用声网Agora 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" />

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

视频通话的用户界面

我们不需要在构建用户界面方面做太多的工作,因为所有这些都已经由 Agora 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 类型的变量,用于使用 Agora 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 属性来开发一个按钮,用来启用或关闭虚拟背景效果。在这里选择应用哪种效果:

虚拟背景会自动检测视频通话中的任何主体,不会与任何主体重叠。这在 Agora 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);
}

开启虚拟背景

最后,我们需要使用 Agora 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");
}

关闭虚拟背景

使用 Agora 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/

推荐阅读
相关专栏
SDK 教程
127 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。