mirror of https://github.com/vladmandic/human
update human.draw helper methods
Vladimir Mandic
parent
388c968e9c
commit
c2e74d2ba1
38
README.md
38
README.md
|
|
@ -13,13 +13,14 @@ Compatible with *Browser*, *WebWorker* and *NodeJS* execution on both Windows an
|
|||
- Browser/WebWorker: Compatible with *CPU*, *WebGL*, *WASM* and *WebGPU* backends
|
||||
- NodeJS: Compatible with software *tfjs-node* and CUDA accelerated backends *tfjs-node-gpu*
|
||||
|
||||
Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) for processing of live WebCam video or static images
|
||||
Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) for processing of live WebCam video or static images
|
||||
Live demo uses `WASM` backend for faster startup, but results are slower than when using `WebGL` backend
|
||||
|
||||
<br>
|
||||
|
||||
## Project pages
|
||||
|
||||
- [**Live Demo**](https://vladmandic.github.io/human/demo/index.html)
|
||||
- [**Live Demo**](https://vladmandic.github.io/human/demo/index.html)
|
||||
- [**Code Repository**](https://github.com/vladmandic/human)
|
||||
- [**NPM Package**](https://www.npmjs.com/package/@vladmandic/human)
|
||||
- [**Issues Tracker**](https://github.com/vladmandic/human/issues)
|
||||
|
|
@ -102,5 +103,38 @@ As presented in the demo application...
|
|||
|
||||
|
||||
|
||||
<br><hr><br>
|
||||
|
||||
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();
|
||||
```
|
||||
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,10 @@
|
|||
|
||||
import Human from '../dist/human.esm.js'; // equivalent of @vladmandic/human
|
||||
|
||||
import draw from './draw.js';
|
||||
import Menu from './menu.js';
|
||||
import GLBench from './gl-bench.js';
|
||||
|
||||
const userConfig = {}; // add any user configuration overrides
|
||||
const userConfig = { backend: 'wasm' }; // add any user configuration overrides
|
||||
|
||||
/*
|
||||
const userConfig = {
|
||||
|
|
@ -27,40 +26,31 @@ const human = new Human(userConfig);
|
|||
|
||||
// ui options
|
||||
const ui = {
|
||||
baseColor: 'rgba(173, 216, 230, 0.3)', // 'lightblue' with light alpha channel
|
||||
baseBackground: 'rgba(50, 50, 50, 1)', // 'grey'
|
||||
baseLabel: 'rgba(173, 216, 230, 1)', // 'lightblue' with dark alpha channel
|
||||
baseFontProto: 'small-caps {size} "Segoe UI"',
|
||||
baseLineWidth: 12,
|
||||
crop: true,
|
||||
columns: 2,
|
||||
busy: false,
|
||||
facing: true,
|
||||
useWorker: false,
|
||||
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: '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',
|
||||
drawLabels: true,
|
||||
drawBoxes: true,
|
||||
drawPoints: true,
|
||||
drawPolygons: true,
|
||||
fillPolygons: false,
|
||||
useDepth: true,
|
||||
console: true,
|
||||
maxFPSframes: 10,
|
||||
modelsPreload: true,
|
||||
menuWidth: 0,
|
||||
menuHeight: 0,
|
||||
camera: {},
|
||||
detectFPS: [],
|
||||
drawFPS: [],
|
||||
buffered: false,
|
||||
drawWarmup: false,
|
||||
drawThread: null,
|
||||
detectThread: null,
|
||||
framesDraw: 0,
|
||||
framesDetect: 0,
|
||||
bench: false,
|
||||
console: true, // log messages to browser console
|
||||
maxFPSframes: 10, // keep fps history for how many frames
|
||||
modelsPreload: true, // preload human models on startup
|
||||
busy: false, // internal camera busy flag
|
||||
menuWidth: 0, // internal
|
||||
menuHeight: 0, // internal
|
||||
camera: {}, // internal, holds details of webcam details
|
||||
detectFPS: [], // internal, holds fps values for detection performance
|
||||
drawFPS: [], // internal, holds fps values for draw performance
|
||||
buffered: false, // experimental, should output be buffered between frames
|
||||
drawWarmup: false, // debug only, should warmup image processing be displayed on startup
|
||||
drawThread: null, // perform draw operations in a separate thread
|
||||
detectThread: null, // perform detect operations in a separate thread
|
||||
framesDraw: 0, // internal, statistics on frames drawn
|
||||
framesDetect: 0, // internal, statistics on frames detected
|
||||
bench: false, // show gl fps benchmark window
|
||||
lastFrame: 0, // time of last frame processing
|
||||
};
|
||||
|
||||
// global variables
|
||||
|
|
@ -90,7 +80,8 @@ function log(...msg) {
|
|||
|
||||
function status(msg) {
|
||||
// eslint-disable-next-line no-console
|
||||
document.getElementById('status').innerText = msg;
|
||||
const div = document.getElementById('status');
|
||||
if (div) div.innerText = msg;
|
||||
}
|
||||
|
||||
let original;
|
||||
|
|
@ -139,10 +130,10 @@ async function drawResults(input) {
|
|||
}
|
||||
|
||||
// draw all results
|
||||
await draw.face(result.face, canvas, ui, human.facemesh.triangulation);
|
||||
await draw.body(result.body, canvas, ui);
|
||||
await draw.hand(result.hand, canvas, ui);
|
||||
await draw.gesture(result.gesture, canvas, ui);
|
||||
await human.draw.face(canvas, result.face);
|
||||
await human.draw.body(canvas, result.body);
|
||||
await human.draw.hand(canvas, result.hand);
|
||||
await human.draw.gesture(canvas, result.gesture);
|
||||
await calcSimmilariry(result);
|
||||
|
||||
// update log
|
||||
|
|
@ -230,9 +221,6 @@ async function setupCamera() {
|
|||
ui.menuWidth.input.setAttribute('value', video.width);
|
||||
ui.menuHeight.input.setAttribute('value', video.height);
|
||||
// silly font resizing for paint-on-canvas since viewport can be zoomed
|
||||
const size = Math.trunc(window.devicePixelRatio * (8 + (4 * canvas.width / window.innerWidth)));
|
||||
ui.baseFont = ui.baseFontProto.replace(/{size}/, `${size}px`);
|
||||
ui.baseLineHeight = size + 2;
|
||||
if (live) video.play();
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
if (live && !ui.detectThread) runHumanDetect(video, canvas);
|
||||
|
|
@ -404,9 +392,6 @@ async function detectVideo() {
|
|||
async function detectSampleImages() {
|
||||
document.getElementById('play').style.display = 'none';
|
||||
userConfig.videoOptimized = false;
|
||||
const size = Math.trunc(window.devicePixelRatio * (12 + (4 * ui.columns)));
|
||||
ui.baseFont = ui.baseFontProto.replace(/{size}/, `${size}px`);
|
||||
ui.baseLineHeight = size + 2;
|
||||
document.getElementById('canvas').style.display = 'none';
|
||||
document.getElementById('samples-container').style.display = 'block';
|
||||
log('Running detection of sample images');
|
||||
|
|
@ -439,12 +424,12 @@ function setupMenu() {
|
|||
setupCamera();
|
||||
});
|
||||
menu.display.addHTML('<hr style="border-style: inset; border-color: dimgray">');
|
||||
menu.display.addBool('use 3D depth', ui, 'useDepth');
|
||||
menu.display.addBool('print labels', ui, 'drawLabels');
|
||||
menu.display.addBool('draw boxes', ui, 'drawBoxes');
|
||||
menu.display.addBool('draw polygons', ui, 'drawPolygons');
|
||||
menu.display.addBool('Fill Polygons', ui, 'fillPolygons');
|
||||
menu.display.addBool('draw points', ui, 'drawPoints');
|
||||
menu.display.addBool('use 3D depth', human.draw.options, 'useDepth');
|
||||
menu.display.addBool('print labels', human.draw.options, 'drawLabels');
|
||||
menu.display.addBool('draw boxes', human.draw.options, 'drawBoxes');
|
||||
menu.display.addBool('draw polygons', human.draw.options, 'drawPolygons');
|
||||
menu.display.addBool('Fill Polygons', human.draw.options, 'fillPolygons');
|
||||
menu.display.addBool('draw points', human.draw.options, 'drawPoints');
|
||||
|
||||
menu.image = new Menu(document.body, '', { top: `${document.getElementById('menubar').offsetHeight}px`, left: x[1] });
|
||||
menu.image.addBool('enabled', human.config.filter, 'enabled', (val) => human.config.filter.enabled = val);
|
||||
|
|
@ -541,10 +526,7 @@ async function drawWarmup(res) {
|
|||
canvas.height = res.canvas.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(res.canvas, 0, 0, res.canvas.width, res.canvas.height, 0, 0, canvas.width, canvas.height);
|
||||
await draw.face(res.face, canvas, ui, human.facemesh.triangulation);
|
||||
await draw.body(res.body, canvas, ui);
|
||||
await draw.hand(res.hand, canvas, ui);
|
||||
await draw.gesture(res.gesture, canvas, ui);
|
||||
await human.draw.all(canvas, res);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
|
|
@ -561,7 +543,6 @@ async function main() {
|
|||
if (!ui.useWorker) {
|
||||
status('initializing');
|
||||
const res = await human.warmup(userConfig); // this is not required, just pre-warms all models for faster initial inference
|
||||
ui.baseFont = ui.baseFontProto.replace(/{size}/, '16px');
|
||||
if (res && res.canvas && ui.drawWarmup) await drawWarmup(res);
|
||||
}
|
||||
status('human: ready');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,436 @@
|
|||
import { TRI468 as triangulation } from './blazeface/coords';
|
||||
|
||||
export const options = {
|
||||
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',
|
||||
font: 'small-caps 16px "Segoe UI"',
|
||||
lineHeight: 20,
|
||||
lineWidth: 6,
|
||||
pointSize: 2,
|
||||
roundRect: 8,
|
||||
drawLabels: true,
|
||||
drawBoxes: true,
|
||||
drawPoints: false,
|
||||
drawPolygons: true,
|
||||
fillPolygons: true,
|
||||
useDepth: true,
|
||||
bufferedOutput: false,
|
||||
};
|
||||
|
||||
function point(ctx, x, y) {
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, options.pointSize, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function rect(ctx, x, y, width, height) {
|
||||
if (options.roundRect && options.roundRect > 0) {
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + options.roundRect, y);
|
||||
ctx.lineTo(x + width - options.roundRect, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + options.roundRect);
|
||||
ctx.lineTo(x + width, y + height - options.roundRect);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - options.roundRect, y + height);
|
||||
ctx.lineTo(x + options.roundRect, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - options.roundRect);
|
||||
ctx.lineTo(x, y + options.roundRect);
|
||||
ctx.quadraticCurveTo(x, y, x + options.roundRect, y);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
} else {
|
||||
rect(ctx, x, y, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
function curve(ctx, points = []) {
|
||||
if (points.length < 2) return;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
const xMid = (points[i][0] + points[i + 1][0]) / 2;
|
||||
const yMid = (points[i][1] + points[i + 1][1]) / 2;
|
||||
const cpX1 = (xMid + points[i][0]) / 2;
|
||||
const cpX2 = (xMid + points[i + 1][1]) / 2;
|
||||
ctx.quadraticCurveTo(cpX1, points[i][1], xMid, yMid);
|
||||
ctx.quadraticCurveTo(cpX2, points[i + 1][1], points[i + 1][0], points[i + 1][0]);
|
||||
}
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
function bezier(ctx, points) {
|
||||
const tension = 0; // tension at 0 will be straight line
|
||||
const factor = 1; // factor is normally 1, but changing the value can control the smoothness too
|
||||
if (points.length < 2) return;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
let dx1 = 0;
|
||||
let dy1 = 0;
|
||||
let preP = points[0];
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const curP = points[i];
|
||||
const nexP = points[i + 1];
|
||||
const m = nexP ? (nexP[1] - preP[1]) / (nexP[0] - preP[0]) : 0;
|
||||
const dx2 = nexP ? (nexP[0] - curP[0]) * -factor : 0;
|
||||
const dy2 = nexP ? dx2 * m * tension : 0;
|
||||
ctx.bezierCurveTo(preP[0] - dx1, preP[1] - dy1, curP[0] + dx2, curP[1] + dy2, curP[0], curP[1]);
|
||||
dx1 = dx2;
|
||||
dy1 = dy2;
|
||||
preP = curP;
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
function spline(ctx, points) {
|
||||
const tension = 0.8;
|
||||
if (points.length < 2) return;
|
||||
const va = (arr, i, j) => [arr[2 * j] - arr[2 * i], arr[2 * j + 1] - arr[2 * i + 1]];
|
||||
const distance = (arr, i, j) => Math.sqrt(((arr[2 * i] - arr[2 * j]) ** 2) + ((arr[2 * i + 1] - arr[2 * j + 1]) ** 2));
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
|
||||
const ctlpts = (x1, y1, x2, y2, x3, y3) => {
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
const v = va(arguments, 0, 2);
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
const d01 = distance(arguments, 0, 1);
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
const d12 = distance(arguments, 1, 2);
|
||||
const d012 = d01 + d12;
|
||||
return [
|
||||
x2 - v[0] * tension * d01 / d012, y2 - v[1] * tension * d01 / d012,
|
||||
x2 + v[0] * tension * d12 / d012, y2 + v[1] * tension * d12 / d012,
|
||||
];
|
||||
};
|
||||
const pts: any[] = [];
|
||||
for (const pt of points) {
|
||||
pts.push(pt[0]);
|
||||
pts.push(pt[1]);
|
||||
}
|
||||
let cps = [];
|
||||
for (let i = 0; i < pts.length - 2; i += 1) {
|
||||
// @ts-ignore
|
||||
cps = cps.concat(ctlpts(pts[2 * i + 0], pts[2 * i + 1], pts[2 * i + 2], pts[2 * i + 3], pts[2 * i + 4], pts[2 * i + 5]));
|
||||
}
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.strokeStyle = options.color;
|
||||
if (points.length === 2) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pts[0], pts[1]);
|
||||
ctx.lineTo(pts[2], pts[3]);
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pts[0], pts[1]);
|
||||
// first segment is a quadratic
|
||||
ctx.quadraticCurveTo(cps[0], cps[1], pts[2], pts[3]);
|
||||
// for all middle points, connect with bezier
|
||||
let i;
|
||||
for (i = 2; i < ((pts.length / 2) - 1); i += 1) {
|
||||
ctx.bezierCurveTo(cps[(2 * (i - 1) - 1) * 2], cps[(2 * (i - 1) - 1) * 2 + 1], cps[(2 * (i - 1)) * 2], cps[(2 * (i - 1)) * 2 + 1], pts[i * 2], pts[i * 2 + 1]);
|
||||
}
|
||||
// last segment is a quadratic
|
||||
ctx.quadraticCurveTo(cps[(2 * (i - 1) - 1) * 2], cps[(2 * (i - 1) - 1) * 2 + 1], pts[i * 2], pts[i * 2 + 1]);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
export async function gesture(inCanvas, result) {
|
||||
if (!result || !inCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.font = options.font;
|
||||
ctx.fillStyle = options.color;
|
||||
let i = 1;
|
||||
for (let j = 0; j < result.length; j++) {
|
||||
let where:any[] = [];
|
||||
let what:any[] = [];
|
||||
[where, what] = Object.entries(result[j]);
|
||||
if ((what.length > 1) && (what[1].length > 0)) {
|
||||
const person = where[1] > 0 ? `#${where[1]}` : '';
|
||||
const label = `${where[0]} ${person}: ${what[1]}`;
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
ctx.fillText(label, 8, 2 + (i * options.lineHeight));
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillText(label, 6, 0 + (i * options.lineHeight));
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function face(inCanvas, result) {
|
||||
if (!result || !inCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
for (const f of result) {
|
||||
ctx.font = options.font;
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.beginPath();
|
||||
if (options.drawBoxes) {
|
||||
rect(ctx, f.box[0], f.box[1], f.box[2], f.box[3]);
|
||||
}
|
||||
// silly hack since fillText does not suport new line
|
||||
const labels:string[] = [];
|
||||
labels.push(`face confidence: ${Math.trunc(100 * f.confidence)}%`);
|
||||
if (f.genderConfidence) labels.push(`${f.gender || ''} ${Math.trunc(100 * f.genderConfidence)}% confident`);
|
||||
// if (f.genderConfidence) labels.push(f.gender);
|
||||
if (f.age) labels.push(`age: ${f.age || ''}`);
|
||||
if (f.iris) labels.push(`iris distance: ${f.iris}`);
|
||||
if (f.emotion && f.emotion.length > 0) {
|
||||
const emotion = f.emotion.map((a) => `${Math.trunc(100 * a.score)}% ${a.emotion}`);
|
||||
labels.push(emotion.join(' '));
|
||||
}
|
||||
if (labels.length === 0) labels.push('face');
|
||||
ctx.fillStyle = options.color;
|
||||
for (let i = labels.length - 1; i >= 0; i--) {
|
||||
const x = Math.max(f.box[0], 0);
|
||||
const y = i * options.lineHeight + f.box[1];
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
ctx.fillText(labels[i], x + 5, y + 16);
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillText(labels[i], x + 4, y + 15);
|
||||
}
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.stroke();
|
||||
ctx.lineWidth = 1;
|
||||
if (f.mesh) {
|
||||
if (options.drawPoints) {
|
||||
for (const pt of f.mesh) {
|
||||
ctx.fillStyle = options.useDepth ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.5)` : options.color;
|
||||
point(ctx, pt[0], pt[1]);
|
||||
}
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
for (let i = 0; i < triangulation.length / 3; i++) {
|
||||
const points = [
|
||||
triangulation[i * 3 + 0],
|
||||
triangulation[i * 3 + 1],
|
||||
triangulation[i * 3 + 2],
|
||||
].map((index) => f.mesh[index]);
|
||||
const path = new Path2D();
|
||||
path.moveTo(points[0][0], points[0][1]);
|
||||
for (const pt of points) {
|
||||
path.lineTo(pt[0], pt[1]);
|
||||
}
|
||||
path.closePath();
|
||||
ctx.strokeStyle = options.useDepth ? `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)` : options.color;
|
||||
ctx.stroke(path);
|
||||
if (options.fillPolygons) {
|
||||
ctx.fillStyle = options.useDepth ? `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)` : options.color;
|
||||
ctx.fill(path);
|
||||
}
|
||||
}
|
||||
// iris: array[center, left, top, right, bottom]
|
||||
if (f.annotations && f.annotations.leftEyeIris) {
|
||||
ctx.strokeStyle = options.useDepth ? 'rgba(255, 200, 255, 0.3)' : options.color;
|
||||
ctx.beginPath();
|
||||
const sizeX = Math.abs(f.annotations.leftEyeIris[3][0] - f.annotations.leftEyeIris[1][0]) / 2;
|
||||
const sizeY = Math.abs(f.annotations.leftEyeIris[4][1] - f.annotations.leftEyeIris[2][1]) / 2;
|
||||
ctx.ellipse(f.annotations.leftEyeIris[0][0], f.annotations.leftEyeIris[0][1], sizeX, sizeY, 0, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
ctx.fillStyle = options.useDepth ? 'rgba(255, 255, 200, 0.3)' : options.color;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
if (f.annotations && f.annotations.rightEyeIris) {
|
||||
ctx.strokeStyle = options.useDepth ? 'rgba(255, 200, 255, 0.3)' : options.color;
|
||||
ctx.beginPath();
|
||||
const sizeX = Math.abs(f.annotations.rightEyeIris[3][0] - f.annotations.rightEyeIris[1][0]) / 2;
|
||||
const sizeY = Math.abs(f.annotations.rightEyeIris[4][1] - f.annotations.rightEyeIris[2][1]) / 2;
|
||||
ctx.ellipse(f.annotations.rightEyeIris[0][0], f.annotations.rightEyeIris[0][1], sizeX, sizeY, 0, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
ctx.fillStyle = options.useDepth ? 'rgba(255, 255, 200, 0.3)' : options.color;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const lastDrawnPose:any[] = [];
|
||||
export async function body(inCanvas, result) {
|
||||
if (!result || !inCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.lineJoin = 'round';
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
// result[i].keypoints = result[i].keypoints.filter((a) => a.score > 0.5);
|
||||
if (!lastDrawnPose[i] && options.bufferedOutput) lastDrawnPose[i] = { ...result[i] };
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.font = options.font;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
if (options.drawPoints) {
|
||||
for (let pt = 0; pt < result[i].keypoints.length; pt++) {
|
||||
ctx.fillStyle = options.useDepth && result[i].keypoints[pt].position.z ? `rgba(${127.5 + (2 * result[i].keypoints[pt].position.z)}, ${127.5 - (2 * result[i].keypoints[pt].position.z)}, 255, 0.5)` : options.color;
|
||||
if (options.drawLabels) {
|
||||
ctx.fillText(`${result[i].keypoints[pt].part}`, result[i].keypoints[pt][0] + 4, result[i].keypoints[pt][1] + 4);
|
||||
}
|
||||
ctx.beginPath();
|
||||
if (options.bufferedOutput) {
|
||||
lastDrawnPose[i].keypoints[pt][0] = (lastDrawnPose[i].keypoints[pt][0] + result[i].keypoints[pt][0]) / 2;
|
||||
lastDrawnPose[i].keypoints[pt][1] = (lastDrawnPose[i].keypoints[pt][1] + result[i].keypoints[pt][1]) / 2;
|
||||
point(ctx, lastDrawnPose[i].keypoints[pt][0], lastDrawnPose[i].keypoints[pt][1]);
|
||||
} else {
|
||||
point(ctx, result[i].keypoints[pt][0], result[i].keypoints[pt][1]);
|
||||
}
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
const path = new Path2D();
|
||||
let root;
|
||||
let part;
|
||||
// torso
|
||||
root = result[i].keypoints.find((a) => a.part === 'leftShoulder');
|
||||
if (root) {
|
||||
path.moveTo(root.position.x, root.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightShoulder');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightHip');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftHip');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftShoulder');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
}
|
||||
// leg left
|
||||
root = result[i].keypoints.find((a) => a.part === 'leftHip');
|
||||
if (root) {
|
||||
path.moveTo(root.position.x, root.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftKnee');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftAnkle');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftHeel');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftFoot');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
}
|
||||
// leg right
|
||||
root = result[i].keypoints.find((a) => a.part === 'rightHip');
|
||||
if (root) {
|
||||
path.moveTo(root.position.x, root.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightKnee');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightAnkle');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightHeel');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightFoot');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
}
|
||||
// arm left
|
||||
root = result[i].keypoints.find((a) => a.part === 'leftShoulder');
|
||||
if (root) {
|
||||
path.moveTo(root.position.x, root.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftElbow');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftWrist');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'leftPalm');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
}
|
||||
// arm right
|
||||
root = result[i].keypoints.find((a) => a.part === 'rightShoulder');
|
||||
if (root) {
|
||||
path.moveTo(root.position.x, root.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightElbow');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightWrist');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
part = result[i].keypoints.find((a) => a.part === 'rightPalm');
|
||||
if (part) path.lineTo(part.position.x, part.position.y);
|
||||
}
|
||||
// draw all
|
||||
ctx.stroke(path);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function hand(inCanvas, result) {
|
||||
if (!result || !inCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.lineJoin = 'round';
|
||||
for (const h of result) {
|
||||
ctx.font = options.font;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
if (options.drawBoxes) {
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.fillStyle = options.color;
|
||||
rect(ctx, h.box[0], h.box[1], h.box[2], h.box[3]);
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
ctx.fillText('hand', h.box[0] + 3, 1 + h.box[1] + options.lineHeight, h.box[2]);
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillText('hand', h.box[0] + 2, 0 + h.box[1] + options.lineHeight, h.box[2]);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (options.drawPoints) {
|
||||
if (h.landmarks && h.landmarks.length > 0) {
|
||||
for (const pt of h.landmarks) {
|
||||
ctx.fillStyle = options.useDepth ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.5)` : options.color;
|
||||
point(ctx, pt[0], pt[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
const addPart = (part) => {
|
||||
if (!part) return;
|
||||
for (let i = 0; i < part.length; i++) {
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = options.useDepth ? `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)` : options.color;
|
||||
ctx.moveTo(part[i > 0 ? i - 1 : 0][0], part[i > 0 ? i - 1 : 0][1]);
|
||||
ctx.lineTo(part[i][0], part[i][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
addPart(h.annotations.indexFinger);
|
||||
addPart(h.annotations.middleFinger);
|
||||
addPart(h.annotations.ringFinger);
|
||||
addPart(h.annotations.pinky);
|
||||
addPart(h.annotations.thumb);
|
||||
// addPart(hand.annotations.palmBase);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function canvas(inCanvas, outCanvas) {
|
||||
if (!inCanvas || !outCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement) || !(outCanvas instanceof HTMLCanvasElement)) return;
|
||||
const outCtx = inCanvas.getContext('2d');
|
||||
outCtx?.drawImage(inCanvas, 0, 0);
|
||||
}
|
||||
|
||||
export async function all(inCanvas, result) {
|
||||
if (!result || !inCanvas) return;
|
||||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
face(inCanvas, result.face);
|
||||
body(inCanvas, result.body);
|
||||
hand(inCanvas, result.hand);
|
||||
gesture(inCanvas, result.gesture);
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ import * as profile from './profile';
|
|||
import * as config from '../config';
|
||||
import * as sample from './sample';
|
||||
import * as app from '../package.json';
|
||||
import * as draw from './draw';
|
||||
|
||||
// helper function: gets elapsed time on both browser and nodejs
|
||||
const now = () => {
|
||||
|
|
@ -40,6 +41,7 @@ function mergeDeep(...objects) {
|
|||
|
||||
class Human {
|
||||
tf: any;
|
||||
draw: any;
|
||||
package: any;
|
||||
version: string;
|
||||
config: any;
|
||||
|
|
@ -62,6 +64,7 @@ class Human {
|
|||
|
||||
constructor(userConfig = {}) {
|
||||
this.tf = tf;
|
||||
this.draw = draw;
|
||||
this.package = app;
|
||||
this.version = app.version;
|
||||
this.config = mergeDeep(config.default, userConfig);
|
||||
|
|
|
|||
2
wiki
2
wiki
|
|
@ -1 +1 @@
|
|||
Subproject commit b624d76a06647aa4542a65b7454cf9a8ac57c1c3
|
||||
Subproject commit 9173ba06bb5f5aa361ea391ea88b6aaf0eb34006
|
||||
Loading…
Reference in New Issue