轻松实现相机预览 | Camera Viewfinder 全新上线

Ne0inhk

— 7 min read
轻松实现相机预览 | Camera Viewfinder 全新上线
www.zeeklog.com - 轻松实现相机预览 | Camera Viewfinder 全新上线

作者 / Android 开发者关系工程师 Francesco Romano

经过多年的不断发展，Android 设备现在具有各种尺寸和形状，并且屏幕大小和功能也大不相同。但无论如何变化，手机拍照从一开始便一直是 Android 设备最重要的使用场景之一。如今，相机功能仍然是消费者购买手机的首要考虑因素之一。

作为开发者，您希望在您的应用中利用相机功能，因此决定采用 Android 相机框架。首先要实现的是预览 (Preview) 用例，它会在屏幕上显示相机传感器的输出。

预览 (Preview)

https://developer.android.google.cn/training/camerax/preview

接下来，您可以使用与屏幕尺寸一样大的界面创建 CaptureSession。只要屏幕的宽高比与相机传感器输出的宽高比相同，并且设备保持自然的纵向方向，那么一切便能顺利进行。

CaptureSession

https://developer.android.google.cn/reference/android/hardware/camera2/CameraDevice#createCaptureSession(android.hardware.camera2.params.SessionConfiguration)

但是，当您调整窗口大小、展开设备、更改屏幕或改变方向时会发生什么呢？大多数情况下，预览画面可能会被拉伸、上下颠倒或错误地旋转。如果处于多窗口模式中，您的应用甚至可能会崩溃。

为什么会出现这种情况呢？因为您在创建 CaptureSession 时做了隐含假设。

过去，应用在其整个生命周期中可能一直会在同一个窗口中运行，但是，随着新的外形规格 (例如可折叠设备) 和新的显示模式 (例如多窗口模式和多屏幕模式) 面市，这种情况已经发生变化。

让我们具体了解一下在开发针对各种外形规格的应用时需要考虑的一些重要因素，以及要避免的一些常见陷阱:

  • 不要假定应用将一直在纵向窗口中运行。Android 13 仍然支持应用固定屏幕方向的请求，但现在设备制造商可以选择覆盖应用的首选屏幕方向请求。
  • 不要假定应用有任何固定尺寸或宽高比。即使您设置了 resizableActivity = "false"，您的应用仍然可以在大屏幕设备 (>=600dp) 上以多窗口模式使用。
  • 不要假定屏幕方向和相机方向之间存在固定关系。《Android 兼容性定义文档》中明确了相机图像传感器 "必须朝向正确方向，以便相机的长度方向与屏幕的长度方向对齐"。从 API 级别 32 开始，查询可折叠设备方向的相机客户端可以收到一个根据设备/折叠状态动态变化的值。

Android 兼容性定义文档

https://source.android.com/docs/compatibility/13/android-13-cdd#755_camera_orientation

  • 不要假定边衬区的大小无法更改。新的任务栏会作为边衬区报告给应用，且当任务栏与手势导航一起使用时，任务栏可以动态隐藏和显示。
  • 不要假定您的应用享有专属的相机访问权限。当您的应用处于多窗口模式时，其他应用也可以获得对相机和麦克风等共享资源的访问权限。

虽然 CameraX 已经能处理上述大多数情况，但使用 Camera2 API 实现适用于不同场景的预览可能会很复杂。我们在 "在您的相机应用中支持可调整大小的 Surface" Codelab 中介绍了这一点。

在您的相机应用中支持可调整大小的 Surface

https://developer.android.google.cn/codelabs/android-camera2-preview

如果有一个简单的组件可以处理这些细节，并让您专注于特定的应用逻辑，会不会更好？

话不多说，敬请通过下文了解 CameraViewfinder……

隆重推出 CameraViewfinder

CameraViewfinder 是  库的一个新组件，帮助您更轻松地快速实现相机预览。它在内部使用 TextureView 或 SurfaceView 来显示相机画面，并对其应用进行必要的转换以正确显示取景器。比如校正宽高比、比例和旋转方向。它与您现有的 Camera2 代码库完全兼容，并已在多种设备上持续进行测试。

CameraViewfinder

https://developer.android.google.cn/reference/kotlin/androidx/camera/viewfinder/CameraViewfinder

下面就让我们对其用法一探究竟！

首先，在您的应用级 build.gradle 文件中添加依赖项:

implementation "androidx.camera:camera-viewfinder:1.3.0-alpha01"

同步您的项目。现在，您应该可以像使用任何其他 View 一样直接使用 CameraViewfinder。例如，您可以将它添加到您的布局文件中:

<androidx.camera.viewfinder.CameraViewfinder
  android:id="@+id/view_finder"
  app:scaleType="fitCenter"
  app:implementationMode="performance"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

View

https://developer.android.google.cn/reference/android/view/View

如您所见，CameraViewfinder 的控件与 PreviewView 上可用的控件相同，所以您可以选择不同的实现模式和缩放类型。

PreviewView

https://developer.android.google.cn/reference/kotlin/androidx/camera/view/PreviewView

实现模式

https://developer.android.google.cn/training/camerax/preview#implementation-mode

缩放类型

https://developer.android.google.cn/training/camerax/preview#scale-type

现在该组件是布局的一部分，您仍然可以创建 CameraCaptureSession，但不提供 TextureView 或 SurfaceView 作为目标界面，而是使用 requestSurfaceAsync() 的结果。

fun startCamera(){
    val previewResolution = Size(width, height)
    val viewfinderSurfaceRequest = 
ViewfinderSurfaceRequest(previewResolution, characteristics)
    val surfaceListenableFuture =
        cameraViewfinder.requestSurfaceAsync(viewfinderSurfaceRequest)


    Futures.addCallback(surfaceListenableFuture, object :FutureCallback<Surface> {
        override fun onSuccess(surface:Surface) {
            //像往常一样使用这个界面创建 CaptureSession
        }
        override fun onFailure(t:Throwable) { /* 出错了 */}
    }, ContextCompat.getMainExecutor(context))
}

CameraCaptureSession

https://developer.android.google.cn/reference/android/hardware/camera2/CameraCaptureSession

requestSurfaceAsync()

https://developer.android.google.cn/reference/kotlin/androidx/camera/viewfinder/CameraViewfinder#requestSurfaceAsync(androidx.camera.viewfinder.ViewfinderSurfaceRequest)

附加功能: 可折叠设备的布局优化

CameraViewFinder 随时可以在可调整大小的界面、配置更改、旋转和多窗口模式下使用，并且已经在许多可折叠设备上进行了测试。

但是，如果您想为可折叠设备和双屏设备实施布局优化，您可以将 CameraViewFinder 与 Jetpack WindowManager 库结合使用，从而为您的用户提供独特的体验。

Jetpack WindowManager

https://developer.android.google.cn/jetpack/androidx/releases/window

例如，如果屏幕中间有铰链，或者设备处于 "书本" 或 "桌面" 模式，您可以选择不显示全屏预览。在这种情况下，您可以将取景器放在屏幕的一部分中，然后将控件放在另一侧；或者您可以使用屏幕的一部分来显示最后拍摄的照片。尽情发挥您的创意吧！

示例应用已经针对可折叠设备进行了优化，您可以立即查看处理姿势变化的代码。欢迎您持续关注我们，及时了解更多开发技术和产品更新等资讯动态。

处理姿势变化的代码

https://github.com/androidx/androidx/blob/androidx-main/camera/integration-tests/viewfindertestapp/src/main/java/androidx/camera/integration/viewfinder/CameraViewfinderFoldableFragment.kt#L583

www.zeeklog.com - 轻松实现相机预览 | Camera Viewfinder 全新上线

点击屏末 | 阅读原文 | 即刻了解 CameraViewfinder 更多相关信息

www.zeeklog.com - 轻松实现相机预览 | Camera Viewfinder 全新上线
www.zeeklog.com - 轻松实现相机预览 | Camera Viewfinder 全新上线
www.zeeklog.com - 轻松实现相机预览 | Camera Viewfinder 全新上线

Read more

深入理解 Proxy 和 Object.defineProperty

在JavaScript中，对象是一种核心的数据结构，而对对象的操作也是开发中经常遇到的任务。在这个过程中，我们经常会使用到两个重要的特性：Proxy和Object.defineProperty。这两者都允许我们在对象上进行拦截和自定义操作，但它们在实现方式、应用场景和灵活性等方面存在一些显著的区别。本文将深入比较Proxy和Object.defineProperty，包括它们的基本概念、使用示例以及适用场景，以帮助读者更好地理解和运用这两个特性。 1. Object.defineProperty 1.1 基本概念 Object.defineProperty 是 ECMAScript 5 引入的一个方法，用于直接在对象上定义新属性或修改已有属性。它的基本语法如下： javascript 代码解读复制代码Object.defineProperty(obj, prop, descriptor); 其中，obj是目标对象，prop是要定义或修改的属性名，descriptor是一个描述符对象，用于定义属性的特性。 1.2 使用示例 javascript 代码解读复制代码//

By Ne0inhk

Proxy 和 Object.defineProperty 的区别

Proxy 和 Object.defineProperty 是 JavaScript 中两个不同的特性，它们的作用也不完全相同。 Object.defineProperty 允许你在一个对象上定义一个新属性或者修改一个已有属性。通过这个方法你可以精确地定义属性的特征，比如它是否可写、可枚举、可配置等。该方法的使用场景通常是需要在一个对象上创建一个属性，然后控制这个属性的行为。 Proxy 也可以用来代理一个对象，但是相比于 Object.defineProperty，它提供了更加强大的功能。使用 Proxy 可以截获并重定义对象的基本操作，比如访问属性、赋值、函数调用等等。在这些操作被执行之前，可以通过拦截器函数对这些操作进行拦截和修改。因此，通过 Proxy，你可以完全重写一个对象的默认行为。该方法的使用场景通常是需要对一个对象的行为进行定制化，或者需要在对象上添加额外的功能。 对比 以下是 Proxy 和 Object.defineProperty 的一些区别对比： 方面ProxyObject.defineProperty语法使用 new Proxy(target,

By Ne0inhk