用声网androiduikit为实时视频通话应用添加自定义背景丨声网sdk教程(代码片段)

声网 声网     2022-12-09     619

关键词:

使用声网 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.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()
    
  

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

切换虚拟背景

我们使用 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

unity实战篇|接入声网sdk实现视频通话——自己动手做一个视频通话(代码片段)

目录🐱‍🏍前言🎂Unity接入声网SDK实现音视频通话第1️⃣步,创建声网应用第2️⃣步,获取相应的SDK第3️⃣步,将SDK接入Unity中第4️⃣步:搭建一个测试场景,编写测试代码第5️⃣步:视频... 查看详情

声网2020实时大会后的弱网对抗实践

voip基于IP的音视频传输是一种实时视频通话技术,经由Internet协议来达成音视频通话,以及多媒体会议。VoIP可用于包括VoIP电话、智能手机、个人计算机在内的诸多互联网接入设备,通过蜂窝网络、Wi-Fi、同轴电缆、光... 查看详情

如何基于reactnative快速实现一个视频通话应用(代码片段)

...xff0c;将实时互动功能添加到Flutter应用中?你可以通过声网AgoraSDK 查看详情

unity实战篇|接入声网sdk实现视频通话——自己动手做一个视频通话

目录 查看详情

rtc月度小报5月|教育apaas灵动课堂升级抢先体验vue版agorawebsdk声网agora与htc达成合作

本月亮点速览产品与技术:声网Agora教育aPaaS灵动课堂升级视频通话/语音通话/互动直播NativeSDK升级上线3.4.2版本视频通话/语音通话/互动直播WebSDK升级至4.5.0版本互动白板本月发布了四个版本,最新版本为2.12.29本地服务端... 查看详情

声网agora音频互动mos分方法:为音频互动体验进行实时打分

...没有一个很好的可用于评价实时互动场景的QoE评价方法。声网基于在全球大规模商用的客观实时数据和实践总结,正式推出自研的用于评价实时音频用户 查看详情

声网vqa:将实时互动中未知的视频画质用户主观体验变可知

...观体验变成可知。未知的部分往往是最需要攻克的,声网也一直在持续探索符合实时互动领域的视频画质评价方法,经过声网视频算法专家的持续钻研,正式推出了业内首个可运行于移动设备端的视频画质主观体验MOS... 查看详情

声网agora实时音视频服务正式上线htcvivesyncapp,支持非vr用户

全球实时互动云服务开创者和引领者声网Agora(纳斯达克股票代码:API)宣布其视频SDK现已集成到领先的VR/XR远程协作及会议应用HTCVIVESyncApp中。通过集成声网Agora的视频SDK,HTCVIVESyncApp可以支持HTCVIVE用户和非VR用户... 查看详情

声网3d在线互动场景空间音频的实时渲染——如何把“声临其境”推向极致

...用?LiveVideoStackCon2022音视频技术大会上海站邀请到了声网音频策划负责人冯建元,为我们分享3D在线互动场景空间音频的实时渲染。文 查看详情

实名报名超5000人!rte2022即将开幕,声网发布rte行业首本专业书《实时万象》

...27日,RTE2022实时互联网大会媒体日在北京举行,声网重磅发布了实时互动行业首本聚焦应用场景解析的专业书籍《实时万象》,深度剖析了实时互动产业20+赛道,近200个场景,并首次揭秘声网的音视频大数... 查看详情

声网把七年无全网事故的实时传输网络sd-rtn全面开放了——这就是fpa

8月19日,声网Agora举办线上产品发布会,正式发布了“全链路加速FPA(Full-PathAccelerator)”。全链路加速FPA基于声网的软件定义实时网络SD-RTN™,通过覆盖全球的多点端到端传输优化,全面提升了包含最后... 查看详情

音视频技术开发周刊|248

...,达到对含胶片颗粒视频进行质量评估的目的。基于声网WebSDK实现视频通话场景实时视频通话能够拉近人与人之间的距离,为用户提供沉浸式的交流体验,帮助你的app提高用户黏性。本文通过教程的形式讲讲怎么基于... 查看详情

声网agora发布教育信息化解决方案助力教育公平提效

...心举办。作为赋能教育信息化的实时互动PaaS服务商,声网Agora应邀参会。展会现场,声网展示了基于实时音视频互动能力打造的“三个课堂”线上教学场景解决方案、承载“三个课堂”应用的互动录播解决方案,以及... 查看详情

rte2022大会线上开幕,实时音视频已成为基础设施

...一场重要的行业技术大会是必须要关注的,那就是由声网主办的RTE2022第八届实时互联网大会。作为实时音视频技术第一股的声网,已经将这场音视频行业峰会连续举办了八年,来自行业里不同公司的技术嘉宾,对... 查看详情

声网首席科学家钟声:感知实时互联网

在「RTE2022实时互联网大会」中,声网CTO&首席科学家@钟声以《感知实时互联网》为题进行了主题演讲,分享了目前“感知技术”在实时互联网中的研究现状,以及应用前景。本文内容基于演讲内容进行整理,... 查看详情

ar+实时音视频通话,×××无缝结合(代码片段)

今年中旬Google在万众期待下推出了ARCore,能将现实与数码完美无缝地融合在一起,丰富我们的现实世界。通过它开发者可以更加快速方便地在Android平台开发AR应用,凭借AR技术大量产品能找到新颖的应用场景,甚至开辟出新的一... 查看详情

实践解析丨如何通过webassembly在web进行实时视频人像分割

5月15日,声网Agora高级架构师高纯参加了WebAssambly社区举办的第一场线下活动“WebAssemblyMeetup”,并围绕声网Agora在Web实时视频人像分割技术的应用落地,分享了实践经验。以下为演讲分享整理。RTC行业在近几年的发展... 查看详情

实时视频流、视频通话 Red5、RTMP 和 WebRTC、WSS?

】实时视频流、视频通话Red5、RTMP和WebRTC、WSS?【英文标题】:LiveVideoStreaming,VideoCallsRed5,RTMPandWebRTC,WSS?【发布时间】:2017-09-0302:21:06【问题描述】:我的VPS上安装了最新的red5。我也知道RTMP连接/链接用于与Red5服务器通信。RTMP连... 查看详情