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

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

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

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

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


前期准备

  • 了解如何使用声网 Android UIKit 创建直播推流 Android 应用(点击这里查看教程)
  • 了解 Android 开发的基础知识
  • Android Studio
  • 一个 Android 设备


设置

第一步:如果你不打算把它集成到现有的项目中,可以在 Android Studio 中创建一个新的 Android 应用程序。

第二步:前往 GitHub,克隆 UIKit GitHub 资源库,并在文件浏览器中打开此项目。

你会在这个克隆的 UIKit 项目中找到 agorauikit_android 目录,把这个目录复制并粘贴到你的应用程序中的父级的位置。这个目录包含了 Android UIKit,是扩展工作的关键。

第三步:确保你的项目级 build.gradle 有以下内容:

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

第四步:前往 UIKit 的项目级 build.gradle.kts,进行以下操作:

  1. 如果存在插件 maven,将其删除,因为它已被废弃。
  2. 移除版本代码和版本名称(如果有)。

第五步:我们将添加一个包来点击图片或从设备图库中获取图片。为此,我们需要在应用级 build.gradle 中导入 Android UIKit 和一个图片采集器包。

implementation 'com.github.dhaval2404:imagepicker:2.1'
implementation project(':agorauikit_android')

第六步:在 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" />

大功告成啦!以上就是所有设置,接下来是写代码。


视频通话用户界面

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        try {
            this.agView = AgoraVideoViewer(this, AgoraConnectionData(appId = "--YOUR-APP-ID--"))

            val frameLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT,
            )

            this.addContentView(agView, frameLayout)

            if (AgoraVideoViewer.requestPermissions(this)) {
                joinCall()
            } else {
                val joinButton = Button(this)
                val joinString = "Allow Camera and Microphone, then click here"
                joinButton.text = joinString
                joinButton.setOnClickListener {
                    if (AgoraVideoViewer.requestPermissions(this)) {
                        (joinButton.parent as ViewGroup).removeView(joinButton)
                        joinCall()
                    }
                }
                joinButton.setBackgroundColor(Color.GREEN)
                joinButton.setTextColor(Color.RED)
                this.addContentView(
                    joinButton,
                    FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 300)
                )
            }
        } catch (e: Exception) {
            Log.i(tag, "---- ERROR ----")
            e.message?.let { Log.i(tag, it) }
        }
    }
}

使用 Android UIKit 进行基础的视频通话


使用虚拟背景

我们使用 MainActivity.kt 作为主要活动,用于启动视频通话应用程序。


导入必要的依赖

import io.agora.agorauikit_android.AgoraButton
import io.agora.agorauikit_android.AgoraConnectionData
import io.agora.agorauikit_android.AgoraVideoViewer
import io.agora.agorauikit_android.requestPermissions
import io.agora.rtc.Constants
import io.agora.rtc.IRtcEngineEventHandler
import io.agora.rtc.video.VirtualBackgroundSource
import com.github.dhaval2404.imagepicker.ImagePicker

声明一些变量

整个过程我们需要以下三个变量:

  • agView : 这是 AgoraVideoViewer 类型的变量,用于调用 Android UIKIT,没有它无法进行视频调用。
  • tag: 我们用这个字符串记录相关数据。我们可以选择忽略这一点,只需在记录数据时进行相应的修改就可以。
  • virtualBackgroundToggle: 我们用这个布尔型变量开启或关闭虚拟背景效果,它在整个过程中非常重要。

我们可以在 Mainactivity.kt 中以如下方式添加这些内容:

private var agView: AgoraVideoViewer? = null
private val tag = "VirtualBackground"
private var virtualBackgroundToggle = false

用虚拟背景加入视频通话

我们用 joinCall() 方法来实现虚拟背景,可参照上面的视频通话用户界面。

虚拟背景会自动检测视频通话中的任何对象,不会与任何对象重叠。在 Android SDK 中,虚拟背景有以下 3 种方式:

  • 虚拟背景图像—— 我们可以使用任何可用的软件包从手机的相册或相机中获取图像,将其作为背景添加到我们的视频通话中。
  • 虚拟背景色—— 我们可以添加任何十六进制颜色作为背景。
  • 虚拟背景模糊—— 我们可以为现有背景添加一个额外的模糊效果,并且可以选择模糊等级:低-中-高。
private fun joinCall() {
  val backgroundButton = addBackgroundButton()
  this.agView?.join(channel = "test", role = Constants.CLIENT_ROLE_BROADCASTER)

  backgroundButton.setOnClickListener {
  if (!virtualBackgroundToggle) {
    /* For virtual background IMAGE */
    pickImageFromGallery()

    /* For virtual background COLOR
    val backgroundSource = virtualBackgroundCOLOR(0xFFB6C2) */

    /* For virtual background BLUR
    virtualBackgroundBLUR(VirtualBackgroundSource.BLUR_DEGREE_MEDIUM) */
    } else {
    disableCustomBackground()
    }
  }

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

切换虚拟背景

使用声网按钮来开启/关闭 Android UIKIT 中的虚拟背景效果。

private fun addBackgroundButton(): AgoraButton {
  val backgroundButton = AgoraButton(this)
  backgroundButton.setBackgroundResource(R.drawable.ic_baseline_image_24)
  this.agView?.agoraSettings?.extraButtons?.add(backgroundButton)
  return backgroundButton
}

应用虚拟背景图像

采用以下步骤来应用虚拟背景图像:

  • 采用合适的 intent ,使用第三方包从相册/相机中获取图像
  • 当活动返回一个结果时,启用虚拟背景图像
  • 选择的图像必须符合这些规范
private fun pickImageFromGallery() {
  ImagePicker.with(this).crop().compress(1024).maxResultSize(1080, 1080).createIntent {
  pickImageFromGalleryResult.launch(it)
  }
}

private val pickImageFromGalleryResult = registerForActivityResult(StartActivityForResult()) {
  if (it.resultCode == Activity.RESULT_OK) {
    val data: Intent = it.data!!
    virtualBackgroundIMG(data.data!!.path)
    return@registerForActivityResult
  } else {
  Log.e(tag, "--- ERROR AFTER IMAGE ---")
  }
}

private fun virtualBackgroundIMG(imgSrc: String? = null) {
  val backgroundSource = VirtualBackgroundSource()

应用虚拟背景色

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

private fun virtualBackgroundCOLOR(color: Int) {
  val backgroundSource = VirtualBackgroundSource()
  backgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_COLOR
  backgroundSource.color = color
  enableVirtualBackground(backgroundSource)
}

应用虚拟背景模糊

可以应用三种模糊级别:低、中、高。

private fun virtualBackgroundBLUR(blurDegree: Int) {
  if (blurDegree > 3 || blurDegree < 0) {
    Log.i(tag, "Invalid Blur Degree")
    return
  }
  val backgroundSource = VirtualBackgroundSource()
  backgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_BLUR
  backgroundSource.blur_degree = blurDegree
  enableVirtualBackground(backgroundSource)
}

开启虚拟背景

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

private fun enableVirtualBackground(backgroundSource: VirtualBackgroundSource) {
   this.agView?.agkit?.enableVirtualBackground(true, backgroundSource)
   
   this.agView?.agkit?.addHandler(object : IRtcEngineEventHandler() {
     override fun onVirtualBackgroundSourceEnabled(enabled: Boolean, reason: Int) {
       super.onVirtualBackgroundSourceEnabled(enabled, reason)
       virtualBackgroundToggle = !virtualBackgroundToggle
       Log.i(tag, "Virtual Background - ${backgroundSource.backgroundSourceType}")
       println(enabled)
       println(reason)
       Toast.makeText(this@MainActivity, "Virtual Background Enabled", Toast.LENGTH_SHORT).show()
     }
   })
}

关闭虚拟背景

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

private fun disableCustomBackground() {
  this.agView?.agkit?.enableVirtualBackground(false, VirtualBackgroundSource())
  Toast.makeText(this, "Virtual Background Disabled", Toast.LENGTH_SHORT).show()
}


总结

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

还有一大堆很好添加的其他功能,可以点击这里查看。


测试

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


其他资源

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

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


原文作者:Rishav Naskar
原文链接:Add Custom Backgrounds to your Live Video Calling application using the Agora Android UIKit
推荐阅读
相关专栏
SDK 教程
164 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。