关于sdk:用声网-Android-UIKit-为实时视频通话应用添加自定义背景丨声网-SDK-教程

8次阅读

共计 7050 个字符,预计需要花费 18 分钟才能阅读完成。

应用声网 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)
    [email protected]
  } 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([email protected], "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

正文完
 0