搜狐技术产品

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

作者 / Google 开发者关系工程师 Jolanda Verhoef
本文是 "相机与媒体 Spotlight Week" 系列的内容之一。此系列中,我们会提供文章、视频、示例代码等资源,以帮助您提升应用中的媒体体验。
我们了解到您喜欢 CameraX 和 Jetpack Compose 库提供的强大功能,但希望使用更符合语言习惯的 Compose API 来构建相机界面。今年,我们的工程团队开发了两个新的 Compose 工件,即低层级 viewfinder-compose 和高层级 camera-compose。两者现在均已推出 alpha 版本 🚀🚀🚀。
在本系列文章中,我们不仅将为您介绍如何将 camera-compose API 集成到应用中,还将向您展示与 Compose 集成所带来的一些令人愉悦的界面体验。所有令人赞叹的 Compose 功能 (例如自适应 API 和动画支持) 均已与相机预览无缝集成。
完成所有这些操作后,我们的最终应用将如下所示:

Image

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

Image

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

添加库依赖项

假设您已经在应用中设置了 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 SurfaceRequestandroidx-camera-core = { module = "androidx.camera:camera-core", version.ref = "camerax" }# Contains the CameraXViewfinder composableandroidx-camera-compose = { module = "androidx.camera:camera-compose", version.ref = "camerax" }# Allows us to bind the camera preview to our UI lifecycleandroidx-camera-lifecycle = { group = "androidx.camera", name = "camera-lifecycle", version.ref = "camerax" }# The specific camera implementation that renders the previewandroidx-camera-camera2 = { module = "androidx.camera:camera-camera2", version.ref = "camerax" }# The helper library to grant the camera permissionaccompanist-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)}
为了授予相机权限,我们添加了所有依赖项,然后实际显示相机预览。接下来,让我们看看如何授予正确的权限。
Image

授予相机权限

通过使用 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)@Composablefun 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!") } } }}
@Composableprivate fun CameraPreviewContent(modifier: Modifier = Modifier) { // TODO: Implement}
这样,我们就得到了一个良好的界面,用户可以在显示相机预览之前授予相机权限:
Image
Image

创建 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 传递给请求对象。
最后,我们需要等待界面与相机完成绑定,并确保释放相机资源以避免资源泄漏。
Image

实现相机预览界面

现在我们有了一个视图模型,可以实现 CameraPreviewContent 可组合项。该项从视图模型中读取 surface 请求,在可组合项位于组合树中时绑定到相机,并从库中调用 CameraXViewfinder。
@Composablefun 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。
Image

结果

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

Image

本文中的代码段包含以下许可证:
// Copyright 2024 Google LLC. SPDX-License-Identifier: Apache-2.0

欢迎您持续关注 "Android 开发者" 微信公众号,及时了解更多开发技术和产品更新等资讯动态!