使用声网 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 有以下内容:

  1. allprojects {
  2. repositories {
  3. google()
  4. mavenCentral()
  5. gradlePluginPortal()
  6. maven { url 'https://www.jitpack.io' }
  7. flatDir {
  8. dirs 'libs'
  9. }
  10. }
  11. }

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

1.如果存在插件 maven,将其删除,因为它已被废弃。

2.移除版本代码和版本名称(如果有)。

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

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

第六步:在 AndroidManifest.xml 文件中添加以下权限,以获得必要的用户权限:

  1. <uses-permission android:name="android.permission.INTERNET" />
  2. <uses-permission android:name="android.permission.CAMERA" />
  3. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  4. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  5. <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  6. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  7. <uses-permission android:name="android.permission.BLUETOOTH" />

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

03 视频通话用户界面

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

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

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

  7. val frameLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(
  8. FrameLayout.LayoutParams.MATCH_PARENT,
  9. FrameLayout.LayoutParams.MATCH_PARENT,
  10. )

  11. this.addContentView(agView, frameLayout)

  12. if (AgoraVideoViewer.requestPermissions(this)) {
  13. joinCall()
  14. } else {
  15. val joinButton = Button(this)
  16. val joinString = "Allow Camera and Microphone, then click here"
  17. joinButton.text = joinString
  18. joinButton.setOnClickListener {
  19. if (AgoraVideoViewer.requestPermissions(this)) {
  20. (joinButton.parent as ViewGroup).removeView(joinButton)
  21. joinCall()
  22. }
  23. }
  24. joinButton.setBackgroundColor(Color.GREEN)
  25. joinButton.setTextColor(Color.RED)
  26. this.addContentView(
  27. joinButton,
  28. FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 300)
  29. )
  30. }
  31. } catch (e: Exception) {
  32. Log.i(tag, "---- ERROR ----")
  33. e.message?.let { Log.i(tag, it) }
  34. }
  35. }
  36. }

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

04 使用虚拟背景

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

导入必要的依赖

  1. import io.agora.agorauikit_android.AgoraButton
  2. import io.agora.agorauikit_android.AgoraConnectionData
  3. import io.agora.agorauikit_android.AgoraVideoViewer
  4. import io.agora.agorauikit_android.requestPermissions
  5. import io.agora.rtc.Constants
  6. import io.agora.rtc.IRtcEngineEventHandler
  7. import io.agora.rtc.video.VirtualBackgroundSource
  8. import com.github.dhaval2404.imagepicker.ImagePicker

声明一些变量

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

agView : 这是 AgoraVideoViewer 类型的变量,用于调用 Android UIKIT,没有它无法进行视频调用。

tag: 我们用这个字符串记录相关数据。我们可以选择忽略这一点,只需在记录数据时进行相应的修改就可以。

virtualBackgroundToggle: 我们用这个布尔型变量开启或关闭虚拟背景效果,它在整个过程中非常重要。

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

  1. private var agView: AgoraVideoViewer? = null
  2. private val tag = "VirtualBackground"
  3. private var virtualBackgroundToggle = false

用虚拟背景加入视频通话

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

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

虚拟背景图像 —— 我们可以使用任何可用的软件包从手机的相册或相机中获取图像,将其作为背景添加到我们的视频通话中。

虚拟背景色 —— 我们可以添加任何十六进制颜色作为背景。

虚拟背景模糊 —— 我们可以为现有背景添加一个额外的模糊效果,并且可以选择模糊等级:低-中-高。

  1. private fun joinCall() {
  2. val backgroundButton = addBackgroundButton()
  3. this.agView?.join(channel = "test", role = Constants.CLIENT_ROLE_BROADCASTER)

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

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

  10. /* For virtual background BLUR
  11. virtualBackgroundBLUR(VirtualBackgroundSource.BLUR_DEGREE_MEDIUM) */
  12. } else {
  13. disableCustomBackground()
  14. }
  15. }

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

切换虚拟背景

我们使用 AgoraButton 来开启/关闭 Android UIKIT 中的虚拟背景效果。

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

应用虚拟背景图像

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

● 采用合适的 intent ,使用第三方包从相册/相机中获取图像

● 当活动返回一个结果时,启用虚拟背景图像

● 选择的图像必须符合这些规范

  1. private fun pickImageFromGallery() {
  2. ImagePicker.with(this).crop().compress(1024).maxResultSize(1080, 1080).createIntent {
  3. pickImageFromGalleryResult.launch(it)
  4. }
  5. }

  6. private val pickImageFromGalleryResult = registerForActivityResult(StartActivityForResult()) {
  7. if (it.resultCode == Activity.RESULT_OK) {
  8. val data: Intent = it.data!!
  9. virtualBackgroundIMG(data.data!!.path)
  10. return@registerForActivityResult
  11. } else {
  12. Log.e(tag, "--- ERROR AFTER IMAGE ---")
  13. }
  14. }

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

应用虚拟背景色

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

  1. private fun virtualBackgroundCOLOR(color: Int) {
  2. val backgroundSource = VirtualBackgroundSource()
  3. backgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_COLOR
  4. backgroundSource.color = color
  5. enableVirtualBackground(backgroundSource)
  6. }

应用虚拟背景模糊

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

  1. private fun virtualBackgroundBLUR(blurDegree: Int) {
  2. if (blurDegree > 3 || blurDegree < 0) {
  3. Log.i(tag, "Invalid Blur Degree")
  4. return
  5. }
  6. val backgroundSource = VirtualBackgroundSource()
  7. backgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_BLUR
  8. backgroundSource.blur_degree = blurDegree
  9. enableVirtualBackground(backgroundSource)
  10. }

开启虚拟背景

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

  1. private fun enableVirtualBackground(backgroundSource: VirtualBackgroundSource) {
  2. this.agView?.agkit?.enableVirtualBackground(true, backgroundSource)

  3. this.agView?.agkit?.addHandler(object : IRtcEngineEventHandler() {
  4. override fun onVirtualBackgroundSourceEnabled(enabled: Boolean, reason: Int) {
  5. super.onVirtualBackgroundSourceEnabled(enabled, reason)
  6. virtualBackgroundToggle = !virtualBackgroundToggle
  7. Log.i(tag, "Virtual Background - ${backgroundSource.backgroundSourceType}")
  8. println(enabled)
  9. println(reason)
  10. Toast.makeText(this@MainActivity, "Virtual Background Enabled", Toast.LENGTH_SHORT).show()
  11. }
  12. })
  13. }

关闭虚拟背景

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

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

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

用声网 Android UIKit 为实时视频通话应用添加自定义背景丨声网 SDK 教程的更多相关文章

  1. 转 Android RadioButton设置选中时文字和背景颜色同时改变

    主要应用在购物车,像淘宝的那样,点击以后弹出一个选择种类颜色这样的popuwindow以后,然后这个选择种类的地方要用到类似这个玩意儿. 搜了一下,效果和这个文章一致.转了. 原文地址:http:// ...

  2. Android studio3.0打开Device File Explore(文件管理器)的方法(图文教程)

    Android studio3.0打开Device File Explore(文件管理器)的方法(图文教程) 看到网上AS3.0新增加的查看手机文件的新功能,全部都是转载的,没有几个人心细的把如何打开 ...

  3. Android中ViewPager实现滑动条及与Fragment结合的实例教程

    ViewPager类主要被用来实现可滑动的视图功能,这里我们就来共同学习Android中ViewPager实现滑动条及与Fragment结合的实例教程,需要的朋友可以参考下 自主实现滑动指示条先上一个 ...

  4. Android RadioButton设置选中时文字和背景颜色同时改变

    主要应用在购物车,像淘宝的那样,点击以后弹出一个选择种类颜色这样的popuwindow以后,然后这个选择种类的地方要用到类似这个玩意儿. 搜了一下,效果和这个文章一致.转了. 原文地址:http:// ...

  5. Android中获取实时网速(2)

    一.实现思路: 1.Android提供有获取当前总流量的方法 2.上一秒 减去 下一面的流量差便是网速 3.注意计算 二.计算网速的工具类: package imcs.cb.com.viewappli ...

  6. android 移动网络实时抓包

    2G.3G环境,那就必须root进去tcpdump 方式抓. 准备: 一.root CF-auto-root: http://autoroot.chainfire.eu/ 需要清理全部数据,注意备份 ...

  7. Android下海康实时视频解码

    折腾了一个多月,终于调出来了.....首先吐槽一下海康SDK,同时也感谢之... 手头有个项目,需要实时抓取海康摄像头,我是在Android下实现的,海康官网上没有Android SDK,这里友情提醒 ...

  8. 用ADB(Android Debug Bridge)实时监测Android程序的运行

      监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...

  9. Android开发人员官方站点文档 - 国内踏得网镜像

    Android Developer 安卓开发人员官方站点无法正常訪问.即使FQ因为网络原因依旧訪问缓慢. 故整理相关字体.脚本.样式.页面资源,在踏得网server上建立了本地镜像.初始镜像时间201 ...

  10. Java实现Android,iOS设备实时监控

    Java实现Android设备实时监控 设计思路: 第一,启动一个实时截图线程,负责实时截取Android设备屏幕,保存到本地路径. 第二,在JSP页面,定义一个img对象,实时更换img对象的src ...

随机推荐

  1. 【shell脚本实战】脚本#35 分析每个用户使用的磁盘空间大小

    #!/bin/bash #设置 一个变量代表临界值,看看是否能超过这个值,单位是MB MAXDISKUSAGE=20000 #cut -d: -f1,3 /etc/passwd | awk -F: ' ...

  2. 关于Easyui和JQuery版本兼容IE8问题记录

    1.最后支持IE8及以下版本的是JQuery1.9 2.最后支持IE8及以下的Easyui是1.3.2,其对应的是JQuery1.8 因为低版本的Easyui,缺少某些方便好用的属性方法和样式不好看, ...

  3. 什么是spring框架

    一bai.概念:1. spring是开源的轻量级框架2 spring核心主要两部分:(1)aop:面向切面编程,扩展功能不是修改源代码实现(2)ioc:控制反转,- 比如有一个类,在类里面有方法(不是 ...

  4. 不用画的动画——ShaderCp11

    --20.9.14 Shader中主要有及两种动画,一种就是纹理动画还有一种就是顶点动画. 动画效果一般都需要把时间加入一些变量的计算,以便画面可以随时间发生变化.下面是Shader中的如何去访问时间 ...

  5. Spark RDD编程

    1. 准备文本文件从文件创建RDD lines=sc.textFile()筛选出含某个单词的行 lines.filter()lambda 参数:条件表达式 2. 生成单词的列表从列表创建RDD wor ...

  6. 用python遍历一个图片文件夹,并输出所有路径到一个 txt 文件

    1 #coding:utf8 2 import os 3 import sys 4 def listfiles(rootDir, txtfile, label=0): 5 ftxtfile = ope ...

  7. DHCP 服务详解

    本文转发于华为IP知识百科,链接地址 DHCP 目录 一.什么是DHCP? 二.为什么要使用DHCP? 三.DHCP是怎么工作的 四.DHCP使用场景 一.什么是DHCP? 动态主机配置协议DHCP( ...

  8. Flutter在iOS中一些点

    1. ios对Flutter有如下依赖 Flutter.framework:     Flutter engine等: APP.framework:业务代码, 由dart代码生成.App.framew ...

  9. 系统U盘安装Windows无法打开install.wim的问题

    我们在使用UltraISO工具制作Windows操作系统安装U盘,使用U盘启动,在安装Windows操作系统的过程中,出现类似"Windows无法打开所需的文件X:\sources\inst ...

  10. IDEA移除Maven依赖的方法

    参考地址:https://blog.csdn.net/weixin_45654405/article/details/124415010 方法一: 如果不行,则进行下一步: 尝试在project St ...