Amazon Rekognition
Developer Guide

Using JavaScript

The following JavaScript webpage example allows a user to choose an image and view the estimated ages of faces that are detected in the image. The estimated ages are returned by a call to DetectFaces.

The chosen image is loaded by using the JavaScript FileReader.readAsDataURL function, which base64-encodes the image. This is useful for displaying the image on an HTML canvas. But, it means the image bytes have to be unencoded before they're passed to an Amazon Rekognition Image operation. This example shows how to unencode the loaded image bytes. If the encoded image bytes aren't useful to you, use FileReader.readAsArrayBuffer instead because the loaded image isn't encoded. This means that Amazon Rekognition Image operations can be called without first unencoding the image bytes. For an example, see Using readAsArrayBuffer.

To run the JavaScript example

  1. Load the example source code into an editor.

  2. Get the Amazon Cognito identity pool identifier. For more information, see Getting the Amazon Cognito Identity Pool Identifier.

  3. In the AnonLog function of the example code, change IdentityPoolIdToUse and RegionToUse to the values that you noted in step 9 of Getting the Amazon Cognito Identity Pool Identifier.

  4. In the DetectFaces function, change RegionToUse to the value you used in the previous step.

  5. Save the example source code as an .html file.

  6. Load the file into your browser.

  7. Choose the Browse... button, and choose an image that contains one or more faces. A table is shown that contains the estimated ages for each face detected in the image.

JavaScript Example Code

<!-- 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> <script src="./app.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(imageBytes); }; })(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>

Using readAsArrayBuffer

The following code snippet is an alternative implementation of the ProcessImage function in the sample code. It uses readAsArrayBuffer to load an image and call DetectFaces. Because readAsArrayBuffer doesn't base64-encode the loaded file, it's not necessary to unencode the image bytes before calling an Amazon Rekognition Image operation.

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

Getting the Amazon Cognito Identity Pool Identifier

For simplicity, the example uses an anonymous Amazon Cognito identity pool to provide unauthenticated access to the Amazon Rekognition Image API. This might be suitable for your needs. For example, you can use unauthenticated access to provide free, or trial, access to your website before users sign up. To provide authenticated access, use an Amazon Cognito user pool. For more information, see Amazon Cognito User Pool.

The following procedure shows how to create an identity pool that enables access to unauthenticated identities, and how to get the identity pool identifier that's needed in the example code.

To get the identity pool identifier

  1. Open the Amazon Cognito console.

  2. Choose Create new identity pool.

  3. For Identity pool name*, type a name for your identity pool.

  4. In Unauthenticated identites, choose Enable access to unauthenticated identities.

  5. Choose Create Pool.

  6. Choose View Details, and note the role name for unauthenticated identities.

  7. Choose Allow.

  8. In Platform, choose JavaScript.

  9. In Get AWS Credentials, note the values of Identity pool identifier and region that are shown in the code snippet.

  10. Open the IAM console at https://console.aws.amazon.com/iam/.

  11. In the navigation pane, choose Roles.

  12. Choose the role name that you noted in step 6.

  13. In Permissions, choose Attach Policy.

  14. Choose AmazonRekognitionReadOnlyAccess.

  15. Choose Attach Policy.