Demos

Demos are included in /demo:

Browser Demos

index.html & index.js: [browser]
Main browser demo app that showcases all Human capabilities:
- Optional web workers
- Optional synchronous or asynchronous workflow
- Interpolation & smoothing
- Image processing
simple: [browser]
Simple demo in JavaScript that analzyes either WebCam or WebRTC input
simple: [browser]
Simple demo in TypeScript that analzyes either WebCam
facematch: [browser]
Extracts faces from images, calculates face descriptors and simmilarities and matches them to known database
multithread: [browser]
Runs each human module in a separate web worker for highest possible performance
See https://github.com/vladmandic/human/demo/facematch/node-match.md for details
face3d: [browser]
Uses WebCam as input and draws 3D render of face mesh using Three.js

NodeJS Demos

nodejs/node: [nodejs]
Process images from files, folders or URLs
nodejs/node-canvas: [nodejs]
Process image from file or URL and draw results to a new image file using node-canvas
nodejs/node-multiprocess & nodejs/node-multiprocess-worker: [nodejs]
Parallel processing in human detect in multiple child worker processes
facematch/node-match & facematch/node-match-worker: [nodejs]
Parallel processing of face match in multiple child worker threads
nodejs/node-video: [nodejs]
Processing of video input using ffmpeg
nodejs/node-webcam: [nodejs]
Processing of webcam screenshots using fswebcam

External Demos

Human-VRM
VR model with head, face, eye, body and hand tracking
Using three for 3D display and scene management and @pixiv/three-vrm for VR model mapping
Code | Demo

Main Demo

index.html: Full demo using Human ESM module running in Browsers,
includes selectable backends and WebWorkers

You can run browser demo either live from git pages, by serving demo folder from your web server or use
included micro http2 server with source file monitoring and dynamic rebuild

On notes on how to use built-in micro server, see notes on Development Server

Demo Inputs

Demo is in demo/index.html loads demo/index.js

Demo can process:

Sample images
WebCam input
WebRTC input

Note that WebRTC connection requires a WebRTC server that provides a compatible media track such as H.264 video track
For such a WebRTC server implementation see https://github.com/vladmandic/stream-rtsp project
that implements a connection to IP Security camera using RTSP protocol and transcodes it to WebRTC
ready to be consumed by a client such as Human

Demo Options

Demo implements several ways to use Human library,
all configurable in browse.js:ui configuration object and in the UI itself:

const ui = {
  crop: true, // video mode crop to size or leave full frame
  columns: 2, // when processing sample images create this many columns
  facing: true, // camera facing front or back
  useWorker: false, // use web workers for processing
  worker: 'index-worker.js',
  samples: ['../assets/sample6.jpg', '../assets/sample1.jpg', '../assets/sample4.jpg', '../assets/sample5.jpg', '../assets/sample3.jpg', '../assets/sample2.jpg'],
  compare: '../assets/sample-me.jpg',
  useWebRTC: false, // use webrtc as camera source instead of local webcam
  webRTCServer: 'http://localhost:8002',
  webRTCStream: 'reowhite',
  console: true, // log messages to browser console
  maxFPSframes: 10, // keep fps history for how many frames
  modelsPreload: true, // preload human models on startup
  modelsWarmup: true, // warmup human models on startup
  busy: false, // internal camera busy flag
  buffered: true, // should output be buffered between frames
  bench: true, // show gl fps benchmark window
};

Additionally, some parameters are held inside Human instance:

human.draw.options = {
  color: <string>'rgba(173, 216, 230, 0.3)', // 'lightblue' with light alpha channel
  labelColor: <string>'rgba(173, 216, 230, 1)', // 'lightblue' with dark alpha channel
  shadowColor: <string>'black',
  font: <string>'small-caps 16px "Segoe UI"',
  lineHeight: <number>20,
  lineWidth: <number>6,
  pointSize: <number>2,
  roundRect: <number>28,
  drawPoints: <Boolean>false,
  drawLabels: <Boolean>true,
  drawBoxes: <Boolean>true,
  drawPolygons: <Boolean>true,
  fillPolygons: <Boolean>false,
  useDepth: <Boolean>true,
  useCurves: <Boolean>false,
  bufferedOutput: <Boolean>true,
  useRawBoxes: <Boolean>false,
};

Demo app can use URL parameters to override configuration values
For example:

Force using WASM as backend: https://vladmandic.github.io/human/demo/index.html?backend=wasm
Enable WebWorkers: https://vladmandic.github.io/human/demo/index.html?worker=true
Skip pre-loading and warming up: https://vladmandic.github.io/human/demo/index.html?preload=false&warmup=false

Face 3D Rendering using OpenGL

face3d: Demo for Browsers that uses Three.js for 3D OpenGL rendering of a detected face

Face Recognition Demo

demo/facematch: Demo for Browsers that uses all face description and embedding features to
detect, extract and identify all faces plus calculate simmilarity between them

It highlights functionality such as:

Loading images
Extracting faces from images
Calculating face embedding descriptors
Finding face similarity and sorting them by similarity
Finding best face match based on a known list of faces and printing matches

Multithreaded Demo

demo/multithread: Demo for Browsers that uses multiple worker processes
Showcases maximum performance sinch each human model runs in a separate worker thread
while main thread just combines and draws results
Achieves 20+ detection frame rate and 60+ refresh frame rate on a medium hardware

NodeJS Demo

nodejs/node.js: Demo using NodeJS with CommonJS module
Simple demo that can process any input image

Note that you can run demo as-is and it will perform detection on provided sample images,
or you can pass a path to image to analyze, either on local filesystem or using URL

node demo/nodejs/node.js

2021-06-01 08:52:15 INFO:  @vladmandic/human version 2.0.0
2021-06-01 08:52:15 INFO:  User: vlado Platform: linux Arch: x64 Node: v16.0.0
2021-06-01 08:52:15 INFO:  Current folder: /home/vlado/dev/human
2021-06-01 08:52:15 INFO:  Human: 2.0.0
2021-06-01 08:52:15 INFO:  Active Configuration {
  backend: 'tensorflow',
  modelBasePath: 'file://models/',
  wasmPath: '../node_modules/@tensorflow/tfjs-backend-wasm/dist/',
  debug: true,
  async: false,
  warmup: 'full',
  cacheSensitivity: 0.75,
  filter: {
    enabled: true,
    width: 0,
    height: 0,
    flip: true,
    return: true,
    brightness: 0,
    contrast: 0,
    sharpness: 0,
    blur: 0,
    saturation: 0,
    hue: 0,
    negative: false,
    sepia: false,
    vintage: false,
    kodachrome: false,
    technicolor: false,
    polaroid: false,
    pixelate: 0
  },
  gesture: { enabled: true },
  face: {
    enabled: true,
    detector: { modelPath: 'blazeface.json', rotation: false, maxDetected: 10, skipFrames: 15, minConfidence: 0.2, iouThreshold: 0.1, return: false, enabled: true },
    mesh: { enabled: true, modelPath: 'facemesh.json' },
    iris: { enabled: true, modelPath: 'iris.json' },
    description: { enabled: true, modelPath: 'faceres.json', skipFrames: 16, minConfidence: 0.1 },
    emotion: { enabled: true, minConfidence: 0.1, skipFrames: 17, modelPath: 'emotion.json' }
  },
  body: { enabled: true, modelPath: 'movenet-lightning.json', maxDetected: 1, minConfidence: 0.2 },
  hand: {
    enabled: true,
    rotation: true,
    skipFrames: 18,
    minConfidence: 0.1,
    iouThreshold: 0.1,
    maxDetected: 2,
    landmarks: true,
    detector: { modelPath: 'handdetect.json' },
    skeleton: { modelPath: 'handskeleton.json' }
  },
  object: { enabled: true, modelPath: 'mb3-centernet.json', minConfidence: 0.2, iouThreshold: 0.4, maxDetected: 10, skipFrames: 19 }
}
08:52:15.673 Human: version: 2.0.0
08:52:15.674 Human: tfjs version: 3.6.0
08:52:15.674 Human: platform: linux x64
08:52:15.674 Human: agent: NodeJS v16.0.0
08:52:15.674 Human: setting backend: tensorflow
08:52:15.710 Human: load model: file://models/blazeface.json
08:52:15.743 Human: load model: file://models/facemesh.json
08:52:15.744 Human: load model: file://models/iris.json
08:52:15.760 Human: load model: file://models/emotion.json
08:52:15.847 Human: load model: file://models/handdetect.json
08:52:15.847 Human: load model: file://models/handskeleton.json
08:52:15.914 Human: load model: file://models/movenet-lightning.json
08:52:15.957 Human: load model: file://models/mb3-centernet.json
08:52:16.015 Human: load model: file://models/faceres.json
08:52:16.015 Human: tf engine state: 50796152 bytes 1318 tensors
2021-06-01 08:52:16 INFO:  Loaded: [ 'face', 'movenet', 'handpose', 'emotion', 'centernet', 'faceres', [length]: 6 ]
2021-06-01 08:52:16 INFO:  Memory state: { unreliable: true, numTensors: 1318, numDataBuffers: 1318, numBytes: 50796152 }
2021-06-01 08:52:16 INFO:  Loading image: private/daz3d/daz3d-kiaria-02.jpg
2021-06-01 08:52:16 STATE: Processing: [ 1, 1300, 1000, 3, [length]: 4 ]
2021-06-01 08:52:17 DATA:  Results:
2021-06-01 08:52:17 DATA:    Face: #0 boxScore:0.88 faceScore:1 age:16.3 genderScore:0.97 gender:female emotionScore:0.85 emotion:happy iris:61.05
2021-06-01 08:52:17 DATA:    Body: #0 score:0.82 keypoints:17
2021-06-01 08:52:17 DATA:    Hand: #0 score:0.89
2021-06-01 08:52:17 DATA:    Hand: #1 score:0.97
2021-06-01 08:52:17 DATA:    Gesture: face#0 gesture:facing left
2021-06-01 08:52:17 DATA:    Gesture: body#0 gesture:leaning right
2021-06-01 08:52:17 DATA:    Gesture: hand#0 gesture:pinky forward middlefinger up
2021-06-01 08:52:17 DATA:    Gesture: hand#1 gesture:pinky forward middlefinger up
2021-06-01 08:52:17 DATA:    Gesture: iris#0 gesture:looking left
2021-06-01 08:52:17 DATA:    Object: #0 score:0.55 label:person
2021-06-01 08:52:17 DATA:    Object: #1 score:0.23 label:bottle
2021-06-01 08:52:17 DATA:  Persons:
2021-06-01 08:52:17 DATA:    #0: Face:score:1 age:16.3 gender:female iris:61.05 Body:score:0.82 keypoints:17 LeftHand:no RightHand:yes Gestures:4

NodeJS Multi-process Demo

nodejs/node-multiprocess.js and nodejs/node-multiprocess-worker.js: Demo using NodeJS with CommonJS module
Demo that starts n child worker processes for parallel execution

node demo/nodejs/node-multiprocess.js

2021-06-01 08:54:19 INFO:  @vladmandic/human version 2.0.0
2021-06-01 08:54:19 INFO:  User: vlado Platform: linux Arch: x64 Node: v16.0.0
2021-06-01 08:54:19 INFO:  FaceAPI multi-process test
2021-06-01 08:54:19 STATE: Enumerated images: ./assets 15
2021-06-01 08:54:19 STATE: Main: started worker: 130362
2021-06-01 08:54:19 STATE: Main: started worker: 130363
2021-06-01 08:54:19 STATE: Main: started worker: 130369
2021-06-01 08:54:19 STATE: Main: started worker: 130370
2021-06-01 08:54:20 STATE: Worker: PID: 130370 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130362 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130369 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130363 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130370
2021-06-01 08:54:21 INFO:  Latency: worker initializtion:  1348 message round trip: 0
2021-06-01 08:54:21 DATA:  Worker received message: 130370 { test: true }
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:21 DATA:  Worker received message: 130362 { image: 'samples/ai-face.jpg' }
2021-06-01 08:54:21 DATA:  Worker received message: 130370 { image: 'samples/ai-body.jpg' }
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:21 DATA:  Worker received message: 130369 { image: 'assets/human-sample-upper.jpg' }
2021-06-01 08:54:21 DATA:  Worker received message: 130363 { image: 'assets/sample-me.jpg' }
2021-06-01 08:54:24 DATA:  Main: worker finished: 130362 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:24 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:24 DATA:  Worker received message: 130362 { image: 'assets/sample1.jpg' }
2021-06-01 08:54:25 DATA:  Main: worker finished: 130369 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:25 DATA:  Main: worker finished: 130370 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130370
2021-06-01 08:54:25 DATA:  Worker received message: 130369 { image: 'assets/sample2.jpg' }
2021-06-01 08:54:25 DATA:  Main: worker finished: 130363 detected faces: 1 bodies: 1 hands: 0 objects: 2
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:25 DATA:  Worker received message: 130370 { image: 'assets/sample3.jpg' }
2021-06-01 08:54:25 DATA:  Worker received message: 130363 { image: 'assets/sample4.jpg' }
2021-06-01 08:54:30 DATA:  Main: worker finished: 130362 detected faces: 3 bodies: 1 hands: 0 objects: 7
2021-06-01 08:54:30 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:30 DATA:  Worker received message: 130362 { image: 'assets/sample5.jpg' }
2021-06-01 08:54:31 DATA:  Main: worker finished: 130369 detected faces: 3 bodies: 1 hands: 0 objects: 5
2021-06-01 08:54:31 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:31 DATA:  Worker received message: 130369 { image: 'assets/sample6.jpg' }
2021-06-01 08:54:31 DATA:  Main: worker finished: 130363 detected faces: 4 bodies: 1 hands: 2 objects: 2
2021-06-01 08:54:31 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:39 STATE: Main: worker exit: 130370 0
2021-06-01 08:54:39 DATA:  Main: worker finished: 130362 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:39 DATA:  Main: worker finished: 130369 detected faces: 1 bodies: 1 hands: 1 objects: 3
2021-06-01 08:54:39 STATE: Main: worker exit: 130362 0
2021-06-01 08:54:39 STATE: Main: worker exit: 130369 0
2021-06-01 08:54:41 DATA:  Main: worker finished: 130363 detected faces: 9 bodies: 1 hands: 0 objects: 10
2021-06-01 08:54:41 STATE: Main: worker exit: 130363 0
2021-06-01 08:54:41 INFO:  Processed: 15 images in total: 22006 ms working: 20658 ms average: 1377 ms

NodeJS Demo for Video Input Processing

nodejs/node-video.js: Demo that uses ffmpeg to decode video input (can be a file, stream or device such as webcam) and output results in a pipe that are captured by demo app as frames and processed by Human library

NodeJS Demo for WebCam Screenshot Processing

nodejs/node-webcam.js: Demo that uses fswebcam to connect to web cam and take screenshots at regular interval which are then processed by Human library

Human Library Wiki Pages
3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Demos

Demos

Browser Demos

NodeJS Demos

External Demos

Main Demo

Demo Inputs

Demo Options

Face 3D Rendering using OpenGL

Face Recognition Demo

Multithreaded Demo

NodeJS Demo

NodeJS Multi-process Demo

NodeJS Demo for Video Input Processing

NodeJS Demo for WebCam Screenshot Processing

Clone this wiki locally