Guide de reconnaissance des gestes pour iOS

La tâche de reconnaissance des gestes MediaPipe vous permet de reconnaître les gestes de la main en temps réel et fournit les résultats de reconnaissance des gestes de la main et les repères de la main des mains détectées. Ces instructions vous expliquent comment utiliser le détecteur de gestes avec des applications iOS.

Pour voir cette tâche en action, consultez la démo Web. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la présentation.

Exemple de code

L'exemple de code MediaPipe Tasks est une implémentation de base d'une application de reconnaissance gestuelle pour iOS. L'exemple utilise l'appareil photo d'un appareil iOS physique pour détecter en continu les gestes des mains. Il peut également utiliser des images et des vidéos de la galerie de l'appareil pour détecter de manière statique les gestes.

Vous pouvez utiliser l'application comme point de départ pour votre propre application iOS ou vous y référer lorsque vous modifiez une application existante. L'exemple de code de la reconnaissance de gestes est hébergé sur GitHub.

Télécharger le code

Les instructions suivantes vous expliquent comment créer une copie locale de l'exemple de code à l'aide de l'outil de ligne de commande git.

Pour télécharger l'exemple de code:

1. Clonez le dépôt Git à l'aide de la commande suivante :

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

2. Vous pouvez également configurer votre instance git pour qu'elle utilise un "checkout" clairsemé afin de n'avoir que les fichiers de l'application exemple du détecteur de gestes:

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

Après avoir créé une version locale de l'exemple de code, vous pouvez installer la bibliothèque de tâches MediaPipe, ouvrir le projet à l'aide de Xcode et exécuter l'application. Pour obtenir des instructions, consultez le guide de configuration pour iOS.

Composants clés

Les fichiers suivants contiennent le code essentiel de l'application exemple de détecteur de gestes:

• GestureRecognizerService.swift: initialise le détecteur de gestes, gère la sélection du modèle et exécute l'inférence sur les données d'entrée.
• CameraViewController.swift: implémente l'UI pour le mode d'entrée du flux vidéo en direct de la caméra et visualise les résultats.
• MediaLibraryViewController.swift: implémente l'UI pour le mode d'importation d'images fixes et de fichiers vidéo, et visualise les résultats.

Configuration

Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement et vos projets de code afin d'utiliser le Gesture Recognizer. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour utiliser les tâches MediaPipe, y compris les exigences concernant les versions de la plate-forme, consultez le guide de configuration pour iOS.

Dépendances

La reconnaissance de gestes utilise la bibliothèque MediaPipeTasksVision, qui doit être installée à l'aide de CocoaPods. La bibliothèque est compatible avec les applications Swift et Objective-C, et ne nécessite aucune configuration supplémentaire spécifique à la langue.

Pour savoir comment installer CocoaPods sur macOS, consultez le guide d'installation de CocoaPods. Pour savoir comment créer un Podfile avec les pods nécessaires à votre application, consultez la section Utiliser CocoaPods.

Ajoutez le pod MediaPipeTasksVision dans Podfile à l'aide du code suivant:

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

Si votre application inclut des cibles de test unitaire, consultez le guide de configuration pour iOS pour en savoir plus sur la configuration de votre Podfile.

Modèle

La tâche de reconnaissance de gestes MediaPipe nécessite un modèle entraîné compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour le détecteur de gestes, consultez la section Modèles de la présentation de la tâche.

Sélectionnez et téléchargez un modèle, puis ajoutez-le au répertoire de votre projet à l'aide de Xcode. Pour savoir comment ajouter des fichiers à votre projet Xcode, consultez Gérer les fichiers et les dossiers dans votre projet Xcode.

Utilisez la propriété BaseOptions.modelAssetPath pour spécifier le chemin d'accès au modèle dans votre app bundle. Pour obtenir un exemple de code, consultez la section suivante.

Créer la tâche

Vous pouvez créer la tâche du détecteur de gestes en appelant l'un de ses initialiseurs. L'initialiseur GestureRecognizer(options:) accepte les valeurs des options de configuration.

Si vous n'avez pas besoin d'un outil de reconnaissance de gestes initialisé avec des options de configuration personnalisées, vous pouvez utiliser l'initialiseur GestureRecognizer(modelPath:) pour créer un outil de reconnaissance de gestes avec les options par défaut. Pour en savoir plus sur les options de configuration, consultez la section Présentation de la configuration.

La tâche de reconnaissance des gestes accepte trois types de données d'entrée: les images fixes, les fichiers vidéo et les flux vidéo en direct. Par défaut, GestureRecognizer(modelPath:) initialise une tâche pour les images fixes. Si vous souhaitez que votre tâche soit initialisée pour traiter des fichiers vidéo ou des flux vidéo en direct, utilisez GestureRecognizer(options:) pour spécifier le mode d'exécution de la vidéo ou de la diffusion en direct. Le mode diffusion en direct nécessite également l'option de configuration gestureRecognizerLiveStreamDelegate supplémentaire, qui permet à l'outil de reconnaissance de gestes de fournir des résultats de reconnaissance de gestes au délégué de manière asynchrone.

Choisissez l'onglet correspondant à votre mode d'exécution pour découvrir comment créer la tâche et exécuter l'inférence.

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];
    

Options de configuration

Cette tâche propose les options de configuration suivantes pour les applications iOS :

Lorsque le mode d'exécution est défini sur "streaming en direct", le service de reconnaissance des gestes nécessite l'option de configuration gestureRecognizerLiveStreamDelegate supplémentaire, qui lui permet de fournir des résultats de reconnaissance des gestes de manière asynchrone. Le délégué doit implémenter la méthode gestureRecognizer(_:didFinishRecognition:timestampInMilliseconds:error:), que le Gesture Recognizer appelle après avoir traité les résultats de la reconnaissance des gestes sur chaque frame.

Préparer les données

Vous devez convertir l'image ou le frame d'entrée en objet MPImage avant de le transmettre au détecteur de gestes. MPImage est compatible avec différents types de formats d'images iOS et peut les utiliser dans n'importe quel mode d'exécution pour l'inférence. Pour plus d'informations sur MPImage, reportez-vous à l'API MPImage.

Choisissez un format d'image iOS en fonction de votre cas d'utilisation et du mode d'exécution requis par votre application.MPImage accepte les formats d'image iOS UIImage, CVPixelBuffer et CMSampleBuffer.

UIImage

Le format UIImage est adapté aux modes d'exécution suivants :

• Images: les images d'un bundle d'application, d'une galerie utilisateur ou d'un système de fichiers au format UIImage peuvent être converties en objet MPImage.

• Vidéos : utilisez AVAssetImageGenerator pour extraire les images vidéo au format CGImage, puis les convertir en images 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];
    

L'exemple initialise un MPImage avec l'orientation par défaut UIImage.Orientation.Up. Vous pouvez initialiser un MPImage avec l'une des valeurs UIImage.Orientation acceptées. Le lecteur de gestes n'est pas compatible avec les orientations en miroir telles que .upMirrored, .downMirrored, .leftMirrored et .rightMirrored.

Pour plus d'informations sur UIImage, consultez la documentation pour les développeurs Apple sur UIImage.

CVPixelBuffer

Le format CVPixelBuffer est adapté aux applications qui génèrent des frames et utilisent le framework CoreImage iOS pour le traitement.

Le format CVPixelBuffer est adapté aux modes d'exécution suivants :

• Images: les applications qui génèrent des images CVPixelBuffer après un traitement à l'aide du framework CoreImage d'iOS peuvent être envoyées à l'outil de reconnaissance de gestes en mode d'exécution d'images.

• Vidéos: les images vidéo peuvent être converties au format CVPixelBuffer à des fins de traitement, puis envoyées à l'outil de reconnaissance de gestes en mode vidéo.

• Diffusion en direct: les applications qui utilisent un appareil photo iOS pour générer des images peuvent être converties au format CVPixelBuffer à des fins de traitement avant d'être envoyées à l'outil de reconnaissance de gestes en mode diffusion en direct.

// 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];
    

Pour en savoir plus sur CVPixelBuffer, consultez la documentation pour les développeurs Apple sur CVPixelBuffer.

CMSampleBuffer

Le format CMSampleBuffer stocke des échantillons multimédias d'un type multimédia uniforme et convient parfaitement au mode d'exécution de la diffusion en direct. Les images en direct des caméras iOS sont transmises de manière asynchrone au format CMSampleBuffer par AVCaptureVideoDataOutput sur iOS.

// 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];
    

Pour en savoir plus sur CMSampleBuffer, consultez la documentation pour les développeurs Apple CMSampleBuffer.

Exécuter la tâche

Pour exécuter le détecteur de gestes, utilisez la méthode recognize() spécifique au mode d'exécution attribué:

• Image fixe : recognize(image:)
• Vidéo : recognize(videoFrame:timestampInMilliseconds:)
• Diffusion en direct : recognizeAsync(image:timestampInMilliseconds:)

Les exemples de code suivants montrent comment exécuter le détecteur de gestes dans ces différents modes d'exécution:

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];
    

L'exemple de code permet à l'utilisateur de basculer entre les modes de traitement, ce qui n'est peut-être pas nécessaire pour votre cas d'utilisation.

Veuillez noter les points suivants :

• Lorsque vous exécutez le mode vidéo ou le mode diffusion en direct, vous devez également fournir le code temporel du frame d'entrée à la tâche de reconnaissance des gestes.

• Lorsqu'elle s'exécute en mode image ou vidéo, la tâche du détecteur de gestes bloque le thread actuel jusqu'à ce qu'elle ait terminé de traiter l'image ou le frame d'entrée. Pour éviter de bloquer le thread actuel, exécutez le traitement dans un thread en arrière-plan à l'aide des frameworks iOS Dispatch ou NSOperation.

• En mode diffusion en direct, la tâche du détecteur de gestes renvoie immédiatement et ne bloque pas le thread actuel. Il appelle la méthode gestureRecognizer(_:didFinishRecognition:timestampInMilliseconds:error:) avec le résultat de la reconnaissance des gestes après avoir traité chaque frame d'entrée. Le détecteur de gestes appelle cette méthode de manière asynchrone sur une file d'attente de distribution série dédiée. Pour afficher les résultats sur l'interface utilisateur, distribuez les résultats à la file d'attente principale après leur traitement. Si la fonction recognizeAsync est appelée lorsque la tâche du détecteur de gestes est occupée à traiter un autre frame, le détecteur de gestes ignore le nouveau frame d'entrée.

Gérer et afficher les résultats

Lors de l'exécution de l'inférence, la tâche de reconnaissance des gestes renvoie un GestureRecognizerResult contenant des repères de la main en coordonnées d'image, des repères de la main en coordonnées mondiales, la latéralité(main gauche/droite) et les catégories de gestes de la main des mains détectées.

Voici un exemple des données de sortie de cette tâche :

Le résultat GestureRecognizerResult contient quatre composants, chacun sous la forme d'un tableau, où chaque élément contient le résultat détecté par une seule main détectée.

• Main dominante

  La maniabilité indique si les mains détectées sont des mains gauches ou droites.

• Gestes

  Catégories de gestes reconnues pour les mains détectées.

• Points de repère

  Il existe 21 repères de la main, chacun composé de coordonnées x, y et z. Les coordonnées x et y sont normalisées à [0,0, 1,0] par la largeur et la hauteur de l'image, respectivement. La coordonnée z représente la profondeur du repère, la profondeur au poignet étant l'origine. Plus la valeur est faible, plus le point de repère est proche de la caméra. L'ampleur de z utilise à peu près la même échelle que x.

• Monuments mondiaux

  Les 21 repères de la main sont également présentés en coordonnées mondiales. Chaque repère est composé de x, y et z, qui représentent des coordonnées 3D réelles en mètres, avec l'origine au centre géométrique de la main.

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)

Les images suivantes illustrent le résultat de la tâche: