Guía de reconocimiento de gestos para iOS

La tarea del Reconocedor de gestos de MediaPipe te permite reconocer gestos manuales en tiempo real y proporciona los resultados reconocidos de los gestos manuales y los puntos de referencia de las manos detectadas. En estas instrucciones, se muestra cómo usar el Reconocedor de gestos con aplicaciones para iOS.

Para ver esta tarea en acción, consulta la demo web. Si quieres obtener más información sobre las funciones, los modelos y las opciones de configuración de esta tarea, consulta la descripción general.

Ejemplo de código

El código de ejemplo de MediaPipe Tasks es una implementación básica de una app de Gesture Recognizer para iOS. En el ejemplo, se usa la cámara de un dispositivo iOS físico para detectar gestos de la mano de forma continua y también se pueden usar imágenes y videos de la galería del dispositivo para detectar gestos de forma estática.

Puedes usar la app como punto de partida para tu propia app para iOS o hacer referencia a ella cuando modifiques una app existente. El código de ejemplo del Reconocedor de gestos se aloja en GitHub.

Descarga el código

En las siguientes instrucciones, se muestra cómo crear una copia local del código de ejemplo con la herramienta de línea de comandos git.

Para descargar el código de ejemplo, sigue estos pasos:

1. Clona el repositorio de git con el siguiente comando:

   git clone https://github.com/google-ai-edge/mediapipe-samples
   

2. De manera opcional, configura tu instancia de git para usar el control de revisión disperso, de modo que solo tengas los archivos de la app de ejemplo de Gesture Recognizer:

   cd mediapipe
   git sparse-checkout init --cone
   git sparse-checkout set examples/gesture_recognizer/ios/
   

Después de crear una versión local del código de ejemplo, puedes instalar la biblioteca de tareas de MediaPipe, abrir el proyecto con Xcode y ejecutar la app. Para obtener instrucciones, consulta la Guía de configuración para iOS.

Componentes clave

Los siguientes archivos contienen el código fundamental de la aplicación de ejemplo del Reconocedor de gestos:

• GestureRecognizerService.swift: Inicializa el Gesto de reconocimiento, controla la selección del modelo y ejecuta la inferencia en los datos de entrada.
• CameraViewController.swift: Implementa la IU para el modo de entrada del feed de la cámara en vivo y visualiza los resultados.
• MediaLibraryViewController.swift: Implementa la IU para el modo de entrada de imagen estática y archivo de video, y visualiza los resultados.

Configuración

En esta sección, se describen los pasos clave para configurar el entorno de desarrollo y los proyectos de código a fin de usar el Reconocedor de gestos. Si deseas obtener información general sobre la configuración del entorno de desarrollo para usar tareas de MediaPipe, incluidos los requisitos de la versión de la plataforma, consulta la Guía de configuración para iOS.

Dependencias

El detector de gestos usa la biblioteca MediaPipeTasksVision, que se debe instalar con CocoaPods. La biblioteca es compatible con apps de Swift y Objective-C, y no requiere ninguna configuración adicional específica del lenguaje.

Para obtener instrucciones para instalar CocoaPods en macOS, consulta la guía de instalación de CocoaPods. Para obtener instrucciones sobre cómo crear un Podfile con los pods necesarios para tu app, consulta Cómo usar CocoaPods.

Agrega el pod MediaPipeTasksVision en Podfile con el siguiente código:

target 'MyGestureRecognizerApp' do
  use_frameworks!
  pod 'MediaPipeTasksVision'
end

Si tu app incluye objetivos de prueba de unidades, consulta la Guía de configuración para iOS para obtener información adicional sobre cómo configurar tu Podfile.

Modelo

La tarea de reconocimiento de gestos de MediaPipe requiere un modelo entrenado que sea compatible. Para obtener más información sobre los modelos entrenados disponibles para el Reconocedor de gestos, consulta la sección de modelos de la descripción general de la tarea.

Selecciona y descarga un modelo, y agrégalo al directorio de tu proyecto con Xcode. Para obtener instrucciones sobre cómo agregar archivos a tu proyecto de Xcode, consulta Cómo administrar archivos y carpetas en tu proyecto de Xcode.

Usa la propiedad BaseOptions.modelAssetPath para especificar la ruta de acceso al modelo en tu paquete de aplicación. Para ver un ejemplo de código, consulta la siguiente sección.

Crea la tarea

Para crear la tarea del Gestor de gestos, llama a uno de sus inicializadores. El inicializador GestureRecognizer(options:) acepta valores para las opciones de configuración.

Si no necesitas un Reconocedor de gestos que se inicialice con opciones de configuración personalizadas, puedes usar el inicializador GestureRecognizer(modelPath:) para crear un Reconocedor de gestos con las opciones predeterminadas. Para obtener más información sobre las opciones de configuración, consulta Descripción general de la configuración.

La tarea del Reconocedor de gestos admite 3 tipos de datos de entrada: imágenes fijas, archivos de video y transmisiones de video en vivo. De forma predeterminada, GestureRecognizer(modelPath:) inicializa una tarea para imágenes fijas. Si deseas que tu tarea se inicialice para procesar archivos de video o transmisiones de video en vivo, usa GestureRecognizer(options:) para especificar el modo de ejecución del video o la transmisión en vivo. El modo de transmisión en vivo también requiere la opción de configuración adicional gestureRecognizerLiveStreamDelegate, que permite que el Gestor de gestos entregue resultados de reconocimiento de gestos al delegado de forma asíncrona.

Elige la pestaña correspondiente a tu modo de ejecución para ver cómo crear la tarea y ejecutar la inferencia.

Swift

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "gesture_recognizer",
                                      ofType: "task")

let options = GestureRecognizerOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .image
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

let gestureRecognizer = try GestureRecognizer(options: options)
    

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "gesture_recognizer",
                                      ofType: "task")

let options = GestureRecognizerOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .video
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

let gestureRecognizer = try GestureRecognizer(options: options)
    

import MediaPipeTasksVision

// Class that conforms to the `GestureRecognizerLiveStreamDelegate` protocol and
// implements the method that the gesture recognizer calls once it finishes
// performing recognizing hand gestures in each input frame.
class GestureRecognizerResultProcessor: NSObject, GestureRecognizerLiveStreamDelegate {

  func gestureRecognizer(
    _ gestureRecognizer: GestureRecognizer,
    didFinishRecognition result: GestureRecognizerResult?,
    timestampInMilliseconds: Int,
    error: Error?) {

    // Process the gesture recognizer result or errors here.

  }
}

let modelPath = Bundle.main.path(
  forResource: "gesture_recognizer",
  ofType: "task")

let options = GestureRecognizerOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .liveStream
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

// Assign an object of the class to the `gestureRecognizerLiveStreamDelegate`
// property.
let processor = GestureRecognizerResultProcessor()
options.gestureRecognizerLiveStreamDelegate = processor

let gestureRecognizer = try GestureRecognizer(options: options)
    

Objective-C

@import MediaPipeTasksVision;

NSString *modelPath =
  [[NSBundle mainBundle] pathForResource:@"gesture_recognizer"
                                  ofType:@"task"];

MPPGestureRecognizerOptions *options =
  [[MPPGestureRecognizerOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeImage;
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

MPPGestureRecognizer *gestureRecognizer =
      [[MPPGestureRecognizer alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

NSString *modelPath =
  [[NSBundle mainBundle] pathForResource:@"gesture_recognizer"
                                  ofType:@"task"];

MPPGestureRecognizerOptions *options =
  [[MPPGestureRecognizerOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeVideo;
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

MPPGestureRecognizer *gestureRecognizer =
      [[MPPGestureRecognizer alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

// Class that conforms to the `MPPGestureRecognizerLiveStreamDelegate` protocol
// and implements the method that the gesture recognizer calls once it finishes
// performing gesture recognition on each input frame.

@interface APPGestureRecognizerResultProcessor : NSObject 

@end

@implementation APPGestureRecognizerResultProcessor

-   (void)gestureRecognizer:(MPPGestureRecognizer *)gestureRecognizer
    didFinishRecognitionWithResult:(MPPGestureRecognizerResult *)gestureRecognizerResult
           timestampInMilliseconds:(NSInteger)timestampInMilliseconds
                             error:(NSError *)error {

    // Process the gesture recognizer result or errors here.

}

@end

NSString *modelPath =
  [[NSBundle mainBundle] pathForResource:@"gesture_recognizer"
                                  ofType:@"task"];

MPPGestureRecognizerOptions *options =
  [[MPPGestureRecognizerOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeLiveStream;
options.minHandDetectionConfidence = minHandDetectionConfidence
options.minHandPresenceConfidence = minHandPresenceConfidence
options.minTrackingConfidence = minHandTrackingConfidence
options.numHands = numHands

// Assign an object of the class to the `gestureRecognizerLiveStreamDelegate`
// property.
APPGestureRecognizerResultProcessor *processor =
  [APPGestureRecognizerResultProcessor new];
options.gestureRecognizerLiveStreamDelegate = processor;

MPPGestureRecognizer *gestureRecognizer =
      [[MPPGestureRecognizer alloc] initWithOptions:options error:nil];
    

Opciones de configuración

Esta tarea tiene las siguientes opciones de configuración para apps para iOS:

Cuando el modo de ejecución se establece en transmisión en vivo, el Reconocedor de gestos requiere la opción de configuración adicional gestureRecognizerLiveStreamDelegate, que le permite entregar resultados de reconocimiento de gestos de forma asíncrona. El delegado debe implementar el método gestureRecognizer(_:didFinishRecognition:timestampInMilliseconds:error:), al que llama el Gestor de gestos después de procesar los resultados de realizar el reconocimiento de gestos en cada fotograma.

Preparar los datos

Debes convertir la imagen o el fotograma de entrada en un objeto MPImage antes de pasarlo al Reconocedor de gestos. MPImage admite diferentes tipos de formatos de imagen de iOS y puede usarlos en cualquier modo de ejecución para la inferencia. Para obtener más información sobre MPImage, consulta la API de MPImage.

Elige un formato de imagen de iOS según tu caso de uso y el modo de ejecución que requiere tu aplicación.MPImage acepta los formatos de imagen de iOS UIImage, CVPixelBuffer y CMSampleBuffer.

UIImage

El formato UIImage es adecuado para los siguientes modos de ejecución:

• Imágenes: Las imágenes de un paquete de aplicación, una galería de usuarios o un sistema de archivos con formato UIImage se pueden convertir en un objeto MPImage.

• Videos: Usa AVAssetImageGenerator para extraer fotogramas de video al formato CGImage y, luego, conviértelos en imágenes UIImage.

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(uiImage: image)
    

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

En el ejemplo, se inicializa un MPImage con la orientación predeterminada UIImage.Orientation.Up. Puedes inicializar un MPImage con cualquiera de los valores de UIImage.Orientation compatibles. El Reconocedor de gestos no admite orientaciones reflejadas, como .upMirrored, .downMirrored, .leftMirrored y .rightMirrored.

Para obtener más información sobre UIImage, consulta la documentación para desarrolladores de Apple sobre UIImage.

CVPixelBuffer

El formato CVPixelBuffer es adecuado para aplicaciones que generan fotogramas y usan el framework CoreImage de iOS para el procesamiento.

El formato CVPixelBuffer es adecuado para los siguientes modos de ejecución:

• Imágenes: Las apps que generan imágenes CVPixelBuffer después de un procesamiento con el framework CoreImage de iOS se pueden enviar al Reconocedor de gestos en el modo de ejecución de imágenes.

• Videos: Los fotogramas de video se pueden convertir al formato CVPixelBuffer para su procesamiento y, luego, enviarse al Reconocedor de gestos en modo de video.

• Transmisión en vivo: Es posible que las apps que usan una cámara para iOS para generar fotogramas se conviertan al formato CVPixelBuffer para su procesamiento antes de enviarlas al Reconocedor de gestos en modo de transmisión en vivo.

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(pixelBuffer: pixelBuffer)
    

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

Para obtener más información sobre CVPixelBuffer, consulta la Documentación para desarrolladores de Apple CVPixelBuffer.

CMSampleBuffer

El formato CMSampleBuffer almacena muestras de contenido multimedia de un tipo de contenido multimedia uniforme y es adecuado para el modo de ejecución de transmisiones en vivo. AVCaptureVideoDataOutput de iOS proporciona de forma asíncrona los fotogramas en vivo de las cámaras de iOS en el formato CMSampleBuffer.

// Obtain a CMSampleBuffer.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(sampleBuffer: sampleBuffer)
    

// Obtain a `CMSampleBuffer`.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithSampleBuffer:sampleBuffer error:nil];
    

Para obtener más información sobre CMSampleBuffer, consulta la documentación para desarrolladores de Apple de CMSampleBuffer.

Ejecuta la tarea

Para ejecutar el Gestor de gestos, usa el método recognize() específico del modo de ejecución asignado:

• Imagen fija: recognize(image:)
• Video: recognize(videoFrame:timestampInMilliseconds:)
• Transmisión en vivo: recognizeAsync(image:timestampInMilliseconds:)

En las siguientes muestras de código, se muestran ejemplos básicos de cómo ejecutar el Reconocedor de gestos en estos diferentes modos de ejecución:

Swift

let result = try gestureRecognizer.recognize(image: image)
    

let result = try gestureRecognizer.recognize(
  videoFrame: image,
  timestampInMilliseconds: timestamp)
    

try gestureRecognizer.recognizeAsync(
  image: image,
  timestampInMilliseconds: timestamp)
    

Objective-C

  MPPGestureRecognizerResult *result =
    [gestureRecognizer recognizeImage:mppImage
                                error:nil];
    

MPPGestureRecognizerResult *result =
  [gestureRecognizer recognizeVideoFrame:image
                 timestampInMilliseconds:timestamp
                                   error:nil];
    

BOOL success =
  [gestureRecognizer recognizeAsyncImage:image
                 timestampInMilliseconds:timestamp
                                   error:nil];
    

El código de ejemplo permite al usuario cambiar entre modos de procesamiento que pueden no ser necesarios para tu caso de uso.

Ten en cuenta lo siguiente:

• Cuando se ejecuta en modo de video o de transmisión en vivo, también debes proporcionar la marca de tiempo del fotograma de entrada a la tarea del Reconocedor de gestos.

• Cuando se ejecuta en modo de imagen o video, la tarea del Reconocedor de gestos bloquea el subproceso actual hasta que termina de procesar la imagen o el fotograma de entrada. Para evitar bloquear el subproceso actual, ejecuta el procesamiento en un subproceso en segundo plano con los frameworks Dispatch o NSOperation de iOS.

• Cuando se ejecuta en el modo de transmisión en vivo, la tarea del detector de gestos se muestra de inmediato y no bloquea el subproceso actual. Invoca el método gestureRecognizer(_:didFinishRecognition:timestampInMilliseconds:error:) con el resultado del reconocimiento de gestos después de procesar cada fotograma de entrada. El Gestor de gestos invoca este método de forma asíncrona en una cola de envío serie dedicada. Para mostrar los resultados en la interfaz de usuario, envíalos a la cola principal después de procesarlos. Si se llama a la función recognizeAsync cuando la tarea del reconocedor de gestos está ocupada procesando otro fotograma, este ignorará el nuevo marco de entrada.

Cómo controlar y mostrar los resultados

Cuando se ejecuta la inferencia, la tarea del Reconocedor de gestos muestra un GestureRecognizerResult que contiene puntos de referencia de la mano en coordenadas de imagen, puntos de referencia de la mano en coordenadas globales, lateralidad(mano izquierda o derecha) y categorías de gestos de la mano de las manos detectadas.

A continuación, se muestra un ejemplo de los datos de resultado de esta tarea:

El GestureRecognizerResult resultante contiene cuatro componentes, y cada componente es un array, en el que cada elemento contiene el resultado detectado de una sola mano detectada.

• Lateralidad

  La mano dominante indica si las manos detectadas son izquierda o derecha.

• Gestos

  Las categorías de gestos reconocidas de las manos detectadas.

• Puntos de referencia

  Hay 21 puntos de referencia de la mano, cada uno compuesto por coordenadas x, y y z. Las coordenadas x y y se normalizan a [0.0, 1.0] según el ancho y la altura de la imagen, respectivamente. La coordenada z representa la profundidad del punto de referencia, y la profundidad en la muñeca es el origen. Cuanto menor sea el valor, más cerca estará el punto de referencia de la cámara. La magnitud de z usa aproximadamente la misma escala que x.

• Monumentos universales

  Los 21 puntos de referencia de la mano también se presentan en coordenadas mundiales. Cada punto de referencia se compone de x, y y z, que representan coordenadas 3D del mundo real en metros con el origen en el centro geométrico de la mano.

GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

En las siguientes imágenes, se muestra una visualización del resultado de la tarea: