の使用 JavaScript - Amazon Rekognition

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

の使用 JavaScript

次の JavaScript ウェブページの例では、ユーザーがイメージを選択し、イメージ内で検出された顔の推定年齢を表示できます。推定年齢は DetectFaces を呼び出すことで返されます。

選択したイメージは、イメージを JavaScript base64 でエンコードする FileReader.readAsDataURL関数を使用してロードされます。これは、HTML キャンバスでイメージを表示するのに役立ちます。ただし、イメージバイトを Amazon Rekognition Image オペレーションに渡す前にエンコードされていない状態にする必要があります。この例では、ロードされたイメージバイトをエンコードされていない状態にする方法を示しています。エンコードされたイメージバイトが有用でない場合は、代わりにロードされたイメージがエンコードされない FileReader.readAsArrayBuffer を使用します。つまり、最初にイメージバイトをエンコードされていない状態にする処理なしで、Amazon Rekognition Image オペレーションを呼び出すことができます。例については「 readAsArrayBuffer の使用」を参照してください。

JavaScript サンプルを実行するには
  1. ソースコード例をエディタにロードします。

  2. Amazon Cognito identity プールの識別子を取得します。詳細については、「Amazon Cognito identity プールの識別を取得します。」を参照してください。

  3. コード例の AnonLog 関数で、IdentityPoolIdToUseRegionToUse は「Amazon Cognito identity プールの識別を取得します。」のステップ 9 で書き留めた値に変更します。

  4. DetectFaces 関数の RegionToUse を、前のステップで使用した値に変更します。

  5. ソースコード例を .html ファイルとして保存します。

  6. ブラウザにファイルをロードします。

  7. [参照...] ボタンを選択して、1 つ以上の顔が含まれたイメージを選択します。イメージ内で検出された顔ごとの推定年齢が含まれたテーブルが表示されます。

注記

以下のコード例では、Amazon Cognito に含まれなくなった 2 つのスクリプトを使用しています。これらのファイルを取得するには、 aws-cognito-sdk.min.js amazon-cognito-identity.min.js のリンクをたどって、それぞれのテキストを個別の.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>

readAsArrayBuffer の使用

次のコードスニペットは、 JavaScript V2 を使用したサンプルコード内の ProcessImage関数の代替実装です。readAsArrayBuffer を使用してイメージを読み込み、DetectFaces を呼び出します。ロードしたファイルは readAsArrayBuffer で base64 エンコードされないため、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); }

Amazon Cognito identity プールの識別を取得します。

わかりやすいように、この例では、匿名の Amazon Cognito identity プールを使用して、 Amazon Rekognition Image API に認証されていないアクセスを提供します。これは、お客様のニーズに適している場合もあります。たとえば、認証されていないアクセスを使用して、ユーザーがサインアップする前に、無料または試用でウェブサイトにアクセスできるようにできます。認証されたアクセスを提供するには、Amazon Cognito ユーザープールを使用します。詳細については、Amazon Cognito ID ユーザープール を参照してください。

以下の手順では、認証されていない ID へのアクセスを有効にする ID プールを作成する方法と、コード例で必要な ID プールの ID を取得する方法を説明します。

ID プールの ID を取得するには
  1. Amazon Cognito コンソールを開きます。

  2. [Create new identity pool] を選択します。

  3. [ID プール名*] に ID プールの名前を入力します。

  4. [認証されていない ID] で、[認証されていない ID に対してアクセスを有効にする] を選択します。

  5. [プールの作成] を選択します。

  6. [詳細の表示] を選択して、認証されていない ID のロール名をメモします。

  7. [Allow] (許可) を選択します。

  8. プラットフォーム で、 を選択しますJavaScript

  9. [AWS 認証情報の取得] で、コードスニペットに表示される AWS.config.regionIdentityPooldId の値をメモします。

  10. IAM コンソール (https://console.aws.amazon.com/iam/) を開きます。

  11. ナビゲーションペインで Roles (ロール) を選択します。

  12. ステップ 6 で書き留めたロール名を選択します。

  13. [アクセス許可] タブで、[ポリシーのアタッチ] を選択します。

  14. を選択しますAmazonRekognitionReadOnlyAccess

  15. ポリシーをアタッチ] を選択します。