使用声网 SDK 和 UIKit 创建视频推流应用非常简单，而且声网还有许多功能，可以提高视频通话的质量和便利性。例如，我们可以在视频通话过程中使用虚拟背景，为视频通话增添趣味性。
我们可以通过以下三种方式自定义视频通话的背景：
● 使用图像作为背景
● 使用纯色背景
● 在现有背景上应用模糊效果
本教程教大家使用声网 Android SDK 和 Android UIKit 在 Android 中添加虚拟背景。
原文作者：Rishav Naskar
原文链接：
https://www.agora.io/en/blog/add-custom-backgrounds-to-your-live-video-calling-application-using-the-agora-android-uikit/
01 前期准备
● 一个声网开发者账户
● 了解如何使用声网 Android UIKit 创建直播推流 Android 应用（可在官方 GitHub 搜索查看）
● 了解 Android 开发的基础知识
● Android Studio
● 一个 Android 设备
02 设置
第一步：如果你不打算把它集成到现有的项目中，可以在 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" />
复制代码
大功告成啦！以上就是所有设置，接下来是写代码。
03 视频通话用户界面
我们不需要在构建用户界面方面做太多的工作，因为所有这些都已经由声网 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 进行基础的视频通话
04 使用虚拟背景
我们使用 MainActivity.kt 作为主要活动，用于启动视频通话应用程序。
导入必要的依赖
import io.agora.agorauikit_android.AgoraButtonimport io.agora.agorauikit_android.AgoraConnectionDataimport io.agora.agorauikit_android.AgoraVideoViewerimport io.agora.agorauikit_android.requestPermissionsimport io.agora.rtc.Constantsimport io.agora.rtc.IRtcEngineEventHandlerimport io.agora.rtc.video.VirtualBackgroundSourceimport com.github.dhaval2404.imagepicker.ImagePicker
复制代码
声明一些变量
整个过程我们需要以下三个变量：
● agView : 这是 AgoraVideoViewer 类型的变量，用于调用 Android UIKIT，没有它无法进行视频调用。
● tag: 我们用这个字符串记录相关数据。我们可以选择忽略这一点，只需在记录数据时进行相应的修改就可以。
● virtualBackgroundToggle: 我们用这个布尔型变量开启或关闭虚拟背景效果，它在整个过程中非常重要。
我们可以在 Mainactivity.kt 中以如下方式添加这些内容：
private var agView: AgoraVideoViewer? = nullprivate 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() } }
复制代码
关键是要记住，每次只启用上述一种虚拟背景。我使用了虚拟背景图片作为例子。我们可以开启其他两个中的任何一个，同时注释掉其他的。
切换虚拟背景
我们使用 AgoraButton 来开启/关闭 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)}
复制代码
开启虚拟背景
最后，我们需要使用声网 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()}
复制代码
05 总结
我们现在有了一个可以设置虚拟背景的视频通话应用程序！这个应用可以在安卓应用程序中运行。
还有一大堆很好添加的其他功能，可以进入对应文档查看。
06 测试
大家可以通过 GitHub link 试用这个应用程序。克隆资源库之后，只需在安卓设备上运行该应用，即可测试该应用。
07 其他资源
要了解更多关于声网 Android SDK 和其他用例的信息，请查看下方开发者指南。也可以查看上面上述函数的完整文档及其他函数。
1）账号注册地址
https://sso2.agora.io/cn/v4/signup/with-email
2）官方 GitHub 地址
https://github.com/AgoraIO-Community
3）更多功能汇总
https://docs.agora.io/cn/Video/API%20Reference/java/index.html
4）开发者指南
https://docs.agora.io/cn
5）上述函数的完整文档及其他函数
https://docs.agora.io/cn/Video/API%20Reference/flutter/index.html
评论