Project uses Human
library with full TypeScript
(including strict TypeChecking) support with NextJS
framework and ReactJS
front-end library
Project creates two self-enclosed class components:
components/InitWebCam.tsx
- initializes WebCam using specified
HTMLVideoElement
- initializes WebCam using specified
components/RunHuman.tsx
- lazy-loads
Human
library - loads required
models
- warms up models
- uses
ready
state change to trigger detection - uses
frame
state change to trigger rendering
using specified inputHTMLVideoElement
and outputHTMLCanvasElement
- lazy-loads
Note: configuration in next.config.js
is defined for deployment on gitpages
- run:
npm dev
- navigate to: https://localhost:3000
-
run
npm build
info - Checking validity of types info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Generating static pages (3/3) info - Finalizing page optimization
-
run
npm export
info - using build directory: /home/vlado/dev/human-next/.next info - Copying "static build" directory info - Launching 11 workers info - Copying "public" directory info - Exporting (3/3) Export successful. Files written to /home/vlado/dev/human-next/out