聲網SDK教程Android UIKit 實時視頻通話添加自定義背景
正文
使用聲網 SDK 和 UIKit 創(chuàng)建視頻推流應用非常簡單,而且聲網還有許多功能,可以提高視頻通話的質量和便利性。例如,我們可以在視頻通話過程中使用虛擬背景,為視頻通話增添趣味性。
我們可以通過以下三種方式自定義視頻通話的背景:
● 使用圖像作為背景
● 使用純色背景
● 在現有背景上應用模糊效果
本教程教大家使用聲網 Android SDK 和 Android UIKit 在 Android 中添加虛擬背景。
原文作者:Rishav Naskar
原文鏈接:
01 前期準備
● 一個聲網開發(fā)者賬戶
● 了解如何使用聲網 Android UIKit 創(chuàng)建直播推流 Android 應用(可在官方 GitHub 搜索查看)
● 了解 Android 開發(fā)的基礎知識
● Android Studio
● 一個 Android 設備
02 設置
第一步:如果你不打算把它集成到現有的項目中,可以在 Android Studio 中創(chuàng)建一個新的 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 ,使用第三方包從相冊/相機中獲取圖像
● 當活動返回一個結果時,啟用虛擬背景圖像
● 選擇的圖像必須符合這些規(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()
應用虛擬背景色
我們可以使用任何符合規(guī)范的十六進制顏色作為虛擬背景。
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 開啟虛擬背景。這里,我們將執(zhí)行 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 試用這個應用程序??寺≠Y源庫之后,只需在安卓設備上運行該應用,即可測試該應用。
07 其他資源
要了解更多關于聲網 Android SDK 和其他用例的信息,請查看下方開發(fā)者指南。也可以查看上面上述函數的完整文檔及其他函數。
1)賬號注冊地址
2)官方 GitHub 地址
3)更多功能匯總
4)開發(fā)者指南
5)上述函數的完整文檔及其他函數
以上就是聲網SDK教程Android UIKit 實時視頻通話添加自定義背景的詳細內容,更多關于Android UIKit視頻通話添加背景SDK的資料請關注腳本之家其它相關文章!
相關文章
詳解關于Android Studio中安裝和gradle的一些坑
本篇文章主要介紹了關于Android Studio中安裝和gradle的一些坑,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Android自定義View實現簡單的圓形Progress效果
這篇文章主要介紹了Android自定義View實現簡單的圓形Progress效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09

