Une introduction à la détection de visage sur Android

() translation by (you can also view the original English article)

Introduite avec les bibliothèques Vision dans Play Services 8.1, la détection de visage vous permet, en tant que développeur, d'analyser facilement une vidéo ou une image afin de localiser des visages humains. Une fois que vous avez une liste de visages détectés sur une image, vous pouvez collecter des informations sur chaque visage, telles que l'orientation, la probabilité de sourire, si une personne a les yeux ouverts ou fermés et des repères spécifiques sur son visage.

Ces informations peuvent être utiles pour plusieurs applications, telles qu'une application appareil photo qui prend automatiquement une photo lorsque tout le monde dans le cadre sourit les yeux ouverts ou pour augmenter les images avec des effets stupides, tels que des cornes de licorne. Il est important de noter que la détection de visage n'est pas une reconnaissance faciale. Bien que des informations puissent être collectées sur un visage, ces informations ne sont pas utilisées par la bibliothèque Vision pour déterminer si deux visages proviennent de la même personne.

Ce tutoriel utilisera une image fixe pour exécuter l'API de détection de visage et collecter des informations sur les personnes figurant sur la photo, tout en illustrant ces informations avec des graphiques superposés. Tout le code de ce tutoriel est disponible sur GitHub.

Example of a silly effect adding a unicorn horn to a face

1. Configuration du projet

Pour ajouter la bibliothèque Vision à votre projet, vous devez importer Play Services 8.1 ou une version ultérieure dans votre projet. Ce didacticiel importe uniquement la bibliothèque Play Services Vision. Ouvrez le fichier build.gradle de votre projet et ajoutez la ligne de compilation suivante au nœud des dépendances.

1	compile 'com.google.android.gms:play-services-vision:8.1.0'

Une fois que vous avez inclus Play Services dans votre projet, vous pouvez fermer le fichier build.gradle de votre projet et ouvrir AndroidManifest.xml. Vous devez ajouter une meta-data définissant la dépendance de face sous le nœud application de votre manifeste. Cela permet à la bibliothèque Vision de savoir que vous prévoyez de détecter les visages dans votre application.

1	<meta-data android:name="com.google.android.gms.vision.DEPENDENCIES" android:value="face"/>

Une fois que vous avez fini de configurer AndroidManifest.xml, vous pouvez y aller et le fermer. Ensuite, vous devez créer une nouvelle classe nommée FaceOverlayView.java. Cette classe étend View et contient la logique permettant de détecter les visages dans le projet, d'afficher le bitmap analysé et de dessiner au-dessus de l'image pour illustrer des points.

Pour l'instant, commencez par ajouter les variables membres en haut de la classe et en définissant les constructeurs. L'objet Bitmap sera utilisé pour stocker le bitmap qui sera analysé et les objets SparseArray of Face stockeront chaque visage trouvé dans le bitmap.

public class FaceOverlayView extends View {

    private Bitmap mBitmap;
    private SparseArray<Face> mFaces;

    public FaceOverlayView(Context context) {
        this(context, null);
    }

    public FaceOverlayView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FaceOverlayView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

Ensuite, ajoutez une nouvelle méthode à l'intérieur de FaceOverlayView appelée setBitmap (Bitmap bitmap). Pour l'instant, cela va simplement sauvegarder le bitmap qui lui est passé, mais vous utiliserez plus tard cette méthode pour analyser l'image.

1	public void setBitmap( Bitmap bitmap ) {
2	mBitmap = bitmap;
3	}

Ensuite, vous avez besoin d'un bitmap. J'en ai inclus un dans l'exemple de projet sur GitHub, mais vous pouvez utiliser l'image de votre choix pour jouer avec la détection de visage et voir ce qui fonctionne et ce qui ne fonctionne pas. Lorsque vous avez sélectionné une image, placez-la dans le répertoire res / raw. Ce tutoriel supposera que l'image s'appelle face.jpg.

Après avoir placé votre image dans le répertoire res / raw, ouvrez res / layout / activity_main.xml. Cette présentation contient une référence à FaceOverlayView afin qu’elle soit affichée dans MainActivity.

<?xml version="1.0" encoding="utf-8"?>
<com.tutsplus.facedetection.FaceOverlayView
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/face_overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

La disposition étant définie, ouvrez MainActivity et configurez FaceOverlayView à partir de onCreate (). Pour ce faire, vous obtenez une référence à la vue, lisez le fichier image face.jpg du répertoire raw en tant que flux d'entrée et convertissez-le en bitmap. Une fois que vous avez la bitmap, vous pouvez appeler setBitmap sur FaceOverlayView pour transmettre l'image à votre vue personnalisée.

public class MainActivity extends AppCompatActivity {

    private FaceOverlayView mFaceOverlayView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mFaceOverlayView = (FaceOverlayView) findViewById( R.id.face_overlay );

        InputStream stream = getResources().openRawResource( R.raw.face );
        Bitmap bitmap = BitmapFactory.decodeStream(stream);

        mFaceOverlayView.setBitmap(bitmap);

    }
}

2. Détecter les visages

Maintenant que votre projet est configuré, il est temps de commencer à détecter les visages. Dans setBitmap (bitmap bitmap), vous devez créer un FaceDetector. Cela peut être fait en utilisant un FaceDetector.Builder, vous permettant de définir plusieurs paramètres qui affectent la rapidité avec laquelle les visages seront détectés et les autres données que FaceDetector générera.

Les paramètres que vous choisissez dépendent de ce que vous essayez de faire dans votre application. Si vous activez la recherche de points de repère, les visages seront détectés plus lentement. Comme avec la plupart des choses dans la programmation, tout a ses compromis. Pour en savoir plus sur les options disponibles pour FaceDetector.Builder, vous pouvez trouver la documentation officielle sur le site Web du développeur Android.

FaceDetector detector = new FaceDetector.Builder( getContext() )
        .setTrackingEnabled(false)
        .setLandmarkType(FaceDetector.ALL_LANDMARKS)
        .setMode(FaceDetector.FAST_MODE)
        .build();

Vous devez également vérifier si le FaceDetector est opérationnel. Lorsqu'un utilisateur utilise la détection de visage pour la première fois sur son appareil, Play Services doit accéder à un ensemble de petites bibliothèques natives pour traiter la demande de votre application. Bien que cela soit presque toujours fait avant que votre application ait été lancée, il est important de gérer le risque que cela se produise.

Si FaceDetector est opérationnel, vous pouvez convertir votre bitmap en objet Frame et le transmettre au détecteur pour recueillir des données sur les visages dans l'image. Lorsque vous avez terminé, vous devez libérer le détecteur pour éviter toute fuite de mémoire. Lorsque vous avez terminé de détecter les visages, appelez invalidate() pour déclencher le rafraîchissement de la vue.

if (!detector.isOperational()) {
    //Handle contingency
} else {
    Frame frame = new Frame.Builder().setBitmap(bitmap).build();
    mFaces = detector.detect(frame);
    detector.release();
}
invalidate();

Maintenant que vous avez détecté les visages dans votre image, il est temps de les utiliser. Pour cet exemple, vous allez simplement dessiner une boîte verte autour de chaque face. Puisque invalidate () a été appelé après la détection des visages, vous pouvez ajouter toute la logique nécessaire à onDraw (Canvas canvas). Cette méthode permet de s'assurer que le bitmap et les faces sont définis, puis tracez le bitmap sur la toile, puis tracez un cadre autour de chaque face.

Étant donné que la taille d'affichage de différents périphériques est différente, vous garderez également une trace de la taille mise à l'échelle du bitmap afin que l'image entière soit toujours visible sur le périphérique et que toutes les superpositions soient dessinées correctement.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if ((mBitmap != null) && (mFaces != null)) {
        double scale = drawBitmap(canvas);
        drawFaceBox(canvas, scale);
    }
}

La méthode drawBitmap (Canvas canvas) dessine votre bitmap sur le canevas et le redimensionne de manière appropriée, tout en renvoyant un multiplicateur permettant de redimensionner correctement vos autres dimensions.

private double drawBitmap( Canvas canvas ) {
    double viewWidth = canvas.getWidth();
    double viewHeight = canvas.getHeight();
    double imageWidth = mBitmap.getWidth();
    double imageHeight = mBitmap.getHeight();
    double scale = Math.min( viewWidth / imageWidth, viewHeight / imageHeight );

    Rect destBounds = new Rect( 0, 0, (int) ( imageWidth * scale ), (int) ( imageHeight * scale ) );
    canvas.drawBitmap( mBitmap, null, destBounds, null );
    return scale;
}

La méthode drawFaceBox (Canvas Canvas, double scale) devient un peu plus intéressante. Chaque face qui a été détectée et enregistrée a une valeur de position au-dessus et à gauche de chaque face. Cette méthode prendra cette position et en tirera un rectangle vert pour englober chaque face en fonction de sa largeur et de sa hauteur.

Vous devez définir votre objet Paint, puis parcourir chaque face de votre SparseArray pour trouver sa position, sa largeur et sa hauteur, puis tracer le rectangle sur le fond en utilisant ces informations.

private void drawFaceBox(Canvas canvas, double scale) {
    //paint should be defined as a member variable rather than 
    //being created on each onDraw request, but left here for 
    //emphasis.
    Paint paint = new Paint();
    paint.setColor(Color.GREEN);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(5);

    float left = 0;
    float top = 0;
    float right = 0;
    float bottom = 0;

    for( int i = 0; i < mFaces.size(); i++ ) {
        Face face = mFaces.valueAt(i);

        left = (float) ( face.getPosition().x * scale );
        top = (float) ( face.getPosition().y * scale );
        right = (float) scale * ( face.getPosition().x + face.getWidth() );
        bottom = (float) scale * ( face.getPosition().y + face.getHeight() );

        canvas.drawRect( left, top, right, bottom, paint );
    }
}

À ce stade, vous devriez pouvoir exécuter votre application et voir votre image avec des rectangles autour de chaque visage détecté. Il est important de noter que l'API de détection de visage est encore relativement nouvelle au moment d'écrire ces lignes et qu'elle peut ne pas détecter chaque visage. Vous pouvez jouer avec certains paramètres de l'objet FaceDetector.Builder afin de collecter davantage de données, même si cela n'est pas garanti.

Faces detected and bound by a drawn rectangle

3. Comprendre les points de repère

Les points de repère sont des points d'intérêt sur un visage. L'API de détection de visage n'utilise pas de points de repère pour détecter un visage, mais plutôt un visage dans son intégralité avant de rechercher des points de repère. C’est pourquoi la découverte de points de repère est un paramètre facultatif qui peut être activé via FaceDetector.Builder.

Vous pouvez utiliser ces points de repère comme source d'informations supplémentaire, telle que l'emplacement des yeux du sujet, afin de pouvoir réagir de manière appropriée au sein de votre application. Il y a douze points de repère qu'il est possible de trouver:

oeil gauche et droit
oreille gauche et droite
oreille gauche et droite
base du nez
joue gauche et droite
coin gauche et droit de la bouche
base de la bouche

Les points de repère disponibles dépendent de l'angle du visage détecté. Par exemple, une personne faisant face sur le côté n'aura qu'un œil visible, ce qui signifie que l'autre œil ne sera pas détectable. Le tableau suivant indique quels points de repère devraient être détectables en fonction de l'angle d'Euler Y (direction gauche ou droite) du visage.

Euler Y	Visites Visibles
<-36 °	œil gauche, bouche gauche, oreille gauche, base du nez, joue gauche
-36 ° à -12 °	bouche gauche, base du nez, bas de la bouche, œil droit, œil gauche, joue gauche, extrémité de l'oreille gauche
-12 ° à 12 °	œil droit, œil gauche, base du nez, joue gauche, joue droite, bouche gauche, bouche droite, bas de la bouche
12 ° à 36 °	bouche droite, base du nez, bas de la bouche, œil gauche, œil droit, joue droite, extrémité de l'oreille droite
> 36 °	oeil droit, bouche droite, oreille droite, base du nez, joue droite

Les repères sont également incroyablement faciles à utiliser dans votre application, car vous les avez déjà inclus lors de la détection des visages. Vous devez simplement appeler getLandmarks() sur un objet Face pour obtenir une List d'objets Landmark avec lesquels vous pouvez travailler.

Dans ce didacticiel, vous dessinerez un petit cercle sur chaque repère détecté en appelant une nouvelle méthode, drawFaceLandmarks (toile Canvas, double échelle), à partir de onDraw (Canvas canvas) au lieu de drawFaceBox (Canvas Canvas, double scale). Cette méthode prend la position de chaque point de repère, l’adapte à l’échelle du bitmap, puis affiche le cercle indicateur de point de repère.

private void drawFaceLandmarks( Canvas canvas, double scale ) {
    Paint paint = new Paint();
    paint.setColor( Color.GREEN );
    paint.setStyle( Paint.Style.STROKE );
    paint.setStrokeWidth( 5 );

    for( int i = 0; i < mFaces.size(); i++ ) {
        Face face = mFaces.valueAt(i);

        for ( Landmark landmark : face.getLandmarks() ) {
            int cx = (int) ( landmark.getPosition().x * scale );
            int cy = (int) ( landmark.getPosition().y * scale );
            canvas.drawCircle( cx, cy, 10, paint );
        }

    }
}

Après avoir appelé cette méthode, vous devriez voir de petits cercles verts recouvrant les visages détectés, comme illustré dans l'exemple ci-dessous.

Circles placed over detected facial landmarks

4. Données de visage supplémentaires

Bien que la position d'un visage et ses repères soient utiles, vous pouvez également obtenir plus d'informations sur chaque visage détecté dans votre application grâce à des méthodes intégrées à partir de l'objet Face. Les méthodes getIsSmilingProbability (), getIsLeftEyeOpenProbability () et getIsRightEyeOpenProbability () tentent de déterminer si les yeux sont ouverts ou si la personne détectée sourit en renvoyant un float compris entre 0.0 et 1.0. Plus la valeur 1.0 est proche, plus cette personne sourit ou a l'œil gauche ou droit ouvert.

Vous pouvez également trouver l'angle du visage sur les axes Y et Z d'une image en vérifiant ses valeurs d'Euler. La valeur de Z Euler sera toujours signalée. Toutefois, vous devez utiliser un mode précis pour détecter les visages afin de recevoir la valeur X. Vous pouvez voir un exemple d'obtention de ces valeurs dans l'extrait de code suivant.

private void logFaceData() {
    float smilingProbability;
    float leftEyeOpenProbability;
    float rightEyeOpenProbability;
    float eulerY;
    float eulerZ;
    for( int i = 0; i < mFaces.size(); i++ ) {
        Face face = mFaces.valueAt(i);

        smilingProbability = face.getIsSmilingProbability();
        leftEyeOpenProbability = face.getIsLeftEyeOpenProbability();
        rightEyeOpenProbability = face.getIsRightEyeOpenProbability();
        eulerY = face.getEulerY();
        eulerZ = face.getEulerZ();

        Log.e( "Tuts+ Face Detection", "Smiling: " + smilingProbability );
        Log.e( "Tuts+ Face Detection", "Left eye open: " + leftEyeOpenProbability );
        Log.e( "Tuts+ Face Detection", "Right eye open: " + rightEyeOpenProbability );
        Log.e( "Tuts+ Face Detection", "Euler Y: " + eulerY );
        Log.e( "Tuts+ Face Detection", "Euler Z: " + eulerZ );
    }
}

Conclusion

Dans ce didacticiel, vous avez découvert l'un des composants principaux de la bibliothèque Play Services Vision, la détection de visage. Vous savez maintenant comment détecter des visages dans une image fixe, comment rassembler des informations et trouver des repères importants pour chaque visage.

En utilisant ce que vous avez appris, vous devriez pouvoir ajouter des fonctionnalités intéressantes à vos propres applications pour augmenter les images fixes, suivre les visages dans un flux vidéo ou toute autre chose que vous pouvez imaginer.