聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景

更新時(shí)間：2022年10月18日 08:58:31 作者：聲網(wǎng)

這篇文章主要為大家介紹了聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

使用聲網(wǎng) SDK 和 UIKit 創(chuàng)建視頻推流應(yīng)用非常簡(jiǎn)單，而且聲網(wǎng)還有許多功能，可以提高視頻通話的質(zhì)量和便利性。例如，我們可以在視頻通話過(guò)程中使用虛擬背景，為視頻通話增添趣味性。

我們可以通過(guò)以下三種方式自定義視頻通話的背景：

● 使用圖像作為背景

● 使用純色背景

● 在現(xiàn)有背景上應(yīng)用模糊效果

本教程教大家使用聲網(wǎng) Android SDK 和 Android UIKit 在 Android 中添加虛擬背景。

原文作者：Rishav Naskar

原文鏈接：

www.agora.io/en/blog/add…

01 前期準(zhǔn)備

● 一個(gè)聲網(wǎng)開(kāi)發(fā)者賬戶

● 了解如何使用聲網(wǎng) Android UIKit 創(chuàng)建直播推流 Android 應(yīng)用（可在官方 GitHub 搜索查看）

● 了解 Android 開(kāi)發(fā)的基礎(chǔ)知識(shí)

● Android Studio

● 一個(gè) Android 設(shè)備

02 設(shè)置

第一步：如果你不打算把它集成到現(xiàn)有的項(xiàng)目中，可以在 Android Studio 中創(chuàng)建一個(gè)新的 Android 應(yīng)用程序。

第二步：前往 GitHub，克隆聲網(wǎng) UIKit GitHub 資源庫(kù)，并在文件瀏覽器中打開(kāi)此項(xiàng)目。

你會(huì)在這個(gè)克隆的 UIKit 項(xiàng)目中找到 agorauikit_android 目錄，把這個(gè)目錄復(fù)制并粘貼到你的應(yīng)用程序中的父級(jí)的位置。這個(gè)目錄包含了聲網(wǎng)的 Android UIKit，是擴(kuò)展工作的關(guān)鍵。

第三步：確保你的項(xiàng)目級(jí) build.gradle 有以下內(nèi)容：

allprojects {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
        maven { url 'https://www.jitpack.io' }
        flatDir {
            dirs 'libs'
        }
    }
}

第四步：前往 UIKit 的項(xiàng)目級(jí) build.gradle.kts，進(jìn)行以下操作：

1.如果存在插件 maven，將其刪除，因?yàn)樗驯粡U棄。

2.移除版本代碼和版本名稱（如果有）。

第五步：我們將添加一個(gè)包來(lái)點(diǎn)擊圖片或從設(shè)備圖庫(kù)中獲取圖片。為此，我們需要在應(yīng)用級(jí) build.gradle 中導(dǎo)入 Android UIKit 和一個(gè)圖片采集器包。

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

第六步：在 AndroidManifest.xml 文件中添加以下權(quán)限，以獲得必要的用戶權(quán)限：

<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" />

大功告成啦！以上就是所有設(shè)置，接下來(lái)是寫(xiě)代碼。

03 視頻通話用戶界面

我們不需要在構(gòu)建用戶界面方面做太多的工作，因?yàn)樗羞@些都已經(jīng)由聲網(wǎng) 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) }
        }
    }
}

使用聲網(wǎng) Android UIKit 進(jìn)行基礎(chǔ)的視頻通話

04 使用虛擬背景

我們使用 MainActivity.kt 作為主要活動(dòng)，用于啟動(dòng)視頻通話應(yīng)用程序。

導(dǎo)入必要的依賴

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

聲明一些變量

整個(gè)過(guò)程我們需要以下三個(gè)變量：

● agView : 這是 AgoraVideoViewer 類型的變量，用于調(diào)用 Android UIKIT，沒(méi)有它無(wú)法進(jìn)行視頻調(diào)用。

● tag: 我們用這個(gè)字符串記錄相關(guān)數(shù)據(jù)。我們可以選擇忽略這一點(diǎn)，只需在記錄數(shù)據(jù)時(shí)進(jìn)行相應(yīng)的修改就可以。

● virtualBackgroundToggle: 我們用這個(gè)布爾型變量開(kāi)啟或關(guān)閉虛擬背景效果，它在整個(gè)過(guò)程中非常重要。

我們可以在 Mainactivity.kt 中以如下方式添加這些內(nèi)容：

private var agView: AgoraVideoViewer? = null
private val tag = "VirtualBackground"
private var virtualBackgroundToggle = false

用虛擬背景加入視頻通話

我們用 joinCall() 方法來(lái)實(shí)現(xiàn)虛擬背景，可參照上面的視頻通話用戶界面。

虛擬背景會(huì)自動(dòng)檢測(cè)視頻通話中的任何對(duì)象，不會(huì)與任何對(duì)象重疊。在聲網(wǎng) Android SDK 中，虛擬背景有以下 3 種方式：

● 虛擬背景圖像 —— 我們可以使用任何可用的軟件包從手機(jī)的相冊(cè)或相機(jī)中獲取圖像，將其作為背景添加到我們的視頻通話中。

● 虛擬背景色 —— 我們可以添加任何十六進(jìn)制顏色作為背景。

● 虛擬背景模糊 —— 我們可以為現(xiàn)有背景添加一個(gè)額外的模糊效果，并且可以選擇模糊等級(jí)：低-中-高。

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()
    }
  }

關(guān)鍵是要記住，每次只啟用上述一種虛擬背景。我使用了虛擬背景圖片作為例子。我們可以開(kāi)啟其他兩個(gè)中的任何一個(gè)，同時(shí)注釋掉其他的。

切換虛擬背景

我們使用 AgoraButton 來(lái)開(kāi)啟/關(guān)閉 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
}

應(yīng)用虛擬背景圖像

我們采用以下步驟來(lái)應(yīng)用虛擬背景圖像：

● 采用合適的 intent ，使用第三方包從相冊(cè)/相機(jī)中獲取圖像

● 當(dāng)活動(dòng)返回一個(gè)結(jié)果時(shí)，啟用虛擬背景圖像

● 選擇的圖像必須符合這些規(guī)范

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()

應(yīng)用虛擬背景色

我們可以使用任何符合規(guī)范的十六進(jìn)制顏色作為虛擬背景。

private fun virtualBackgroundCOLOR(color: Int) {
  val backgroundSource = VirtualBackgroundSource()
  backgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_COLOR
  backgroundSource.color = color
  enableVirtualBackground(backgroundSource)
}

應(yīng)用虛擬背景模糊

我們可以應(yīng)用三種模糊級(jí)別：低、中、高。

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)
}

開(kāi)啟虛擬背景

最后，我們需要使用聲網(wǎng) Android UIKIT 和 Android SDK 開(kāi)啟虛擬背景。這里，我們將執(zhí)行 enableVirtualBackground() 方法，你可能已經(jīng)在上面找到了。

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()
     }
   })
}

關(guān)閉虛擬背景

使用聲網(wǎng) Flutter UIKIT 和 Flutter SDK，只需用一行代碼就能快速關(guān)閉虛擬背景!

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