JavaScript 예제 코드 Amazon Cognito 자격 증명 풀 식별자 가져오기

사용 JavaScript

다음 JavaScript 웹페이지 예시에서는 사용자가 이미지를 선택하고 이미지에서 감지된 얼굴의 추정 연령을 볼 수 있습니다. DetectFaces를 호출하면 예상 연령이 반환됩니다.

선택한 이미지는 이미지를 base64로 인코딩하는 JavaScript FileReader.readAsDataURL 함수를 사용하여 로드됩니다. HTML 캔버스에 이미지를 표시할 때 유용한 기능입니다. 그러나 이렇게 하면 Amazon Rekognition Image 작업으로 전달하기 전에 이미지 바이트 인코딩을 해제해야 합니다. 이 예제에서는 로드된 이미지 바이트를 해독하는 방법을 보여 줍니다. 인코딩된 이미지 바이트가 불편하면 그 대신 로딩된 이미지를 인코딩하지 않는 FileReader.readAsArrayBuffer를 사용하십시오. 이렇게 하면 이미지 바이트 인코딩을 먼저 해제하지 않고도 Amazon Rekognition Image 작업을 직접 호출할 수 있습니다. 예시는 버퍼 사용 readAsArray 단원을 참조하세요.

예제를 실행하려면 JavaScript

예제 소스 코드를 편집기에 로드합니다.
Amazon Cognito 자격 증명 풀 식별자를 가져옵니다. 자세한 설명은 Amazon Cognito 자격 증명 풀 식별자 가져오기 섹션을 참조하세요.
예제 코드의 AnonLog 함수에서 IdentityPoolIdToUse와 RegionToUse를 Amazon Cognito 자격 증명 풀 식별자 가져오기의 9단계에서 기록해 둔 값으로 바꿉니다.
DetectFaces 함수에서 RegionToUse를 이전 단계에서 사용한 값으로 바꿉니다.
예제 소스 코드를 .html 파일로 저장합니다.
그 파일을 브라우저에 로드합니다.
찾아보기... 버튼을 선택하고 얼굴이 하나 이상 들어 있는 이미지를 선택합니다. 이미지에서 감지된 각 얼굴의 예상 연령을 담은 표가 나타납니다.

참고

다음 코드 예제는 더 이상 Amazon Cognito의 일부가 아닌 두 스크립트를 사용합니다. 이러한 파일을 aws-cognito-sdk가져오려면.min.js와 .min.js의 링크를 따라 이동한 다음 amazon-cognito-identity각 파일의 텍스트를 별도의 파일로 저장합니다. .js

JavaScript 예제 코드

다음 코드 예제는 JavaScript V2를 사용합니다. JavaScript V3의 예제는 AWS설명서 SDK 예제 GitHub 저장소의 예제를 참조하십시오.


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

버퍼 사용 readAsArray

다음 코드 스니펫은 V2를 사용하여 JavaScript 샘플 코드에 ProcessImage 함수를 구현한 대체 코드입니다. 여기서는 readAsArrayBuffer를 사용하여 이미지를 로드하고 DetectFaces를 호출합니다. readAsArrayBuffer는 로드된 파일을 base64로 인코딩하지 않기 때문에 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);
  }

Amazon Cognito 자격 증명 풀 식별자 가져오기

간단히 설명하기 위해, 이 예제에서는 익명 Amazon Cognito 자격 증명 풀을 사용하여 Amazon Rekognition Image API에 대한 인증되지 않은 액세스 권한을 제공합니다. 이 방법이 현재 상황에 알맞습니다. 예를 들어, 사용자 로그인을 위한 웹 사이트 무료 액세스 권한 또는 평가판 액세스 권한을 미인증 액세스 권한으로 제공할 수 있습니다. 인증되지 않은 액세스 권한을 제공하려면 Amazon Cognito 사용자 풀을 사용하세요. 자세한 내용은 Amazon Cognito 사용자 풀을 참조하세요.

다음 절차에서는 인증되지 않은 자격 증명을 사용할 수 있는 자격 증명 풀을 만드는 방법과 예제 코드에 필요한 자격 증명 풀 식별자를 가져오는 방법을 보여 줍니다.

자격 증명 풀 식별자를 가져오려면

Amazon Cognito 콘솔을 엽니다.
새 자격 증명 풀 생성을 선택합니다.
자격 증명 풀 이름*에 자격 증명 풀의 이름을 입력합니다.
인증되지 않은 자격 증명에서 인증되지 않은 자격 증명에 대한 액세스 활성화를 선택합니다.
풀 생성을 선택합니다.
세부 정보 보기를 선택하고 인증되지 않은 자격 증명의 역할 이름을 적어 둡니다.
허용을 선택합니다.
플랫폼에서 선택합니다. JavaScript
AWS 자격 증명 얻기에서 코드 조각에 표시된 AWS.config.region 및 IdentityPooldId의 값을 적어 둡니다.
https://console.aws.amazon.com/iam/에서 IAM 콘솔을 엽니다.
탐색 창에서 역할을 선택합니다.
6단계에서 적어 둔 역할 이름을 선택합니다.
권한 탭에서 정책 연결을 선택합니다.
선택하세요 AmazonRekognitionReadOnlyAccess.
정책 연결을 선택하세요.

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

로컬 파일 시스템 사용

경계 상자 표시