在 Jetpack Compose 中解锁 CameraX 的强大功能

feeaf6de7622a993e5df31e4649c9a4c.png

作者 / Google 开发者关系工程师 Jolanda Verhoef

本文是 "相机与媒体 Spotlight Week" 系列的内容之一。此系列中,我们会提供文章、视频、示例代码等资源,以帮助您提升应用中的媒体体验。

我们了解到您喜欢 CameraX 和 Jetpack Compose 库提供的强大功能,但希望使用更符合语言习惯的 Compose API 来构建相机界面。今年,我们的工程团队开发了两个新的 Compose 工件,即低层级 viewfinder-compose 和高层级 camera-compose。两者现在均已推出 alpha 版本 🚀🚀🚀。

在本系列文章中,我们不仅将为您介绍如何将 camera-compose API 集成到应用中,还将向您展示与 Compose 集成所带来的一些令人愉悦的界面体验。所有令人赞叹的 Compose 功能 (例如自适应 API 和动画支持) 均已与相机预览无缝集成。

完成所有这些操作后,我们的最终应用将如下所示:

719257d97edc34013ef9b3b28fbabb13.gif

此外,应用可以顺畅地在桌面模式之间切换:

f2454d8b9e580a36ab6206a8664bebed.gif

到本文 (该系列第一篇文章) 的末尾,您将构建一个功能齐全的相机取景器,并将在后续系列文章中对其进行扩展。欢迎您跟随我们一起编写代码,在实践中更好地学习。

添加库依赖项

假设您已经在应用中设置了 Compose。如果您想继续,只需在 Android Studio 中新建一个应用即可。我们通常使用最新的 Canary 版本,因为这个版本会提供最新的 Compose 模板。

向您的 libs.versions.toml 中添加以下内容:

[versions]
..
camerax = "1.5.0-alpha03"
accompanist = "0.36.0" # or whatever matches with your Compose version


[libraries]
..
# Contains the basic camera functionality such as SurfaceRequest
androidx-camera-core = { module = "androidx.camera:camera-core", version.ref = "camerax" }
# Contains the CameraXViewfinder composable
androidx-camera-compose = { module = "androidx.camera:camera-compose", version.ref = "camerax" }
# Allows us to bind the camera preview to our UI lifecycle
androidx-camera-lifecycle = { group = "androidx.camera", name = "camera-lifecycle", version.ref = "camerax" }
# The specific camera implementation that renders the preview
androidx-camera-camera2 = { module = "androidx.camera:camera-camera2", version.ref = "camerax" }
# The helper library to grant the camera permission
accompanist-permissions = { module = "com.google.accompanist:accompanist-permissions", version.ref = "accompanist" }

然后,将这些添加到您的模块 build.gradle.kts 依赖项块中:

dependencies {
  ..
  implementation(libs.androidx.camera.core)
  implementation(libs.androidx.camera.compose)
  implementation(libs.androidx.camera.lifecycle)
  implementation(libs.androidx.camera.camera2)
  implementation(libs.accompanist.permissions)
}

为了授予相机权限,我们添加了所有依赖项,然后实际显示相机预览。接下来,让我们看看如何授予正确的权限。

授予相机权限

通过使用 Accompanist 权限库,我们可以轻松地授予正确的相机权限。首先,我们需要设置 AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-permission android:name="android.permission.CAMERA" />


    ..


</manifest>
  • Accompanist 权限库

    https://google.github.io/accompanist/permissions/

现在,我们只需按照库的说明授予正确的权限:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                CameraPreviewScreen()
            }
        }
    }
}


@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun CameraPreviewScreen(modifier: Modifier = Modifier) {
    val cameraPermissionState = rememberPermissionState(android.Manifest.permission.CAMERA)
    if (cameraPermissionState.status.isGranted) {
        CameraPreviewContent(modifier)
    } else {
        Column(
            modifier = modifier.fillMaxSize().wrapContentSize().widthIn(max = 480.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            val textToShow = if (cameraPermissionState.status.shouldShowRationale) {
                // If the user has denied the permission but the rationale can be shown,
                // then gently explain why the app requires this permission
                "Whoops! Looks like we need your camera to work our magic!" +
                    "Don't worry, we just wanna see your pretty face (and maybe some cats).  " +
                    "Grant us permission and let's get this party started!"
            } else {
                // If it's the first time the user lands on this feature, or the user
                // doesn't want to be asked again for this permission, explain that the
                // permission is required
                "Hi there! We need your camera to work our magic! ✨\n" +
                    "Grant us permission and let's get this party started! \uD83C\uDF89"
            }
            Text(textToShow, textAlign = TextAlign.Center)
            Spacer(Modifier.height(16.dp))
            Button(onClick = { cameraPermissionState.launchPermissionRequest() }) {
                Text("Unleash the Camera!")
            }
        }
    }
}


@Composable
private fun CameraPreviewContent(modifier: Modifier = Modifier) {
    // TODO: Implement
}

这样,我们就得到了一个良好的界面,用户可以在显示相机预览之前授予相机权限:

efc864cf5830bb12511142cef1905a21.png

创建 ViewModel

将业务逻辑与界面分开是一种很好的实践。为此,我们可以为屏幕创建视图模型来实现这一点。这个视图模型设置了 CameraX Preview 用例。请注意,CameraX 中的用例代表了可以使用该库实现的各种工作流程的配置,即预览、捕获、录制和分析。视图模型还将界面绑定到相机提供程序:

class CameraPreviewViewModel : ViewModel() {
    // Used to set up a link between the Camera and your UI.
    private val _surfaceRequest = MutableStateFlow<SurfaceRequest?>(null)
    val surfaceRequest: StateFlow<SurfaceRequest?> = _surfaceRequest


    private val cameraPreviewUseCase = Preview.Builder().build().apply {
        setSurfaceProvider { newSurfaceRequest ->
            _surfaceRequest.update { newSurfaceRequest }
        }
    }


    suspend fun bindToCamera(appContext: Context, lifecycleOwner: LifecycleOwner) {
        val processCameraProvider = ProcessCameraProvider.awaitInstance(appContext)
        processCameraProvider.bindToLifecycle(
            lifecycleOwner, DEFAULT_FRONT_CAMERA, cameraPreviewUseCase
        )


        // Cancellation signals we're done with the camera
        try { awaitCancellation() } finally { processCameraProvider.unbindAll() }
    }
}

此处会执行大量操作。代码定义了一个 CameraPreviewViewModel 类,负责管理相机预览。此类使用 CameraX Preview 构建器来配置预览与界面的绑定方式。bindToCamera 函数用于初始化相机,并将其绑定到指定的 LifecycleOwner,以确保相机至少在生命周期处于 "启动" 状态时运行,并启动预览流。

相机作为相机库的内部组件,需要渲染到界面提供的 surface。因此,库需要有一种方法来请求 surface。这正是 SurfaceRequest 的用途。因此,每当相机表示需要 surface 时,就会触发 surfaceRequest。然后将该请求转发给界面,以便将 surface 传递给请求对象。

最后,我们需要等待界面与相机完成绑定,并确保释放相机资源以避免资源泄漏。

实现相机预览界面

现在我们有了一个视图模型,可以实现 CameraPreviewContent 可组合项。该项从视图模型中读取 surface 请求,在可组合项位于组合树中时绑定到相机,并从库中调用 CameraXViewfinder。

@Composable
fun CameraPreviewContent(
    viewModel: CameraPreviewViewModel,
    modifier: Modifier = Modifier,
    lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current
) {
    val surfaceRequest by viewModel.surfaceRequest.collectAsStateWithLifecycle()
    val context = LocalContext.current
    LaunchedEffect(lifecycleOwner) { 
        viewModel.bindToCamera(context.applicationContext, lifecycleOwner) 
    }


    surfaceRequest?.let { request ->
        CameraXViewfinder(
            surfaceRequest = request,
            modifier = modifier
        )
    }
}

如上部分所述,surfaceRequest 允许相机库在需要渲染时请求一个 surface。在这段代码中,我们收集这些 surfaceRequest 实例,并将它们转发给属于 camera-compose 组件的 CameraXViewfinder。

结果

就这样,我们构建了一个功能齐全的全屏取景器。了解完整代码片段,请访问相关文档:

https://gist.github.com/JolandaVerhoef/74d4696b804736c698450bd34b5c9ff8

6506b0cb7baf451deaf405b3c5a6aea3.png

本文中的代码段包含以下许可证:

// Copyright 2024 Google LLC. SPDX-License-Identifier: Apache-2.0

27b458ed68495d828b573228f897d4b9.png

683e23d7fb8c73b72509d56257f59092.png

cf7f05b9b654bc0bdd507668f2dd14d2.png

18d2d0bb6535bf6b190a8aaa5dc20d24.png

谷歌开发者特别招募活动进行中

诚邀热爱技术的你加入

通过多种形式 (文章/视频/coding 等) 创作与 Google 技术相关的讲解分享、实践案例或活动感受等内容,以及分享您应用 AI 技术的故事经历与成果。我们将为您提供平台和资源,助力您在分享中提升技能。更有惊喜权益等您领取,快来报名参与吧!


bf4c97bd1436ece09671849542b8bf76.png

4744cd0182b6e230722836235a01d770.png

b025302dc0824e8b8ed1b9be6d61c9b7.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值