ambiser
/
human
mirror of https://github.com/vladmandic/human
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add ts demo

pull/356/head
Vladimir Mandic 2021-10-27 08:16:06 -04:00
parent a005c00a5b
commit 4fa71659e7
9 changed files with 201 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.build.json
View File

@ -145,6 +145,7 @@
{ {
"name": "tfjs/browser/esm/custom", "name": "tfjs/browser/esm/custom",
"platform": "browser", "platform": "browser",
"target": "esnext",
"format": "esm", "format": "esm",
"input": "tfjs/tf-custom.ts", "input": "tfjs/tf-custom.ts",
"output": "dist/tfjs.esm.js", "output": "dist/tfjs.esm.js",
@ -154,6 +155,7 @@
{ {
"name": "human/browser/esm/custom", "name": "human/browser/esm/custom",
"platform": "browser", "platform": "browser",
"target": "esnext",
"format": "esm", "format": "esm",
"input": "src/human.ts", "input": "src/human.ts",
"output": "dist/human.custom.esm.js", "output": "dist/human.custom.esm.js",
@ -162,11 +164,22 @@
"external": ["fs", "os", "buffer", "util"], "external": ["fs", "os", "buffer", "util"],
"typings": "types", "typings": "types",
"typedoc": "typedoc" "typedoc": "typedoc"
},
{
"name": "demo/browser",
"platform": "browser",
"target": "esnext",
"format": "esm",
"input": "demo/typescript/index.ts",
"output": "demo/typescript/index.js",
"sourcemap": true,
"minify": false,
"external": ["*/human.custom.esm.js"]
} }
] ]
}, },
"watch": { "watch": {
"locations": [ "src/**/*", "tfjs/**/*" ] "locations": [ "src/**/*", "tfjs/**/*", "demo/**/*.ts" ]
}, },
"typescript": { "typescript": {
"allowJs": false "allowJs": false

3
.eslintrc.json
View File

@ -27,7 +27,8 @@
], ],
"ignorePatterns": [ "ignorePatterns": [
"assets", "assets",
"demo/helpers", "demo/helpers/*.js",
"demo/typescript/*.js",
"dist", "dist",
"media", "media",
"models", "models",

1
CHANGELOG.md
View File

@ -11,6 +11,7 @@
### **HEAD -> main** 2021/10/26 mandic00@live.com ### **HEAD -> main** 2021/10/26 mandic00@live.com
- switch to custom tfjs for demos
### **release: 2.4.1** 2021/10/25 mandic00@live.com ### **release: 2.4.1** 2021/10/25 mandic00@live.com

2
demo/index.js
View File

@ -415,7 +415,7 @@ async function setupCamera() {
} }
const track = stream.getVideoTracks()[0]; const track = stream.getVideoTracks()[0];
const settings = track.getSettings(); const settings = track.getSettings();
if (initialCameraAccess) log('selected video source:', track, settings); // log('selected camera:', track.label, 'id:', settings.deviceId); if (initialCameraAccess) log('selected video source:', track, settings);
ui.camera = { name: track.label.toLowerCase(), width: settings.width, height: settings.height, facing: settings.facingMode === 'user' ? 'front' : 'back' }; ui.camera = { name: track.label.toLowerCase(), width: settings.width, height: settings.height, facing: settings.facingMode === 'user' ? 'front' : 'back' };
initialCameraAccess = false; initialCameraAccess = false;

28
demo/typescript/index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Human</title>
<meta name="viewport" content="width=device-width" id="viewport">
<meta name="keywords" content="Human">
<meta name="application-name" content="Human">
<meta name="description" content="Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
<meta name="msapplication-tooltip" content="Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="../manifest.webmanifest">
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="../../assets/icon.png">
<script src="./index.js" type="module"></script>
<style>
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../../assets/lato-light.woff2') }
html { font-family: 'Lato', 'Segoe UI'; font-size: 16px; font-variant: small-caps; }
body { margin: 0; background: black; color: white; overflow-x: hidden; width: 100vw; height: 100vh; text-align: center; }
body::-webkit-scrollbar { display: none; }
</style>
</head>
<body>
<canvas id="canvas" style="margin: 0 auto; width: 100%"></canvas>
<video id="video" playsinline style="display: none"></video>
<pre id="status" style="position: absolute; top: 20px; right: 20px; background-color: grey; padding: 8px; box-shadow: 2px 2px black"></pre>
</body>
</html>

77
demo/typescript/index.js Normal file
View File

@ -0,0 +1,77 @@
/*
Human
homepage: <https://github.com/vladmandic/human>
author: <https://github.com/vladmandic>'
*/
// demo/typescript/index.ts
import Human from "../../dist/human.custom.esm.js";
var config = {
modelBasePath: "../../models",
backend: "humangl"
};
var human = new Human(config);
var result;
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var fps = { detect: 0, draw: 0, element: document.getElementById("status") };
var log = (...msg) => console.log(...msg);
var status = (msg) => {
if (fps.element)
fps.element.innerText = msg;
};
async function webCam() {
status("starting webcam...");
const options = { audio: false, video: { facingMode: "user", resizeMode: "none", width: { ideal: document.body.clientWidth } } };
const stream = await navigator.mediaDevices.getUserMedia(options);
const ready = new Promise((resolve) => {
video.onloadeddata = () => resolve(true);
});
video.srcObject = stream;
video.play();
await ready;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const track = stream.getVideoTracks()[0];
const capabilities = track.getCapabilities();
const settings = track.getSettings();
const constraints = track.getConstraints();
log("video:", video.videoWidth, video.videoHeight, { stream, track, settings, constraints, capabilities });
canvas.onclick = () => {
if (video.paused)
video.play();
else
video.pause();
};
}
async function detectionLoop() {
const t0 = human.now();
if (!video.paused)
result = await human.detect(video);
const t1 = human.now();
fps.detect = 1e3 / (t1 - t0);
requestAnimationFrame(detectionLoop);
}
async function drawLoop() {
const t0 = human.now();
if (!video.paused) {
const interpolated = await human.next(result);
await human.draw.canvas(video, canvas);
await human.draw.all(canvas, interpolated);
}
const t1 = human.now();
fps.draw = 1e3 / (t1 - t0);
status(video.paused ? "paused" : `fps: ${fps.detect.toFixed(1).padStart(5, " ")} detect / ${fps.draw.toFixed(1).padStart(5, " ")} draw`);
requestAnimationFrame(drawLoop);
}
async function main() {
status("loading...");
await human.load();
status("initializing...");
await human.warmup();
await webCam();
await detectionLoop();
await drawLoop();
}
window.onload = main;
//# sourceMappingURL=index.js.map

76
demo/typescript/index.ts Normal file
View File

@ -0,0 +1,76 @@
/**
* Human demo for browsers
* @description Simple Human demo for browsers using WebCam
*/
import Human from '../../dist/human.custom.esm.js'; // equivalent of @vladmandic/human
const config = {
modelBasePath: '../../models',
backend: 'humangl',
};
const human = new Human(config);
let result;
const video = document.getElementById('video') as HTMLVideoElement;
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const fps = { detect: 0, draw: 0, element: document.getElementById('status') };
// eslint-disable-next-line no-console
const log = (...msg) => console.log(...msg);
const status = (msg) => { if (fps.element) fps.element.innerText = msg; };
async function webCam() {
status('starting webcam...');
const options = { audio: false, video: { facingMode: 'user', resizeMode: 'none', width: { ideal: document.body.clientWidth } } };
const stream: MediaStream = await navigator.mediaDevices.getUserMedia(options);
const ready = new Promise((resolve) => { video.onloadeddata = () => resolve(true); });
video.srcObject = stream;
video.play();
await ready;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const track: MediaStreamTrack = stream.getVideoTracks()[0];
const capabilities: MediaTrackCapabilities = track.getCapabilities();
const settings: MediaTrackSettings = track.getSettings();
const constraints: MediaTrackConstraints = track.getConstraints();
log('video:', video.videoWidth, video.videoHeight, { stream, track, settings, constraints, capabilities });
canvas.onclick = () => {
if (video.paused) video.play();
else video.pause();
};
}
async function detectionLoop() {
const t0 = human.now();
if (!video.paused) result = await human.detect(video);
const t1 = human.now();
fps.detect = 1000 / (t1 - t0);
requestAnimationFrame(detectionLoop);
}
async function drawLoop() {
const t0 = human.now();
if (!video.paused) {
const interpolated = await human.next(result);
await human.draw.canvas(video, canvas);
await human.draw.all(canvas, interpolated);
}
const t1 = human.now();
fps.draw = 1000 / (t1 - t0);
status(video.paused ? 'paused' : `fps: ${fps.detect.toFixed(1).padStart(5, ' ')} detect / ${fps.draw.toFixed(1).padStart(5, ' ')} draw`);
requestAnimationFrame(drawLoop);
}
async function main() {
status('loading...');
await human.load();
status('initializing...');
await human.warmup();
await webCam();
await detectionLoop();
await drawLoop();
}
window.onload = main;

1
src/human.ts
View File

@ -294,6 +294,7 @@ export class Human {
await tf.ready(); await tf.ready();
if (this.env.browser) { if (this.env.browser) {
if (this.config.debug) log('configuration:', this.config); if (this.config.debug) log('configuration:', this.config);
if (this.config.debug) log('environment:', this.env);
if (this.config.debug) log('tf flags:', this.tf.ENV['flags']); if (this.config.debug) log('tf flags:', this.tf.ENV['flags']);
} }
} }

2
wiki

@ -1 +1 @@
Subproject commit 20389b9779834324acbbcf2b25041a489a688d18 Subproject commit 5e874c076123f1c2b2821b1c37f6005e775465aa