用声网 Android UIKit 为实时视频通话应用添加自定义背景丨声网 SDK 教程
使用声网 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 = joinStringjoinButton.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.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 COLORval backgroundSource = virtualBackgroundCOLOR(0xFFB6C2) *//* For virtual background BLURvirtualBackgroundBLUR(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_COLORbackgroundSource.color = colorenableVirtualBackground(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_BLURbackgroundSource.blur_degree = blurDegreeenableVirtualBackground(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 = !virtualBackgroundToggleLog.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
用声网 Android UIKit 为实时视频通话应用添加自定义背景丨声网 SDK 教程相关推荐
- QOS FEC NACK 实时音视频传输库测试报告(声网、腾讯实时音视频测试)
目录 QOS-FEC-NACK传输库简介 实验环境 测试DEMO说明 测试项说明 测试结果 竞品分析 总结 QOS FE ...
- 基于 Web SDK 实现视频通话场景 | 声网 SDK 教程
声网视频 SDK 被广泛应用于多种实时互动场景中,例如视频会议.视频通话.音视频社交.在线教育等.为了让刚刚接触声网 SDK 的开发者,可以更顺畅地实现基础的视频通话功能,我们基于声网 Web SDK ...
- 声网 VQA:将实时互动中未知的视频画质用户主观体验变可知
在实时互动场景中,视频画质是影响观众体验的关键指标,但如何实时评价视频的画质一直是个行业难题,需要将未知的视频画质用户主观体验变成可知. 未知的部分往往是最需要攻克的,声网也一直在持续探索符合实时互动 ...
- 声网传输层协议 AUT 的总结与展望丨Dev for Dev 专栏
本文为「Dev for Dev 专栏」系列内容,作者为声网大后端传输协议负责人 夏天. 针对实时互动应用对网络传输带来的新需求和新挑战,声网通过将实时互动中的应用层业务需求与传输策略的分层和解耦,于 ...
- 基于android公交车线路查询论文文献,基于Android手机的实时公交查询系统设计与实现...
龙源期刊网 http://doc.xuehai.net 基于Android手机的实时公交查询系统设计与实现 作者:郭宏昌 来源:<物联网技术>2015年第11期 摘要:为了提高城市公交的智 ...
- Android WebRTC+SRS/ZLM视频通话(5):Android使用WebRTC从SRS/ZLMediaKit拉流
Android WebRTC+SRS/ZLM视频通话(5):Android使用WebRTC从SRS/ZLMediaKit拉流 来自奔三人员的焦虑日志 接着上一章内容,继续来记录Android是如何使用 ...
- android设计招式之美,麦可网Android设计招式之美
相关课程: 麦可网Android设计招式之美 麦可网Android高级应用开发 麦可网Android面向对象技术 本套课程目录: 1 – 设计模式与Android框架设计a 2 – 设计模式与Andr ...
- android camera 实时滤镜,【Camera】Android平台Camera实时滤镜实现方法
Android+JNI+OpenGL开发自己的美图秀秀 2016-01-18 16:39 阅读(5116) 评论(19) Android平台Camera实时滤镜实现方法探讨(十一)--实时美颜滤镜 2 ...
- 实时网速监测app_实时网速安卓下载_实时网速监测安卓app下载-XP软件园
详情介绍 实时网速安卓是一款简单实用的手机网速监测工具,自身的体积只有2m大小,对手机运行的网速数字显示最新网速,掌握目前手机网速情况,需要就来下载实时网速安卓吧. 实时网速安卓介绍 实时网速监测安卓 ...
最新文章
- COGS 2769. mk去撸串
- GNU make manual 翻译( 一百二十一)
- 打造U盘下的linux 亲测可以使用
- intellij idea run configurations配置共享
- java 定时删除_Java编写定时删除文件程序
- linux内核关闭触摸屏校准,linux内核usb触摸屏驱动bug调试- selected device is not a touchscreen I understand...
- ASP.NET MVC 拦截器(转)
- django 1.8 官方文档翻译: 3-3-1 文件上传
- oracle性能优化总结1
- Python 基础—— collections 模块
- wuyun知识库目录
- 一个手机用c网可以打开网站切换到g网就打不开_推荐一些设计师常用网站!!!...
- SAP-ABAP-查找后台表修改记录
- JAVA编译器eclipse的安装教程
- Vue 项目(网站应用)接入QQ互联qq登录接口 汇总
- 中国最酷、最美的女明星不是王菲,而是她!
- 邮件服务器(邮件系统)最新反垃圾技术分享
- 用DiskGenius彻底删除文件能不能确保无法恢复
- 计算机二级打字的速度有要求么,打字速度几个要求和技巧
- 基于POI的wod模板文件,导入参数,导出最终文件