聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景
正文
使用聲網(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
原文鏈接:
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() }
05 總結(jié)
我們現(xiàn)在有了一個(gè)可以設(shè)置虛擬背景的視頻通話應(yīng)用程序!這個(gè)應(yīng)用可以在安卓應(yīng)用程序中運(yùn)行。
還有一大堆很好添加的其他功能,可以進(jìn)入對(duì)應(yīng)文檔查看。
06 測(cè)試
大家可以通過(guò) GitHub link 試用這個(gè)應(yīng)用程序??寺≠Y源庫(kù)之后,只需在安卓設(shè)備上運(yùn)行該應(yīng)用,即可測(cè)試該應(yīng)用。
07 其他資源
要了解更多關(guān)于聲網(wǎng) Android SDK 和其他用例的信息,請(qǐng)查看下方開(kāi)發(fā)者指南。也可以查看上面上述函數(shù)的完整文檔及其他函數(shù)。
1)賬號(hào)注冊(cè)地址
2)官方 GitHub 地址
3)更多功能匯總
4)開(kāi)發(fā)者指南
5)上述函數(shù)的完整文檔及其他函數(shù)
以上就是聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景的詳細(xì)內(nèi)容,更多關(guān)于Android UIKit視頻通話添加背景SDK的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android studio設(shè)置文件頭定制代碼注釋的方法
這篇文章主要介紹了Android studio設(shè)置文件頭定制代碼注釋的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08Android 有效的解決內(nèi)存泄漏的問(wèn)題實(shí)例詳解
這篇文章主要介紹了Android 有效的解決內(nèi)存泄漏的問(wèn)題的相關(guān)資料,這里舉例說(shuō)明,如何實(shí)現(xiàn)解決內(nèi)存泄漏,需要的朋友可以參考下2016-11-11Flutter通過(guò)Container實(shí)現(xiàn)時(shí)間軸效果
時(shí)間軸是前端UI經(jīng)常用到的效果,本文講解下Flutter如何通過(guò)Container實(shí)現(xiàn),感興趣的朋友可以了解下2021-05-05Android系統(tǒng)在shell中的df命令實(shí)現(xiàn)
今天小編就為大家分享一篇關(guān)于Android系統(tǒng)在shell中的df命令實(shí)現(xiàn),小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-12-12詳解關(guān)于Android Studio中安裝和gradle的一些坑
本篇文章主要介紹了關(guān)于Android Studio中安裝和gradle的一些坑,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Android自定義View實(shí)現(xiàn)簡(jiǎn)單的圓形Progress效果
這篇文章主要介紹了Android自定義View實(shí)現(xiàn)簡(jiǎn)單的圓形Progress效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09