JavaScript を使用する - Amazon Rekognition

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

JavaScript を使用する

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

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

JavaScript の例を実行するには

  1. ソースコード例をエディタにロードします。

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

  3. コード例の AnonLog 関数で、IdentityPoolIdToUseRegionToUse は「Amazon Cognito ID プールの ID を取得する」のステップ 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(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>

readAsArrayBuffer を使用する

次のコードスニペットは、ProcessImageJavaScript V2 を使用して、サンプルコード内の関数を指定します。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 ID プールの ID を取得する

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

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

ID プールの ID を取得するには

  1. Amazon Cognito コンソールを開きます。

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

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

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

  5. [Create Pool] を選択します。

  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. Attach Policy] (ポリシーのアタッチ) を選択します。