Uso de JavaScript - Amazon Rekognition
Código de ejemplo JavaScriptObtener el identificador de grupo de identidades de Amazon Cognito

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Uso de JavaScript

En el siguiente ejemplo de página web JavaScript permite a un usuario elegir una imagen y ver las edades estimadas de los rostros detectados en la imagen. Las edades estimadas se devuelven mediante una llamada a DetectFaces.

La imagen elegida se sube con la función FileReader.readAsDataURL de JavaScript, que codifica la imagen en base64. Esto resulta útil para mostrar la imagen en un lienzo HTML. Pero implica que los bytes de imagen se tienen que descodificar antes de transferirlos a una operación de Amazon Rekognition Image. En este ejemplo se muestra cómo descodificar los bytes de imagen subidos. Si los bytes de imagen codificados no le resultan útiles, use FileReader.readAsArrayBuffer en su lugar porque la imagen subida no está codificada. Esto significa que se puede llamar a las operaciones de Amazon Rekognition Image sin codificar primero los bytes de imagen. Para ver un ejemplo, consulta Uso de readAsArrayBuffer.

Para ejecutar el ejemplo de JavaScript

  1. Cargue el código fuente de ejemplo en un editor.

  2. Obtenga el identificador de grupo de identidades de Amazon Cognito. Para obtener más información, consulte Obtener el identificador de grupo de identidades de Amazon Cognito.

  3. En la función AnonLog del código de ejemplo, cambie IdentityPoolIdToUse y RegionToUse por los valores que anotó en el paso 9 de Obtener el identificador de grupo de identidades de Amazon Cognito.

  4. En la función DetectFaces, cambie RegionToUse por el valor que usó en el paso anterior.

  5. Guarde el código fuente de ejemplo como un archivo .html.

  6. Cargue el archivo en su navegador.

  7. Haga clic en el botón Examinar... y elija una imagen que contenga una o más caras. Se muestra una tabla que contiene las edades estimadas para cada rostro detectado en la imagen.

nota

El siguiente ejemplo de código utiliza dos scripts que ya no forman parte de Amazon Cognito. Para obtener estos archivos, siga los enlaces de aws-cognito-sdk.min.js y amazon-cognito-identity.min.js y, a continuación, guarde el texto de cada uno en un archivo .js diferente.

Código de ejemplo JavaScript

El siguiente ejemplo de código usa JavaScript V2. Para ver un ejemplo en JavaScript V3, consulte el ejemplo en el repositorio GitHub de ejemplos del SDK de la documentación de AWS.

<!--
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>

Uso de readAsArrayBuffer

El siguiente fragmento de código es una implementación alternativa de la función ProcessImage en el código de muestra usando JavaScript V2. Utiliza readAsArrayBuffer para subir una imagen y llama a DetectFaces. Dado que readAsArrayBuffer no codifica en base64 el archivo subido, no es necesario descodificar los bytes de imagen antes de llamar a una operación de Amazon Rekognition Image.

//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);
  }

Obtener el identificador de grupo de identidades de Amazon Cognito

Para simplificar, el ejemplo utiliza un grupo de identidades de Amazon Cognito anónimas para proporcionar acceso sin autenticar a la API de Amazon Rekognition Image. Esto podría ser adecuado para sus necesidades. Por ejemplo, puede utilizar el acceso sin autenticar para proporcionar acceso gratuito, o de prueba, a su sitio web antes de que los usuarios se inscriban. Para proporcionar acceso autenticado, utilice un grupo de usuarios de Amazon Cognito. Para obtener más información, consulte Grupos de usuarios de Amazon Cognito.

En el siguiente procedimiento se muestra cómo crear un grupo de identidades que permite el acceso a identidades sin autenticar y cómo obtener el identificador de grupo de identidades que se necesita en el código de ejemplo.

Para obtener el identificador de grupo de identidades

  1. Abra la consola de Amazon Cognito.

  2. Elija Crear nuevo grupo de identidades.

  3. En Nombre de grupo de identidades*, escriba un nombre para su grupo de identidades.

  4. En Identidades sin autenticar, elija Habilitar el acceso a identidades sin autenticar.

  5. Elija Crear grupo.

  6. Elija Ver detalles y anote el nombre de rol de las identidades sin autenticar.

  7. Elija Permitir.

  8. En Plataforma, elija JavaScript.

  9. En Obtener credenciales de AWS, anote los valores de AWS.config.region y IdentityPooldId que se muestran en el fragmento de código.

  10. Abra la consola de IAM en https://console.aws.amazon.com/iam/.

  11. Seleccione Roles en el panel de navegación.

  12. Elija el nombre de rol que anotó en el paso 6.

  13. En la pestaña Permisos, elija Asociar políticas.

  14. Elija AmazonRekognitionReadOnlyAccess.

  15. Elija Adjuntar política.