https://github.com/benc-uk/face-vision-app
Azure Cognitive Face/Vision APIs - Pure HTML5/JS Client
https://github.com/benc-uk/face-vision-app
azure cognitive-services facial-recognition html5-video mobile pure-javascript
Last synced: 4 months ago
JSON representation
Azure Cognitive Face/Vision APIs - Pure HTML5/JS Client
- Host: GitHub
- URL: https://github.com/benc-uk/face-vision-app
- Owner: benc-uk
- Created: 2019-11-14T17:41:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-08-16T11:16:10.000Z (almost 4 years ago)
- Last Synced: 2025-04-03T15:43:17.104Z (about 1 year ago)
- Topics: azure, cognitive-services, facial-recognition, html5-video, mobile, pure-javascript
- Language: JavaScript
- Homepage: https://code.benco.io/face-vision-app/
- Size: 11 MB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Computer Vision & Face Detection - Pure HTML5/JS Client
This is a simple demo web client app written in pure JS and HTML5 for capturing images from the device camera, and detecting faces and processing/displaying the results
It is optimized for mobile devices and browsers but can be used on a PC/Desktop browser also
The app has three modes:
- Realtime face detection using client side Tensorflow models and [face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html). This has no pre-reqs or config required.
- Face detection using the Azure Face API, see below
- General scene detection and analysis using Computer Vision API, see below
The two Azure modes are optional and are disabled by default
## Live Demo
[Live demo hosted on GitHub pages here](https://code.benco.io/face-vision-app/)
## Azure Cognitive Services Mode
- 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.json` file to `config.json`
Edit `config.json` and change the following:
- `FACE_API_KEY` and `FACE_API_ENDPOINT` to point to your instance of the 'Face API' along with the key
- `VISION_API_KEY` and `VISION_API_ENDPOINT` to point to your instance of the 'Computer Vision API' along with the key
## Deployment
The app is completely static has no backend or server, 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`, `img` & `model` directories
## Config
There are two other settings in config.json which can be set:
```jsonc
// This is how often the video is captured and sent to the Azure APIs in milliseconds
// - Set to zero to disable realtime capture, users will need to tap to trigger
// - Low values could result in very high API usage and potentially costs
// - Values 500 and below will only work on a fast network and will give you a HUGE bill
"AZURE_REFRESH_RATE": 4000,
// How often the capture/analysis is done with the local Tensforflow.js models
// This can be much higher, as no remote API is called and no costs are involved
"TF_REFRESH_RATE": 700
```
## Usage
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)