Detect Objects Using Amazon Rekognition

In this exercise, you will create a browser-based application that uses your computer’s webcam to ‘see’ images, and then displays the labels for the features that have been detected.

  1. Download the source code bundle from www.zip file and explode the zip file onto your filesystem. Or run the following code:
  • www.zip (1134 KB)
    1. Open the config/config.jsfile in a text editor such as Eclipse. Replace the following values with the value from CloudFormation Outputs tab:
    Text CloudFormation output value
    REPLACE_WITH_COGNITO_IDENTITY_POOL_ID CognitoIdentityPoolId
    REPLACE_WITH_DETECTOR_UPLOAD_BUCKET S3BucketDetectorUploads
    REPLACE_WITH_YOUR_DYNAMO_DB_TABLE_NAME DynamoDBFaces
    REPLACE_WITH_YOUR_AWS_REGION Your current region

    Rekonition

    1. Save the file.
    2. Copy the contents of the folder you exploded the zip file into, to the S3 bucket that lab has created for you to host your website, using the following command:
    aws s3 cp . s3://m7www --recursive --region <YOUR-REGION> --profile aws-lab-env
    1. To be able to access the website, we need to Make public using ACL the objects in the bucket.
    2. Access m7www bucket, select Permissions tab. Scroll down to Access control list (ACL), click bucket owner enforced.

    Make public

    1. Select ACLs enabled, then click Save changes

    Make public

    1. Select Objects tab, then select all objects. Then click Actions | Make public using ACL

    Make public

    1. Visit the website with the following link: https://m7www.s3-<region>.amazonaws.com/index.html
    2. You will see a landing page with four options. Click the first option, Object Scanner

    Object scanner

    1. When the page loads, it will ask for permission to use the webcam on your computer. If you see an error instead, check that you are browsing to the site securely, using HTTPS.
    2. Select Start Rekognition button to start sending images to the Rekognition service.

    Object scanner

    1. The page will connect using Amazon Cognito, and then push the webcam image to Rekognition. In response, the page will show a list of all the objects it can ‘see’ in the image.

    Object scanner

    1. Try holding up different objects in front of the camera to see the list of objects detected change.
    2. Take a few minutes to look at the source code implementation of this demo to ensure you understand how it works.