JavaScript exemple de code Obtenir l’ID de la réserve d'identités Amazon Cognito

En utilisant JavaScript

L'exemple de JavaScript page Web suivant permet à un utilisateur de choisir une image et de visualiser l'âge estimé des visages détectés sur l'image. Les âges estimés sont renvoyés par un appel à DetectFaces.

L'image choisie est chargée à l'aide de la JavaScript FileReader.readAsDataURL fonction qui encode l'image en base64. Cela permet d’afficher l’image sur un canevas HTML. Mais cela signifie que les octets d’image doivent être décodés avant d’être transmis à une opération Image Amazon Rekognition. Cet exemple montre comment décoder les octets d’image chargés. Si les octets d’image codés ne sont pas utiles pour vous, utilisez plutôt FileReader.readAsArrayBuffer, car l’image chargée n’est pas codée. Cela signifie que les opérations Image Amazon Rekognition peuvent être appelées sans que les octets d’image soient décodés au préalable. Pour obtenir un exemple, consultez Utilisation de readAsArray Buffer.

Pour exécuter l' JavaScript exemple

Chargez l’exemple de code source dans un éditeur.
Obtenez l’ID de la réserve d'identités Amazon Cognito. Pour plus d’informations, consultez Obtenir l’ID de la réserve d'identités Amazon Cognito.
Dans la fonction AnonLog de l’exemple de code, remplacez IdentityPoolIdToUse et RegionToUse par les valeurs que vous avez notées à l’étape 9 de Obtenir l’ID de la réserve d'identités Amazon Cognito.
Dans la fonction DetectFaces, remplacez RegionToUse par la valeur que vous avez utilisée à l’étape précédente.
Enregistrez l’exemple de code source en tant que fichier .html.
Chargez le fichier dans votre navigateur.
Choisissez le bouton Parcourir..., puis choisissez une image qui contient un ou plusieurs visages. La table qui s’affiche contient les âges estimés pour chaque visage détecté dans l’image.

Note

L’exemple de code suivant utilise deux scripts qui ne font plus partie d’ Amazon Cognito. Pour obtenir ces fichiers, suivez les liens pour aws-cognito-sdk.min.js et amazon-cognito-identity.min.js, puis enregistrez le texte de chacun sous forme de fichiers séparés. .js

JavaScript exemple de code

L'exemple de code suivant utilise la JavaScript version V2. Pour un exemple dans la JavaScript version 3, consultez l'exemple dans le référentiel d'exemples GitHub du SDK de AWS documentation.


<!--
Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
PDX-License-Identifier: MIT-0 (For details, see https://github.com/awsdocs/amazon-rekognition-developer-guide/blob/master/LICENSE-SAMPLECODE.)
-->
<!DOCTYPE html>
<html>
<head>
  <script src="aws-cognito-sdk.min.js"></script>
  <script src="amazon-cognito-identity.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.16.0.min.js"></script>
  <meta charset="UTF-8">
  <title>Rekognition</title>
</head>

<body>
  <H1>Age Estimator</H1>
  <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*">
  <p id="opResult"></p>
</body>
<script>

  document.getElementById("fileToUpload").addEventListener("change", function (event) {
    ProcessImage();
  }, false);
  
  //Calls DetectFaces API and shows estimated ages of detected faces
  function DetectFaces(imageData) {
    AWS.region = "RegionToUse";
    var rekognition = new AWS.Rekognition();
    var params = {
      Image: {
        Bytes: imageData
      },
      Attributes: [
        'ALL',
      ]
    };
    rekognition.detectFaces(params, function (err, data) {
      if (err) console.log(err, err.stack); // an error occurred
      else {
       var table = "<table><tr><th>Low</th><th>High</th></tr>";
        // show each face and build out estimated age table
        for (var i = 0; i < data.FaceDetails.length; i++) {
          table += '<tr><td>' + data.FaceDetails[i].AgeRange.Low +
            '</td><td>' + data.FaceDetails[i].AgeRange.High + '</td></tr>';
        }
        table += "</table>";
        document.getElementById("opResult").innerHTML = table;
      }
    });
  }
  //Loads selected image and unencodes image bytes for Rekognition DetectFaces API
  function ProcessImage() {
    AnonLog();
    var control = document.getElementById("fileToUpload");
    var file = control.files[0];

    // Load base64 encoded image 
    var reader = new FileReader();
    reader.onload = (function (theFile) {
      return function (e) {
        var img = document.createElement('img');
        var image = null;
        img.src = e.target.result;
        var jpg = true;
        try {
          image = atob(e.target.result.split("data:image/jpeg;base64,")[1]);

        } catch (e) {
          jpg = false;
        }
        if (jpg == false) {
          try {
            image = atob(e.target.result.split("data:image/png;base64,")[1]);
          } catch (e) {
            alert("Not an image file Rekognition can process");
            return;
          }
        }
        //unencode image bytes for Rekognition DetectFaces API 
        var length = image.length;
        imageBytes = new ArrayBuffer(length);
        var ua = new Uint8Array(imageBytes);
        for (var i = 0; i < length; i++) {
          ua[i] = image.charCodeAt(i);
        }
        //Call Rekognition  
        DetectFaces(ua);
      };
    })(file);
    reader.readAsDataURL(file);
  }
  //Provides anonymous log on to AWS services
  function AnonLog() {
    
    // Configure the credentials provider to use your identity pool
    AWS.config.region = 'RegionToUse'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'IdentityPoolIdToUse',
    });
    // Make the call to obtain credentials
    AWS.config.credentials.get(function () {
      // Credentials will be available when this function is called.
      var accessKeyId = AWS.config.credentials.accessKeyId;
      var secretAccessKey = AWS.config.credentials.secretAccessKey;
      var sessionToken = AWS.config.credentials.sessionToken;
    });
  }
</script>
</html>

Utilisation de readAsArray Buffer

L'extrait de code suivant est une implémentation alternative de la ProcessImage fonction dans l'exemple de code, à l'aide JavaScript de la version V2. Il utilise readAsArrayBuffer pour charger une image et appeler DetectFaces. Comme readAsArrayBuffer n’encode pas le fichier chargé en base64, il n’est pas nécessaire de décoder les octets d’image avant d’appeler une opération Image Amazon Rekognition.


//Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
//PDX-License-Identifier: MIT-0 (For details, see https://github.com/awsdocs/amazon-rekognition-developer-guide/blob/master/LICENSE-SAMPLECODE.)

function ProcessImage() {
    AnonLog();
    var control = document.getElementById("fileToUpload");
    var file = control.files[0];

    // Load base64 encoded image for display 
    var reader = new FileReader();
    reader.onload = (function (theFile) {
      return function (e) {
        //Call Rekognition  
        AWS.region = "RegionToUse";  
        var rekognition = new AWS.Rekognition();
        var params = {
          Image: {
          Bytes: e.target.result
        },
        Attributes: [
        'ALL',
      ]
    };
    rekognition.detectFaces(params, function (err, data) {
      if (err) console.log(err, err.stack); // an error occurred
      else {
       var table = "<table><tr><th>Low</th><th>High</th></tr>";
        // show each face and build out estimated age table
        for (var i = 0; i < data.FaceDetails.length; i++) {
          table += '<tr><td>' + data.FaceDetails[i].AgeRange.Low +
            '</td><td>' + data.FaceDetails[i].AgeRange.High + '</td></tr>';
        }
        table += "</table>";
        document.getElementById("opResult").innerHTML = table;
      }
    });

      };
    })(file);
    reader.readAsArrayBuffer(file);
  }

Obtenir l’ID de la réserve d'identités Amazon Cognito

Pour plus de simplicité, l’exemple utilise une réserve d'identités anonyme Amazon Cognito pour fournir un accès non authentifié à l’API Image Amazon Rekognition. Cela peut répondre à vos besoins. Par exemple, vous pouvez utiliser un accès non authentifié pour offrir un accès gratuit ou un accès test à votre site web avant que les utilisateurs ne s’inscrivent. Pour fournir un accès authentifié, utilisez un groupe d’utilisateurs Amazon Cognito. Pour plus d’informations, consultez Groupe d’utilisateurs dans Amazon Cognito.

La procédure suivante montre comment créer une réserve d'identités qui permet d’accéder à des identités non authentifiées, et comment obtenir l’identifiant de la réserve d'identités requis dans l’exemple de code.

Pour obtenir l’identifiant de la réserve d'identités

Ouvrez la console Amazon Cognito.
Sélectionnez Create new identity pool.
Pour Identity pool name* (Nom de la réserve d'identités*), tapez un nom pour votre réserve d'identités.
Dans Identités non authentifiées, choisissez Activer l’accès aux identités non authentifiées.
Sélectionnez Créer une réserve.
Choisissez View Details (Afficher les détails) et notez le nom du rôle pour les identités non authentifiées.
Sélectionnez Allow (Autoriser).
Dans Plateforme, sélectionnez JavaScript.
Dans Obtenir les informations d’identification AWS, notez les valeurs de AWS.config.region et IdentityPooldId qui sont affichées dans l’extrait de code.
Ouvrez la console IAM à l’adresse https://console.aws.amazon.com/iam/.
Dans le panneau de navigation, sélectionnez Rôles.
Choisissez le nom du rôle que vous avez noté à l’étape 6.
Dans l’onglet Autorisations, choisissez Attacher des stratégies.
Choisissez AmazonRekognitionReadOnlyAccess.
Choisissez Attach Policy (Attacher une politique).

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Utilisation d’un système de fichiers local

Affichage de cadres de délimitation