From 9173ba06bb5f5aa361ea391ea88b6aaf0eb34006 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Fri, 5 Mar 2021 11:43:36 -0500 Subject: [PATCH] update human.draw helper methods --- Change-Log.md | 9 ++++++- Usage.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 1 deletion(-) diff --git a/Change-Log.md b/Change-Log.md index ee51b43..adce9de 100644 --- a/Change-Log.md +++ b/Change-Log.md @@ -1,6 +1,6 @@ # @vladmandic/human -Version: **0.40.2** +Version: **0.40.3** Description: **Human: AI-powered 3D Face Detection, Face Embedding & Recognition, Body Pose Tracking, Hand & Finger Tracking, Iris Analysis, Age & Gender & Emotion Prediction & Gesture Recognition** Author: **Vladimir Mandic ** @@ -11,6 +11,13 @@ Repository: **** ### **HEAD -> main** 2021/03/05 mandic00@live.com +- fix demo + +### **0.40.3** 2021/03/05 mandic00@live.com + + +### **0.40.2** 2021/03/05 mandic00@live.com + - added blazepose-upper ### **0.40.1** 2021/03/04 mandic00@live.com diff --git a/Usage.md b/Usage.md index 707f73d..69817eb 100644 --- a/Usage.md +++ b/Usage.md @@ -42,6 +42,71 @@ Additionally, `Human` library exposes several objects and methods: // face.embedding module ``` +Plus additional helper functions inside `human.draw`: + +```js + human.draw.canvas(inCanvas, outCanvas) // simply copies one canvas to another, + // can be used to draw results.canvas to user canvas on page + human.draw.face(canvas, results.face) // draw face detection results to canvas + human.draw.body(canvas, results.body) // draw body detection results to canvas + human.draw.hand(canvas, result.hand) // draw hand detection results to canvas + human.draw.gesture(canvas, result.gesture) // draw detected gesture results to canvas +``` + +Style of drawing is configurable via `human.draw.options` object: + +```js + color: 'rgba(173, 216, 230, 0.3)', // 'lightblue' with light alpha channel + labelColor: 'rgba(173, 216, 230, 1)', // 'lightblue' with dark alpha channel + shadowColor: 'black', // draw shadows underneath labels, set to blank to disable + font: 'small-caps 16px "Segoe UI"', // font used for labels + lineHeight: 20, // spacing between lines for multi-line labels + lineWidth: 6, // line width of drawn polygons + drawLabels: true, // draw labels with detection results + drawBoxes: true, // draw boxes around detected faces + roundRect: 8, // should boxes have round corners and rounding value + drawPoints: true, // draw detected points in all objects + pointSize: 2, // size of points + drawPolygons: true, // draw polygons such as body and face mesh + fillPolygons: true, // fill polygons in face mesh + useDepth: true, // use z-axis value when available to determine color shade + bufferedOutput: false, // experimental: buffer and interpolate results between frames +``` + +
+ +Example simple app that uses Human to process video input and +draw output on screen using internal draw helper functions + +```js +import Human from '@vladmandic/human'; + +// create instance of human with simple configuration using default values +const config = { backend: 'wasm' }; +const human = new Human(config); + +function detectVideo() { + // select input HTMLVideoElement and output HTMLCanvasElement from page + const inputVideo = document.getElementById('video-id'); + const outputCanvas = document.getElementById('canvas-id'); + // perform processing using default configuration + human.detect(inputVideo).then((result) => { + // result object will contain detected details as well as the processed canvas itself + // first draw processed frame on canvas + human.draw.canvas(result.canvas, outputCanvas); + // then draw results on the same canvas + human.draw.face(outputCanvas, result.face); + human.draw.body(outputCanvas, result.body); + human.draw.hand(outputCanvas, result.hand); + human.draw.gesture(outputCanvas, result.gesture); + // loop immediate to next frame + requestAnimationFrame(detectVideo); + }); +} + +detectVideo(); +``` +
Note that when using `Human` library in `NodeJS`, you must load and parse the image *before* you pass it for detection and dispose it afterwards