Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Cómo implementar una vista previa

Cuando agregues una vista previa a tu app, usa PreviewView, que es un View que se puede recortar, escalar y rotar para que se muestre correctamente.

La vista previa de la imagen se transmite a una superficie dentro de PreviewView cuando la cámara se activa.

Nota: Si necesitas acceso directo a SurfaceTexture, por ejemplo, para realizar el procesamiento de OpenGL, consulta Cómo crear SurfaceTexture de forma manual.

Cómo usar PreviewView

La implementación de una vista previa de CameraX con PreviewView implica los siguientes pasos, que se explican en secciones posteriores:

  1. Configura una instancia de CameraXConfig.Provider.
  2. Agrega un elemento PreviewView a tu diseño.
  3. Solicita un elemento CameraProvider.
  4. En la creación de View, comprueba la presencia de CameraProvider.
  5. Selecciona una cámara y vincula el ciclo de vida y los casos prácticos.

El uso de PreviewView tiene algunas limitaciones. Cuando usas PreviewView, no puedes hacer nada de lo siguiente:

  • Crea un elemento SurfaceTexture para configurar TextureView y PreviewSurfaceProvider.
  • Recupera SurfaceTexture de TextureView y configúralo PreviewSurfaceProvider.
  • Obtén el elemento Surface de SurfaceView y configúralo en PreviewSurfaceProvider.

Si se produce alguno de estos problemas, Preview detendrá la transmisión de fotogramas a PreviewView.

Configura un elemento CameraXConfig.Provider

Implementa la interfaz CameraXConfig.Provider en tu clase Application, como se muestra en el siguiente ejemplo:

Kotlin

    import androidx.camera.camera2.Camera2Config
    import androidx.camera.core.CameraXConfig

    public class MyCameraXApplication : Application(),  CameraXConfig.Provider {
      override fun getCameraXConfig(): CameraXConfig {
        return Camera2Config.defaultConfig()
      }
    }
    

Java

    import androidx.camera.camera2.Camera2Config;
    import androidx.camera.core.CameraXConfig;

    public class MyCameraXApplication extends Application implements CameraXConfig.Provider {
        @NonNull
        @Override
        public CameraXConfig getCameraXConfig() {
            return Camera2Config.defaultConfig();
        }
    }
    

Agrega un elemento PreviewView a tu diseño

En el siguiente ejemplo, se muestra un elemento PreviewView en un diseño:

    <FrameLayout
        android:id="@+id/container">
            <androidx.camera.view.PreviewView
                android:id="@+id/preview_view" />
    </FrameLayout>
    

Solicita un elemento CameraProvider

En el siguiente código, se muestra cómo solicitar un elemento CameraProvider:

Kotlin

    import androidx.camera.lifecycle.ProcessCameraProvider
    import com.google.common.util.concurrent.ListenableFuture

    class MainActivity : AppCompatActivity() {
        private lateinit var cameraProviderFuture : ListenableFuture<ProcessCameraProvider>
        override fun onCreate(savedInstanceState: Bundle?) {
            cameraProviderFuture = ProcessCameraProvider.getInstance(this)
        }
    }
    

Java

    import androidx.camera.lifecycle.ProcessCameraProvider
    import com.google.common.util.concurrent.ListenableFuture

    public class MainActivity extends AppCompatActivity {
        private ListenableFuture<ProcessCameraProvider> cameraProviderFuture;

        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            cameraProviderFuture = ProcessCameraProvider.getInstance(this);
        }
    }
    

Cómo comprobar la disponibilidad de CameraProvider

Después de solicitar un elemento CameraProvider, verifica que la inicialización se haya realizado correctamente cuando se cree la vista. En el siguiente código, se muestra cómo hacerlo:

Kotlin

    cameraProviderFuture.addListener(Runnable {
        val cameraProvider = cameraProviderFuture.get()
        bindPreview(cameraProvider)
    }, ContextCompat.getMainExecutor(this))
    

Java

    cameraProviderFuture.addListener(() -> {
        try {
            ProcessCameraProvider cameraProvider = cameraProviderFuture.get();
            bindPreview(cameraProvider);
        } catch (ExecutionException | InterruptedException e) {
            // No errors need to be handled for this Future.
            // This should never be reached.
        }
    }, ContextCompat.getMainExecutor(this));
    

Para ver un ejemplo de la función bindPreview que se usa en esta muestra, consulta el código proporcionado en Selecciona una cámara y vincula el ciclo de vida y los casos prácticos.

Selecciona una cámara y vincula el ciclo de vida y los casos prácticos

Una vez que hayas creado y confirmado el elemento CameraProvider, haz lo siguiente:

  1. Crea un elemento Preview.
  2. Especifica la opción de cámara LensFacing deseada.
  3. Vincula la cámara seleccionada y los casos prácticos al ciclo de vida.
  4. Conecta el elemento Preview a PreviewView.

En el siguiente código, se muestra un ejemplo:

Kotlin

    fun bindPreview(cameraProvider : ProcessCameraProvider) {
        var preview : Preview = Preview.Builder()
                .build()

        var cameraSelector : CameraSelector = CameraSelector.Builder()
              .requireLensFacing(CameraSelector.LENS_FACING_BACK)
              .build()

        var camera = cameraProvider.bindToLifecycle(this as LifecycleOwner, cameraSelector, preview)

        preview.setSurfaceProvider(previewView.createSurfaceProvider(camera.cameraInfo))
    }
    

Java

    void bindPreview(@NonNull ProcessCameraProvider cameraProvider) {
        Preview preview = new Preview.Builder()
                .build();

        CameraSelector cameraSelector = new CameraSelector.Builder()
                .requireLensFacing(CameraSelector.LENS_FACING_BACK)
                .build();

        Camera camera = cameraProvider.bindToLifecycle((LifecycleOwner)this, cameraSelector, preview);

        preview.setSurfaceProvider(previewView.createSurfaceProvider(camera.getCameraInfo()));
    }
    

Recursos adicionales

Para obtener más información sobre CameraX, consulta los siguientes recursos adicionales:

Codelab

  • Cómo comenzar a usar CameraX
  • Muestra de código

  • App de ejemplo de CameraX oficial