在原生Android应用中集成ZEGOCLOUD视频通话UIKit

引言

Android是由谷歌领导的开放手机联盟开发的移动操作系统。在本指南中，我们将使用Kotlin和Jetpack Compose在Android Studio中构建一个应用。如果你不熟悉Jetpack Comppose，它是谷歌开发的一个声明式UI工具包，用于使用Kotlin构建原生Android应用。你可能会问，为什么使用Android Studio而不是Flutter？嗯，使用原生工具获得的效率和性能是无与伦比的。Flutter开发者可以尽情地对我们侧目，但他们应该知道，低投入的多平台发布，带来的是低质量的应用。 最后，我们将使用ZEGOCLOUD的视频通话UIKit库来快速开发这个应用。

ZEGOCLOUD简介

ZEGOCLOUD是一家实时通信（RTC）公司，提供用于语音通话、视频通话、直播、应用内聊天和其他应用的UIKits、SDKs和API等产品。借助他们提供的库，我们可以即时实现视频通话和直播等复杂功能。这是因为我们不需要自己定义复杂的框架。这为我们节省了时间和精力。与其他公司相比，ZEGOCLOUD的价格也相当合理。

说了这么多，让我们开始吧！

在Android Studio中设置项目

1. 在Android Studio中使用 Empty Activity 模板创建一个新项目。
2. 选择 API 30 (“R”; Android 11) 作为你的最低SDK。同时，选择Kotlin DSL作为你的构建配置语言。
3. 导航到 MainActivity.kt，移除通用的 Greeting 可组合项及其在 onCreate() 中的相应函数调用

在ZEGOCLOUD网站上设置项目

1. 在ZEGOCLOUD网站 zegocloud.com 上注册一个账户，然后进入控制台。
2. 使用“语音和视频通话”模板创建一个新项目，然后点击 Start with UI Kits。
3. 在框架选择页面选择 For Android。
4. 最后，你将进入一个页面，上面有我们稍后会用到的 app id 和 app sign。

在Android Studio中构建项目

现在，我们将在Android Studio中设置依赖项。

1. 导航到 Gradle Scripts > settings.gradle.kts，在 repositories 内添加以下maven依赖。

maven ( url = "https://maven.zego.im" ) // <- 添加这一行。
maven ( url = "https://www.jitpack.io" ) // <- 添加这一行。

1. 接下来，打开 build.gradle.kts (:app) 并添加这个实现。

implementation("com.github.ZEGOCLOUD:zego_uikit_prebuilt_call_android:+")

1. 现在，点击 Sync Now，这个选项会在我们修改此文件时出现。
2. 这可能需要几秒钟，你将在终端看到一条 BUILD SUCCESSFUL in Xs 的消息。

按回车键或点击查看完整尺寸图片

按回车键或点击查看完整尺寸图片

接下来，导航回 MainActivity.kt，在一个新的 CallActivity 类下创建一个 CallScreen() 可组合项，该类将替换原来的 MainActivity 类。

以下是你的 MainActivity.kt 文件应该看起来的样子：

package com.[你的名字].[项目名称]
importandroid.os.Bundle
importandroid.view.View
importandroid.widget.FrameLayout
importandroidx.activity.compose.setContent
importandroidx.activity.enableEdgeToEdge
importandroidx.compose.foundation.layout.Arrangement
importandroidx.compose.foundation.layout.Column
importandroidx.compose.foundation.layout.Spacer
importandroidx.compose.foundation.layout.fillMaxSize
importandroidx.compose.foundation.layout.fillMaxWidth
importandroidx.compose.foundation.layout.height
importandroidx.compose.foundation.layout.padding
importandroidx.compose.foundation.layout.systemBarsPadding
importandroidx.compose.foundation.shape.RoundedCornerShape
importandroidx.compose.material.icons.Icons
importandroidx.compose.material.icons.filled.VideoCall
importandroidx.compose.material3.Button
importandroidx.compose.material3.Icon
importandroidx.compose.material3.OutlinedTextField
importandroidx.compose.material3.Surface
importandroidx.compose.material3.Text
importandroidx.compose.runtime.Composable
importandroidx.compose.runtime.getValue
importandroidx.compose.runtime.mutableStateOf
importandroidx.compose.runtime.remember
importandroidx.compose.runtime.setValue
importandroidx.compose.ui.Modifier
importandroidx.compose.ui.unit.dp
importandroidx.compose.ui.viewinterop.AndroidView
importandroidx.fragment.app.FragmentActivity
importandroidx.core.app.ActivityCompat
importandroidx.fragment.app.FragmentManager
importcom.android.identity.util.UUID
importcom.[你的名字].[项目名称].ui.theme.[项目名称]Theme
importcom.zegocloud.uikit.prebuilt.call.ZegoUIKitPrebuiltCallConfig
importcom.zegocloud.uikit.prebuilt.call.ZegoUIKitPrebuiltCallFragment

classCallActivity: FragmentActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 请求权限
        ActivityCompat.requestPermissions(this,arrayOf(android.Manifest.permission.CAMERA,android.Manifest.permission.RECORD_AUDIO),1)
        enableEdgeToEdge()
        setContent {
            [项目名称]Theme {
                Surface (
                    modifier = Modifier.fillMaxSize().systemBarsPadding()
                ) {
                    CallScreen(supportFragmentManager)
                }
            }
        }
    }
}

@Composable
fun CallScreen(fragmentManager: androidx.fragment.app.FragmentManager){
    var Username by remember { mutableStateOf("") }
    var MeetingID by remember { mutableStateOf("") }
    var joined by remember { mutableStateOf(false) }

    if(!joined){
        Column(
            modifier = Modifier.fillMaxSize()
                .padding(24.dp),
            verticalArrangement = Arrangement.Center
        ){
            OutlinedTextField(
                value = Username,
                onValueChange = { Username = it} ,
                label = { Text("用户ID")},
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(12.dp)
            )
            Spacer(Modifier.height(12.dp))
            OutlinedTextField(
                value = MeetingID,
                onValueChange = { MeetingID = it} ,
                label = { Text("会议ID")},
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(12.dp)
            )
            Spacer(Modifier.height(24.dp))
            Button(
                onClick = {
                    if(Username.isNotBlank() && MeetingID.isNotBlank()){
                        joined = true
                    }
                },
                modifier = Modifier.fillMaxWidth()
            ) {
                Icon(imageVector = Icons.Default.VideoCall, contentDescription = "加入会议")
                Text(" 加入会议")
            }
        }
    }
    else{
        val appID:Long = [你的 App ID]
        val appSign:String = [你的 App Sign]
        val userID = " ${Username}_ ${UUID.randomUUID()}"
        val config = ZegoUIKitPrebuiltCallConfig.groupVideoCall()
        AndroidView(
            modifier = Modifier.fillMaxSize(),
            factory = { context->
                FrameLayout(context).apply {
                    id = View.generateViewId()
                    fragmentManager
                        .beginTransaction()
                        .replace(
                            id,
                            ZegoUIKitPrebuiltCallFragment.newInstance(
                                appID, appSign, userID, Username, MeetingID, config
                            )
                        )
                        .commit()
                }
            }
        )
    }
}

注意： 别忘了用实际值替换占位符。这些占位符用方括号 [] 标记。否则，准备好接受Gradle编译器和Android Studio的“教育”吧。

接下来，我们需要修改 AndroidManifest.xml 文件，以启动我们的 CallActivity 而不是原来的 MainActivity。同时，我们将添加 uses-permission 标签来声明使用相机、互联网和麦克风的权限。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <!-- APP PERMISSIONS -->
    <uses-feature
        android:name="android.hardware.camera"
        android:required="false" />
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.[项目名称]">
        <activity
            android:name=".CallActivity" <!-- 注意这里 -->
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.[项目名称]">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

完成这些之后，我们只需要修改 themes.xml 文件，该文件可以在以下目录找到：res > values > themes.xml，同时还有 colors.xml 和 strings.xml。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.[项目名称]" parent="Theme.MaterialComponents.DayNight.NoActionBar" />
</resources>

最后，在 build.gradle.kts (:app) 文件中为本项目中使用的图标添加这个依赖项。

implementation("androidx.compose.material:material-icons-extended-android:1.7.8")

编译并运行应用

万事俱备，我们现在可以编译并运行应用了。为此，点击Android Studio Narwhal中显示为倒置绿色三角形的运行按钮。

这将在模拟器或连接的物理设备上启动应用，具体取决于你的设置。

最终效果

以下是应用的截图：

结论

恭喜！🎉 你已成功使用ZEGOCLOUD的UIKit，以最少的努力和代码构建了一个视频通话应用。

如果你觉得这篇文章有帮助，请点赞、分享并关注我，以获取更多精彩的教程。

原文链接：https://medium.com/@thegenzdev0712/integrating-zegocloud-video-calling-uikit-into-a-native-android-app-971a8647b3de