Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter...

14
IoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 1 Version 1.0 – 2021© Amphoria, LLC

Transcript of Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter...

Page 1: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

IoT Facial AnalysisA starter Guide for IoT

Author: Peter Rhys JenkinsVersion: 1.0May 4, 2021

1Version 1.0 – 2021© Amphoria, LLC

Page 2: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Getting StartedThis guide will help you install and deploy an IoT project that uses MQTT, HTML and Node-Red that will do Facial Analysis. All the artifacts are contained in the zip file.

Download FacialAnalysis.zip to your hard drive Unzip the file, it will create a directory called FacialAnalysis Visit https://nodered.org/docs/ and read a little about Getting Started with Node-Red,

you may want to bookmark this link Visit https://flows.nodered.org/ the node library and explore it Visit www.youtube.com and search for Node-Red (lots of videos)

Let’s go …1. Go to www.nodejs.org and download the latest version of node.js for your platform:

MacOS, Windows, Linux or Buster (Raspberry Pi)2. Install node.js from the downloaded file3. Go to www.nodered.org and download the latest version of Node-Red for your platform

MacOS, Windows, Linux or Buster (Raspberry Pi)4. Install Node-Red from the downloaded file

a. The installer will also install node package manager (npm)5. For the sample Facial Recognition we will use a publicly available MQTT server

a. You can connect to this server at broker.hivemq.comb. Hivemq uses port 8000 for WebSockets MQTT services (the facepp.html file uses

WebSockets to connect to MQTT)6. Optional - if you would like to have a great editor, go to https://atom.io download and

install Atom7. Using Atom (or your favorite text editor) open the file config.js in the FacialAnalysis

foldera. It will look like this:

b. Make sure line 1 points to broker.hivemq.com and port is set to 8000.If you would like to use another server, change the host to that server’s ip address and change the port to the MQTT/WebSockets port

i. broker.hivemq.com uses port 8000 for WebSockets listener

2Version 1.0 – 2021© Amphoria, LLC

Page 3: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

ii. mosquitto (another popular MQTT Server) uses port 9001 for its Websockets listener

iii. other servers may vary …c. note: we will look at installing a local MQTT server using mosquitto in a future

release of this document

3Version 1.0 – 2021© Amphoria, LLC

Page 4: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

8. Go to https://www.faceplusplus.com/ ** note this service is free for low volume use

and does not require a credit card.a. Click on Sign Up

i. Enter a username (save this)ii. Enter your Phone number and press Send

then respond to the Captcha dialog or

iii. Enter your email and press Sendthen respond to the Captcha dialog

iv. Input the Verification code that you receive via Text or emailv. Enter a password (save this)

vi. Confirm you have Read and agree to the Servicesvii. Click Sign Up

Select Personal Account, enter your Name, Category and Country then press start

4Version 1.0 – 2021© Amphoria, LLC

Page 5: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Click Get API KeyIt will take a second and a new API key and an API Secret will be generated

Click on View and copy and paste the key and the secret into a safe place to save for later when we do the curl configuration

10. Start Node-Red open a terminal window (mac) or cmd window (windows)type node-red at the command prompt and press enter

… etc.

11. Open a browser window (Safari, Firefox, Chrome, Microsoft Edge)navigate to http://localhost:1880you will see the Node-Red editor

12. Add base64 node to the Node-Red paletteWe are going to add the node-red-node-base64 support to the Node-Red paletteClick on the Hamburger in the upper right hand corner

5Version 1.0 – 2021© Amphoria, LLC

Page 6: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Click on Manage Palette

6Version 1.0 – 2021© Amphoria, LLC

Page 7: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Click on Install Tab.

Type base64 over the “search modules” field.you will see node-red-node-base64 displayed.Click the Install button and then click the red install button to confirm adding the base64 node to the available nodes.

7Version 1.0 – 2021© Amphoria, LLC

Page 8: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

10. Install the FacialAnalysis flow.In the FacialAnalysis directory open the file named faceppFlow.txt using Atom (do not use Word as it will add Carriage Return and Line Feeds which node-RED will not understand).

Select the whole file content (Ctrl + A) and copy to the Clipboard.

Now we will import the flow for Facial Analysis.Click on the Hamburger icon again on the top right hand cornerClick on Import

8Version 1.0 – 2021© Amphoria, LLC

Page 9: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

This is what you will see.

Paste the content of the clipboard into the pink area of the dialog

Click on new flow button and then click Import.

9Version 1.0 – 2021© Amphoria, LLC

Page 10: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Click anywhere on the palette to drop the flow onto the workspace.

11. Using Atom (or any text editor) open the file named CurlCommand.txt12. you will find “apikeygoeshere”, replace it with the API key you got from face++

you will find “apisecretgoeshere” , replace it with the API Secret that you got from face++Here’s a snippet of what is currently in the txt file:-F "api_key=apikeygoeshere" -F "api_secret=apisecretgoeshere"

13. Here is what the api_key part will look similar to:-F "api_key= x4OMw3gxKjzImhRUlcEW_aXonItH7zna"

14. Save the fileIn Atom do a Ctrl-A to select the entire curl command and copy to the clipboard.

15. Update the curl node

10Version 1.0 – 2021© Amphoria, LLC

Page 11: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

Double click on the curl node

Select the entire command (CTRL-A) then paste the content of the clipboard into the Command field (we show an example above, your Command field will be empty).Click the red Done buttonClick the Deploy button

Now we get to check if it works…

1. Go to the FacialAnalysis directory in your file system2. Double click on facepp.html

this will open the application in your browser

11Version 1.0 – 2021© Amphoria, LLC

Page 12: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

make sure that the web page Status field at the bottom indicates “WebSocket Connected” this means that the MQTT connection is open and ready

3. Click Take a Picture button4. Navigate to the Pictures for Analysis directory5. Select a picture and double click on it, this will send the picture to the Node-RED flow

from the web page and Node-RED will issue the curl request to the face++ service

Your results will look something like one of these:

12Version 1.0 – 2021© Amphoria, LLC

Page 13: Getting Started - Amphoria · Web viewIoT Facial Analysis A starter Guide for IoT Author: Peter Rhys Jenkins Version: 1.0 May 4, 2021 Getting Started This guide will help you install

If you would like to see different results, choose any picture on your computer that is less than 2 Megabytes in size.

ENJOY!If you run into any issues, please contact us:

[email protected]

13Version 1.0 – 2021© Amphoria, LLC