Menggunakan JavaScript - Amazon Rekognition
JavaScript kode contohMencari pengenal kolam identitas Amazon Cognito

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menggunakan JavaScript

Contoh JavaScript halaman web berikut memungkinkan pengguna untuk memilih gambar dan melihat perkiraan usia wajah yang terdeteksi dalam gambar. Perkiraan usia dikembalikan dengan panggilan ke DetectFaces.

Gambar yang dipilih dimuat dengan menggunakan JavaScript FileReader.readAsDataURL fungsi, yang base64-menyandikan gambar. Hal ini berguna untuk menampilkan citra pada kanvas HTML. Namun, itu berarti bit citra harus tidak dikodekan sebelum mereka diteruskan ke operasi Amazon Rekognition Image. Contoh ini menunjukkan cara tidak mengodekan bit citra yang dimuat. Jika bit citra yang dikodekan tidak berguna bagi Anda, gunakan FileReader.readAsArrayBuffer sebagai gantinya karena citra yang dimuat tidak dikodekan. Ini berarti bahwa operasi Amazon Rekognition Image dapat dipanggil tanpa mengodekan bit citra terlebih dahulu. Sebagai contoh, lihat Menggunakan readAsArray Buffer.

Untuk menjalankan JavaScript contoh

  1. Muat kode sumber contoh ke editor.

  2. Dapatkan pengenal kolam identitas Amazon Cognito. Untuk informasi selengkapnya, lihat Mencari pengenal kolam identitas Amazon Cognito.

  3. Di fungsi AnonLog dari kode contoh, ubah IdentityPoolIdToUse dan RegionToUse dengan nilai-nilai yang Anda catat di langkah 9 dari Mencari pengenal kolam identitas Amazon Cognito.

  4. Di fungsi DetectFaces, ubah RegionToUse dengan nilai yang Anda gunakan di langkah sebelumnya.

  5. Simpan kode sumber contoh sebagai file .html.

  6. Muat file ke peramban Anda.

  7. Pilih tombol Cari..., dan pilih citra yang berisi satu wajah atau lebih. Tabel yang ditampilkan berisi perkiraan usia untuk setiap wajah yang terdeteksi dalam citra.

catatan

Contoh kode berikut menggunakan dua skrip yang tidak lagi menjadi bagian dari Amazon Cognito. Untuk mendapatkan file-file ini, ikuti tautan aws-cognito-sdkuntuk.min.js amazon-cognito-identitydan.min.js, lalu simpan teks dari masing-masing sebagai file terpisah. .js

JavaScript kode contoh

Contoh kode berikut menggunakan JavaScript V2. Untuk contoh di JavaScript V3, lihat contoh di repositori contoh SDK AWS Dokumentasi. 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>

Menggunakan readAsArray Buffer

Cuplikan kode berikut adalah implementasi alternatif dari ProcessImage fungsi dalam kode sampel, menggunakan JavaScript V2. Ini menggunakan readAsArrayBuffer untuk memuat citra dan memanggil DetectFaces. Karena readAsArrayBuffer tidak mengodekan file yang dimuat ke base64, tidak perlu membatalkan pengodean bit citra sebelum memanggil operasi 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);
  }

Mencari pengenal kolam identitas Amazon Cognito

Agar sederhana, contoh menggunakan kolam identitas Amazon Cognito anonim untuk menyediakan akses tanpa autentikasi ke API Amazon Rekognition Image. Mungkin cocok untuk kebutuhan Anda. Misalnya, Anda dapat menggunakan akses tidak sah untuk memberikan akses gratis, atau uji coba, akses ke situs web Anda sebelum pengguna mendaftar. Untuk memberikan akses yang diautentikasi, gunakan kolam pengguna Amazon Cognito. Untuk informasi selengkapnya, lihat Kolam Pengguna Amazon Cognito.

Prosedur berikut menunjukkan cara membuat kolam identitas yang memungkinkan akses ke identitas tidak terautentikasi, dan cara untuk mendapatkan pengenal kolam identitas yang diperlukan dalam kode contoh.

Untuk mendapatkan pengenal kolam identitas

  1. Buka Amazon Cognito konsol.

  2. Pilih Buat kolam identitas baru.

  3. Untuk Nama kolam identitas*, ketikkan nama untuk kolam identitas Anda.

  4. Di Identitas tidak terautentikasi, pilih Aktifkan akses ke identitas yang tidak terautentikasi.

  5. Pilih Buat kolam.

  6. Pilih Lihat detail, dan perhatikan nama peran untuk identitas yang tidak terautentikasi.

  7. Pilih Izinkan.

  8. Di Platform, pilih JavaScript.

  9. Di Cari Kredensial AWS, perhatikan nilai-nilai AWS.config.region dan IdentityPooldId yang ditunjukkan di potongan kode.

  10. Buka konsol IAM di https://console.aws.amazon.com/iam/.

  11. Di panel navigasi, pilih Peran.

  12. Pilih nama peran yang Anda catat di langkah 6.

  13. Di tab Izin, pilih Lampirkan Kebijakan.

  14. Pilih AmazonRekognitionReadOnlyAkses.

  15. Pilih Pasang Kebijakan.