Mejora la experiencia con la cámara gracias a los controles de captura

Mejora la experiencia con la cámara gracias a los controles de captura

Aprende a personalizar los controles de captura en tus experiencias con la cámara. Mostraremos cómo tomar fotos con los controles de captura, incluida la compatibilidad con los AirPods y cómo ajustar la configuración con Control de Cámara.

Capítulos
- 0:00 - Introducción
- 2:51 - Captura física
- 3:01 - Manejo de eventos
- 6:39 - Captura remota con AirPods
- 10:00 - Control de Cámara
Recursos
Videos relacionados

WWDC24
- Build a great Lock Screen camera capture experience
WWDC23
- Discover Continuity Camera for tvOS
- Support external cameras in your iPadOS app
Hola, soy Vitaliy. Soy ingeniero del equipo de AVKit y te doy la bienvenida a “Mejora tu experiencia con la cámara con controles de captura”. Hoy veremos nuevas y potentes formas de mejorar las interacciones en tu app. Con los Controles de captura, se pueden asignar gestos de botones físicos a acciones de cámara por código, ofreciendo una experiencia similar a la Cámara de iOS. También te mostraré una sorprendente funcionalidad nueva de iOS 26 que te encantará.
Para ilustrar el poder de los controles de captura, usemos la app cámara en iOS. En vez de tomar una foto con el botón IU, usemos botones físicos en el teléfono.
Con solo un clic en el botón de subir el volumen, puedes hacer la captura.
Pero esta API no se limita a hacer clics. También admite pulsaciones largas. En modo cámara, si mantienes presionado el botón de bajar volumen, se inicia la grabación de video.
De esa manera les damos a los usuarios flexibilidad para usar la cámara y capturar momentos con su iPhone.
En esta sesión, veremos qué es la captura física y qué botones son compatibles. Veremos cómo usar la API para manejar interacciones y crear una interfaz sólida y fluida, como en la demostración.
También veremos una nueva funcionalidad en iOS 26: el control remoto de cámara con los AirPods. Por último, Nick presentará una descripción general del control de la cámara en el iPhone 16.
Antes de ver las funciones clave de la API, repasemos las estructuras principales para crear una gran experiencia en iOS. El núcleo de la cámara es AVFoundation, que permite la captura de fotos y videos con API como AVCapturePhotoOutput y AVCaptureMovieFileOutput.
Para combinar la capa de IU con AVFoundation, tenemos AVKit, que está construido sobre estas estructuras.
Una API específica de captura que incluye AVKit es AVCaptureEventInteraction.
Profundicemos en las funcionalidades y capacidades de AVCaptureEventInteraction. Esta API permite anular el comportamiento predeterminado de los botones físicos o el control de cámara del iPhone 16.
Otro botón que la API admite es el botón de acción. Consulta la sesión del año pasado sobre cómo configurar el botón de acción para capturas.
Cada pulsación de un botón físico activa una notificación de evento de captura. Esta notificación tiene una fase de evento, lo que brinda un control preciso sobre todo el ciclo. Hay tres fases posibles: Comienzo: en el momento en que se presiona el botón. Perfecto para preparar el objeto de la cámara de tu app.
Cancelación: cuando la app pasa a segundo plano o la captura no está disponible.
Finalización: el momento en el que se suelta el botón. Esta es la fase en la que el objeto de la cámara debe iniciar la captura.
Con AVCaptureEventInteraction, puedes diferenciar entre pulsaciones de botones para acciones primarias y secundarias. Presionar el botón activa una notificación de captura, enviada al controlador asignado.
Las acciones primarias se activan con el botón de bajar el volumen, el botón de acción y el Control de cámara, y las secundarias con el botón de subir el volumen. El mismo botón no puede activar ambos controladores, ya que están diseñados para representar acciones distintas. El controlador secundario es opcional. De no especificarse, al subir el volumen se activa la acción principal. Este diseño brinda modularidad y flexibilidad para diseñar una buena experiencia. Esta API está diseñada para casos de uso de captura. El sistema envía eventos de captura solo a las apps que usan activamente la cámara. Esta API anula el comportamiento predeterminado del botón físico, por lo que las apps siempre deben responder a cualquier evento recibido. Si no se gestionan los eventos, el botón no funciona y brinda una mala experiencia.
Las apps de captura en segundo plano, o que no tienen una AVCaptureSession activa, no recibirán eventos. Al presionar cualquier botón, se activa la acción predeterminada del sistema, como ajustar el volumen o iniciar la cámara.
Aunque AVCaptureEventInteraction es una API creada para UIKit, los desarrolladores de SwiftUI pueden acceder a ella con onCameraCaptureEvent. Adoptar cualquiera de ellas resulta en el mismo comportamiento.
Ahora que la entendemos, hagamos una app que use el modificador de vista onCameraCaptureEvent para tomar fotos con botones físicos. Primero, comencemos por crear la IU para nuestra app de cámara. Incluyamos CameraView que muestra la salida de la cámara en la pantalla.
Ahora agreguemos un botón a la vista, para que los usuarios puedan tomar fotos. Conectaremos este botón a CameraModel, para que al tocarlo se active la captura de la foto.
Tenemos una vista funcional que toma fotos cuando se presiona el botón en pantalla. Pero al presionar cualquier botón físico se activarán acciones del sistema. Vamos a configurar estos botones físicos para que sean específicos de la cámara con la API que vimos. Primero, importamos la estructura AVKit. Adjuntamos onCameraCaptureEvent a CameraView y, si finaliza la fase del evento, tomamos una fotografía.
¡Es así de simple! Con seis líneas de código, habilitamos los botones físicos de la misma manera intuitiva que en la cámara integrada. Ese es el poder de aprovechar la API de controles de captura. Este año, AVCaptureEventInteraction también admitirá acciones primarias en cualquiera de los AirPods con chip H2. Esto permite capturar de forma remota sin necesidad de interactuar con el teléfono.
Para quienes ya adoptaron la API, esta funcionalidad será gratis con iOS 26.
Veamos esta nueva funcionalidad en acción. Primero me pondré mi AirPod derecho y luego el izquierdo.
¡Me veo bien!
Para configurar los AirPods, vamos a Configuración
y a Control remoto de cámara.
Aquí podemos elegir qué tipo de clic activa la captura. Elegiré la opción Presionar una vez.
Ahora, volvamos a la app de la cámara.
Retrocederé unos pasos y tomaré una foto haciendo clic.
Genial, ahora puedo controlar mi cámara sin tocar el dispositivo.
Como usamos los AirPods, la respuesta por audio es esencial. Los usuarios pueden no mirar la pantalla, pero necesitan confirmación.
Por eso presentamos una API para controlar la reproducción de sonido, para los AirPods. Si un evento de captura se activa por algo que no es un AirPod, AVCaptureEventInteraction no permite el control de la respuesta por sonido.
Agregamos un tono predeterminado para los AirPods de modo que los usuarios puedan disfrutar de esta funcionalidad.
Pero es posible que este sonido no sea el mejor para tu caso. Puedes personalizar la reproducción del sonido con tu propio sonido dentro del paquete de la app.
Volvamos a la app, específicamente al modificador de vista .onCameraCaptureEvent. En iOS 26, si dejamos este código sin cambios, los usuarios escuchan el sonido predeterminado. Como esta es una app para tomar fotos, es posible que ese sonido no sea apropiado.
Para ajustar el sonido de captura, debemos deshabilitar el predeterminado con defaultSoundDisabled.
Si se necesita respuesta por audio, reproducimos el sonido cameraShutter con playSound en el objeto de evento. La propiedad shouldPlaySound solo será verdadera si la acción de captura se activó mediante un clic del AirPod.
En pocas palabras, AVCaptureEventInteraction facilita el desarrollo de experiencias de cámara de alta calidad. Vimos las funcionalidades de la API y las mejores prácticas para implementarla, incluida su mejora: una forma de controlar la captura de la cámara con clics en los AirPods. Ahora Nick hablará sobre AVCaptureControls. Hola, soy Nick Lupinetti. Soy ingeniero de software del equipo Camera Experience y te presento AVCaptureControl, una forma potente de transformar Control de Cámara en un componente físico en tu cámara.
Control de cámara es una herramienta para abrir la app, tomar fotos y hacer ajustes rápidos, todo sin mover el dedo.
Veamos esas tres funciones, comenzando con abrir la app. Para abrir tu app, Control de cámara necesita acceso incluso con el dispositivo bloqueado. Eso significa crear una extensión de captura de pantalla de bloqueo. Para más detalles, consulta la sesión sobre cómo crear una experiencia de cámara con pantalla de bloqueo.
Usar el Control de cámara como obturador para tu app es sencillo. Solo tienes que configurar una de las API que Vitaliy mostró antes, ¡y listo! El control de cámara ejecuta la misma devolución de llamada primaria que configuraste para los botones de volumen. Ahora, mi parte favorita: ajustar la configuración de la cámara. El control de cámara admite una presión ligera, como en un obturador tradicional, que activa una vista previa limpia para encuadrar y un ajuste deslizable. Se pueden seleccionar otras configuraciones presionando dos veces, deslizando Control de cámara y presionando de nuevo para confirmar.
En el nivel más alto, hay dos tipos de controles: reguladores para valores numéricos y selectores para elementos de una lista.
Los reguladores tienen dos versiones: continuos y discretos.
Los reguladores continuos pueden seleccionar cualquier valor numérico en un rango específico. iOS viene con un control regulador de zoom continuo. Admite toda la gama de factores de zoom entre el mínimo y el máximo recomendados. Los reguladores discretos también seleccionan valores numéricos: ya sea a partir de un conjunto explícito o mediante pasos fijos de un valor a otro. iOS incluye un regulador discreto para el sesgo de exposición, con pasos de un tercio entre más o menos 2, como en fotografía tradicional.
Los selectores, como los reguladores discretos, permiten selecciones finitas, pero están indexados. Cada índice corresponde a un estado con nombre, como “Encendido” y “Apagado” para el flash, o los estilos fotográficos de la app Cámara. Ahora que entendemos los tipos, veamos a las clases que los implementan. Los controles se definen en la estructura AVFoundation. AVCaptureControl es la clase base abstracta de la que heredan las demás.
Hay dos subclases definidas por el sistema que permiten a cualquier app replicar el comportamiento de la cámara integrada para zoom o sesgo de exposición. Por último, hay dos subclases genéricas, para reguladores, continuos o discretos y selectores, con comportamientos personalizables. Para adoptar controles en tu app, agregalos a una AVCaptureSession. El primer paso para configurar una sesión es crear un dispositivo de captura y agregarlo como entrada. Luego, se crean los controles definidos por el sistema, con una referencia al mismo dispositivo para que puedan controlar sus propiedades por ti. También se crean todos los controles con comportamientos definidos por la app y se agregan a la sesión.
Para que tu app responda al interactuar con el Control de cámara, hay un par de flujos a considerar. Los controles del sistema aplican valores del Control de cámara directamente al dispositivo configurado. No es necesario que configures videoZoomFactor o exposureTargetBias.
Pero es posible que tengas modelos o IU que necesiten actualizarse. Si ya usas la observación de valores clave, o KVO, para saber cuándo cambia la propiedad relevante, puedes seguir con el mismo.
Si no usas KVO, crea el control del sistema con un controlador de acción, que se ejecutará en el hilo principal cuando el valor cambie, para que puedas actualizar tu IU.
Los controles definidos se crean con una devolución de llamada de acción y se ejecutan en una cola especificada. Si tu control debe manejar ajustes de captura, puedes hacerlo de forma síncrona especificando la cola de ese estado. Luego, puedes actualizar tu IU en la cola principal.
Ahora podemos adoptar el control de cámara en la app que estoy creando con Vitaliy. Como agregó la interacción de captura, el control funciona como obturador para tomar fotos, sin código adicional.
Pero también me gustaría acercar y alejar la imagen con el Control de cámara, así que vamos a agregar eso.
Aquí es donde estamos configurando nuestra sesión de captura para usar un dispositivo. Primero veremos si los controles están disponibles, ya que solo existen en dispositivos con Control de cámara.
Los controles del sistema son tan fáciles de crear que solo se necesita una línea de código.
Antes de agregar tu control, asegúrate de que la sesión lo acepte. No puedes agregar un control de zoom del sistema para un dispositivo ya asociado con un control de zoom. Por último, agregamos el control a la sesión.
Así de fácil hicimos que el zoom funcione en la app con Control de cámara. Pero hay un problema. También admite el gesto de pellizcar para hacer zoom. Después de hacer zoom con el Control de cámara, la IU no estaba actualizada, por lo que pellizcar volvió a ser un factor de zoom obsoleto. Pero eso tiene fácil solución. Crearemos el regulador con un cierre de acción, que recibe el factor de zoom como argumento. El nuevo valor se aplica a la IU con una devolución de llamada delegada o una propiedad de modelo observable.
Una vez sincronizado el modelo detrás del gesto de pellizcar, puedo hacer zoom con Control de cámara y el pellizco parte del nivel de zoom correcto.
Ahora quiero agregar un control que no viene incluido por defecto. Pero antes de crear el nuestro, pensemos qué es lo que hace que un control sea bueno. Control de cámara está hecho para usarse con la cámara del iPhone, por lo que debería afectar la apariencia o la experiencia de la captura. Esto genera confusión si los controles afectan áreas no relacionadas de tu app. No inicies una sesión de captura solo para usar Control de cámara, ya que hay requerimientos de energía y privacidad que conviene dejar para la captura. Un buen ejemplo de control personalizado es un selector de efectos o filtros que admita tu app.
Un control de este tipo debe operar más cerca de la captura que de la IU. Entonces veamos cómo se ve. Partiendo del código que escribimos haremos que el control de zoom sea uno más. Hay un límite en la cantidad de controles que puedes agregar, informado por maxControlsCount. canAddControl devolverá “false” cuando alcance el límite. Ahora podemos definir nuestros efectos. Tus efectos pueden procesarse en una cola dedicada con búferes de video, pero en nuestra app usaré los efectos de reacción introducidos en iOS 17. Creamos una lista ordenada de efectos, y sus nombres, a partir del conjunto desordenado disponible. El selector se inicializa con los nombres de los efectos que mostrará al recorrer las opciones. El Selector también necesita un nombre, así como una imagen de SF Symbols, para distinguirlo del control de zoom. Es una buena idea deshabilitar tu control cuando no es compatible, en lugar de omitirlo. Así todavía es visible, pero no es interactivo. Si no, se seleccionará otro control como opción por defecto, y la gente se preguntará qué pasó.
Cuando los usuarios cambien el índice del selector, ejecutaremos la reacción. Dirigimos la acción a la cola de sesión, que es el contexto de aislamiento para administrar el dispositivo. Solo falta agregar el selector al conjunto de controles. ¡Veamos cómo lo hicimos!
Cuando interactúo con el Control de Cámara, mira cómo el zoom está desactivado. Cambiemos el control. Deslizo hacia afuera en la superposición y ahora puedo ver mi selector en la lista. Me desplazo hasta él y presiono para mostrar sus opciones. Ahora puedo seleccionar un efecto por vez y ver cómo se reproducen en la vista previa.
¡A romperla!
Con lo que Vitaliy y yo te mostramos, tienes herramientas para crear una cámara de primer nivel.
Vimos cómo capturar contenido con botones físicos en dispositivos iOS y lo simple que es con AirPods en iOS 26.
Aprendimos cómo aprovechar el Control de cámara como una herramienta para potenciar las interacciones de captura. Hay más recursos en developer.apple.com, como las Guías de interfaz humana, guías para probar funcionalidades con AirPods y ejemplos para adoptar Control de cámara. No puedo esperar a que crees una cámara que capte la atención. ¡Gracias por acompañarnos!

import SwiftUI

struct PhotoCapture: View {
    var body: some View {
        VStack {
            CameraView()
        }
    }
}

5:37 - Connecting a button to the camera model

import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

6:10 - Importing AVKit

import AVKit
import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

6:14 - Setting up onCameraCaptureEvent view modifier

import AVKit
import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            .onCameraCaptureEvent { event in
                if event.phase == .ended {
                   camera.capturePhoto()
                }
            }
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

8:53 - Default sound for onCameraCaptureEvent view modifier

.onCameraCaptureEvent { event
	if event.phase == .ended {
   	camera.capturePhoto() 
  }
}

9:13 - Play photo shutter sound on AirPod stem click

.onCameraCaptureEvent(defaultSoundDisabled: true) { event in
    if event.phase == .ended {a
        if event.shouldPlaySound {d
            event.play(.cameraShutter)
        }
    }
    camera.capturePhoto()
 }

14:46 - Add a build-in zoom slider to Camera Control

captureSession.beginConfiguration()

// configure device inputs and outputs

if captureSession.supportsControls {
    let zoomControl = AVCaptureSystemZoomSlider(device: device)

    if captureSession.canAddControl(zoomControl) {
        captureSession.addControl(zoomControl)
    }
}

captureSession.commitConfiguration()

15:40 - Modifying the built-in zoom slider to receive updates when zoom changes

let zoomControl = AVCaptureSystemZoomSlider(device: device) { [weak self] zoomFactor in
    self?.updateUI(zoomFactor: zoomFactor)
}

16:46 - Adding a custom reaction-effects picker alongside zoom slider

let reactions = device.availableReactionTypes.sorted { $0.rawValue < $1.rawValue }
let titles = reactions.map { localizedTitle(reaction: $0) }
let picker = AVCaptureIndexPicker(“Reactions", symbolName: “face.smiling.inverted”,
    localizedIndexTitles: titles)

picker.isEnabled = device.canPerformReactionEffects
picker.setActionQueue(sessionQueue) { index in
    device.performEffect(for: reactions[index])
}

let controls: [AVCaptureControl] = [zoomControl, picker]

for control in controls {
    if captureSession.canAddControl(control) {
        captureSession.addControl(control)
    }
}

- 0:00 - Introducción
- Obtén más información sobre el uso de AVKit y AVFoundation para mejorar las interacciones del usuario en las apps de cámara. Ahora puedes asignar mediante programación gestos de botones físicos, como “subir y bajar” el volumen, a acciones de la cámara, lo que permite a las personas hacer fotos e iniciar la grabación de video con los botones del teléfono. Una nueva función de iOS 26 es el control remoto de la cámara con AirPods. Obtén información sobre los botones físicos compatibles, cómo usar la API AVCaptureEventInteraction y una descripción general de Control de cámara en el iPhone 16.
- 2:51 - Captura física
- AVCaptureEventInteraction es compatible con el botón de acción; los detalles de configuración se pueden encontrar en la sesión del año pasado Extiende los controles de tu app a través del sistema.
- 3:01 - Manejo de eventos
- AVCaptureEventInteraction es una API que te permite controlar el ciclo de vida de las pulsaciones de botones físicos dentro de las apps de la cámara. Proporciona tres fases de eventos: “comenzó”, “canceló” y “finalizó”. Esta fase "finalizó" en la que el objeto de la cámara debe iniciar la captura. La API distingue entre acciones principales y secundarias, activadas por botones específicos (bajar volumen, Acción, Control de cámara para la principal; subir el volumen para la secundaria). Este diseño permite modularidad y flexibilidad en el diseño de las apps. Los desarrolladores de SwiftUI pueden acceder a esta funcionalidad a través del modificador de vista “onCameraCaptureEvent”. Al importar la estructura de AVKit y adjuntar este modificador a CameraView, puedes habilitar la captura de fotos con botones físicos en solo unas pocas líneas de código, imitando el comportamiento de la app integrada Cámara.
- 6:39 - Captura remota con AirPods
- A partir de iOS 26, los AirPods equipados con el chip H2 permitirán el control remoto de la cámara mediante clics del vástago. Los usuarios pueden configurar esta función en la app Ajustes y elegir qué acción de clic activa la captura de fotos. Se introdujo una nueva API para proporcionar comentarios de audio para estos clics de plicas, con un tono predeterminado, aunque puedes personalizar este sonido para tus apps específicas. Esta mejora permite a las personas capturar momentos con las manos libres y garantiza la confirmación de sus comandos mediante señales de audio.
- 10:00 - Control de Cámara
- AVCaptureControl es una función nueva del iPhone 16 que permite crear controles físicos de hardware para las interfaces de la cámara. Permite a las personas iniciar apps de la cámara y ajustar la configuración rápidamente y puede actuar como un botón del obturador. El control admite dos tipos principales de ajustes: reguladores (continuos o discretos) para valores numéricos y selectores para elementos de una lista. Estos controles se definen en la estructura AVFoundation. Puedes añadir controles definidos por el sistema para el zoom o la exposición, o crear controles personalizados con comportamientos definidos por la app. Estos controles se añaden a una AVCaptureSession y la app responde a las interacciones a través de controladores de acciones o de observación de valores clave (KVO) y actualiza la IU en consecuencia. Para mejorar la funcionalidad de la app Cámara, utiliza Control de cámara para añadir fácilmente controles proporcionados por el sistema, como el zoom, que solo requiere una línea de código. Sin embargo, es fundamental asegurarse de que la sesión acepte el control y sincronizar la IU con el estado del control para evitar problemas como factores de zoom obsoletos. Al crear controles personalizados, ten en cuenta que Control de cámara está diseñado específicamente para capturar experiencias. Un buen ejemplo de control personalizado es un selector que permite a las personas seleccionar efectos o filtros. Este control debe funcionar más cerca de la sesión de captura que la IU. Puedes definir efectos, inicializar el selector con nombres de efecto y desactivar el control cuando no sea compatible. Al dirigir la acción a la cola de sesiones, puedes garantizar el aislamiento y la gestión adecuados del dispositivo. Con los Controles de captura puedes crear apps de cámara de primer nivel que capten la atención de las personas.

Capítulos

Recursos

Videos relacionados

WWDC24

WWDC23