mirror of https://github.com/vladmandic/human
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
/**
|
|
* 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;
|