Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

vladmandic/human-next

Repository files navigation

Human: Demo with TypeScript/ReactJS/NextJS

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
  • 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 input HTMLVideoElement and output HTMLCanvasElement

Note: configuration in next.config.js is defined for deployment on gitpages


Run

Development

Production

  • 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