This is a simple demo web client app written in pure JS and HTML5 for capturing images from the device camera, sending them to Azure Cognitive Services, and processing/displaying the results
It is optimized for mobile devices and browsers but can be used on a PC/Desktop browser also
- Create a Face API service account/instance in Azure. Make a note of the endpoint and key. See also https://docs.microsoft.com/en-us/azure/cognitive-services/face/
- Create a Computer Vision API service account/instance in Azure. Make a note of the endpoint and key. See also https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/
Copy/rename the config.sample.mjs
file to config.mjs
Edit config.mjs
and change the following:
FACE_API_KEY
andFACE_API_ENDPOINT
to your values for the face APIVISION_API_KEY
andVISION_API_ENDPOINT
to your values for the computer vision API
The app is completely static so can be deployed almost anywhere including Azure Storage accounts, App Service, Netlify, GitHub Pages etc. Deploy the index.html file as well as css
, js
and img
directories
The app is simple and self explanatory, and is designed for both mobile and desktop use. It will open the first camera on the device, and clicking/tapping the camera icon will switch through available cameras.
It will capture images from the camera/video every 3 seconds by default (configurable in config.mjs) and analyse them. The results are drawn over the video.
Tapping/clicking the image will change between low & high detail modes (how much information is shown/drawn over the image)