### Webcam Integration with Human.js

Source: https://github.com/vladmandic/human/wiki/Home

This example demonstrates using Human's built-in webcam helper methods for complete video handling. It starts the webcam, begins detection using `human.video`, and draws results with interpolation.

```javascript
const human = new Human();
const outputCanvas = document.getElementById('canvas-id');

async function drawResults() {
  const interpolated = human.next();
  human.draw.canvas(outputCanvas, human.webcam.element);
  human.draw.all(outputCanvas, interpolated);
  requestAnimationFrame(drawResults);
}

await human.webcam.start({ crop: true });
human.video(human.webcam.element);
drawResults();
```

--------------------------------

### Install Docker using Convenience Script

Source: https://github.com/vladmandic/human/wiki/Docker

Installs Docker using the official convenience script. Ensure you have curl installed.

```bash
curl https://get.docker.com | sudo sh
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/vladmandic/human/wiki/Build-Process

Use these commands to clone the repository, navigate into the directory, install all project dependencies, and then run the build process.

```shell
git clone https://github.com/vladmandic/human
cd human
npm install --dev # installs all project dependencies
npm run build
```

--------------------------------

### start

Source: https://github.com/vladmandic/human/blob/main/typedoc/interfaces/WebCam.html

Initializes the webcam stream and associates it with a DOM video element.

```APIDOC
## start

### Description
Initializes the webcam stream and associates it with a DOM video element.

### Method
`start(webcamConfig?: Partial<WebCamConfig>): Promise<string>`

### Parameters
#### Optional Parameters
*   `webcamConfig` (Partial<[WebCamConfig](WebCamConfig.html)\>) - Optional configuration object for the webcam.

### Returns
`Promise<string>` - A promise that resolves with the ID of the started webcam stream.

### Example
```typescript
const streamId = await webcam.start({ element: document.getElementById('videoElement') });
console.log(`Webcam stream started with ID: ${streamId}`);
```
```

--------------------------------

### Install Human Library for Browser and NodeJS

Source: https://context7.com/vladmandic/human/llms.txt

Install the Human library using NPM. For NodeJS, ensure a TensorFlow.js backend is installed separately.

```bash
# Browser (bundler workflow)
npm install @vladmandic/human
```

```bash
# NodeJS (CPU)
npm install @vladmandic/human @tensorflow/tfjs-node
```

```bash
# NodeJS (GPU / CUDA)
npm install @vladmandic/human @tensorflow/tfjs-node-gpu
```

--------------------------------

### NodeJS Face Matching Performance Example

Source: https://github.com/vladmandic/human/blob/main/demo/facematch/README.md

This example demonstrates the output logs from running the NodeJS face matching demo. It shows configuration options, buffer creation, database loading, worker thread pool initialization, and job processing statistics.

```js
INFO:  options: { dbFile: './faces.json', dbMax: 10000, threadPoolSize: 6, workerSrc: './node-match-worker.js', debug: false, minThreshold: 0.9, descLength: 1024 }
DATA:  created shared buffer: { maxDescriptors: 10000, totalBytes: 40960000, totalElements: 10240000 }
DATA:  db loaded: { existingRecords: 0, newRecords: 5700 }
INFO:  starting worker thread pool: { totalWorkers: 6, alreadyActive: 0 }
STATE: submitted: { matchJobs: 100, poolSize: 6, activeWorkers: 6 }
STATE: { matchJobsFinished: 100, totalTimeMs: 1769, averageTimeMs: 17.69 }
INFO:  closing workers: { poolSize: 6, activeWorkers: 6 }
```

--------------------------------

### Install Human with npm

Source: https://github.com/vladmandic/human/wiki/Install

Install the Human library using npm for use with bundlers.

```shell
npm install @vladmandic/human
```

--------------------------------

### Custom Configuration Example

Source: https://github.com/vladmandic/human/wiki/Config

Demonstrates how to create a custom configuration object to override default settings, such as specifying a model base path and enabling segmentation.

```javascript
const myConfig = {
  modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models/',
  segmentation: { enabled: true },
};
const human = new Human(myConfig);
const result = await human.detect(input);
```

--------------------------------

### Main Entry Point and Webcam Initialization

Source: https://github.com/vladmandic/human/blob/main/demo/video/index.html

The main function initializes the Human library, starts the webcam, sets up the canvas, and begins the drawing loop. It also includes an event listener to pause/resume the webcam feed on click.

```javascript
async function main() {
  // main entry point
  document.getElementById('log').innerHTML = `human version: ${human.version} | tfjs version: ${human.tf.version['tfjs-core']}<br>platform: ${human.env.platform} | agent ${human.env.agent}`;
  await human.webcam.start({ crop: true }); // find webcam and start it
  human.video(human.webcam.element); // instruct human to continously detect video frames
  canvas.width = human.webcam.width; // set canvas resolution to input webcam native resolution
  canvas.height = human.webcam.height;
  canvas.onclick = async () => {
    // pause when clicked on screen and resume on next click
    if (human.webcam.paused) await human.webcam.play();
    else human.webcam.pause();
  };
  await drawLoop(); // start draw loop
}
window.onload = main;
```

--------------------------------

### Install Human and TFJS for No-Bundle

Source: https://github.com/vladmandic/human/wiki/Install

Install both Human and TensorFlow.js when you intend to bundle TFJS separately.

```shell
npm install @vladmandic/human @tensorflow/tfjs
```

--------------------------------

### Example Gesture Output

Source: https://github.com/vladmandic/human/wiki/Gesture

This is an example of the output format for detected gestures, indicating the type of gesture and the person it belongs to.

```js
gesture = [
  { face: '0', gesture: 'facing camera' },
  { face: '0', gesture: 'head up' },
  { iris: '0', gesture: 'looking center' },
  { body: '0', gesture: 'i give up' },
  { body: '0', gesture: 'leaning left' },
  { hand: '0', gesture: 'thumb forward middlefinger up' },
];
```

--------------------------------

### Initialize Human Library with Configuration

Source: https://github.com/vladmandic/human/blob/main/demo/video/index.html

Import the Human library and configure its behavior. This setup is essential for fine-tuning detection models and enabling specific features like face, body, or hand tracking.

```javascript
import * as H from '../../dist/human.esm.js';
const humanConfig = {
  // user configuration for human, used to fine-tune behavior
  modelBasePath: '../../models',
  filter: { enabled: true, equalization: true, flip: false },
  face: {
    enabled: true,
    detector: { rotation: false },
    mesh: { enabled: true },
    attention: { enabled: false },
    iris: { enabled: true },
    description: { enabled: true },
    emotion: { enabled: true },
  },
  body: { enabled: true },
  hand: { enabled: true },
  gesture: { enabled: true },
  object: { enabled: false },
  segmentation: { enabled: false },
};
const human = new H.Human(humanConfig);
```

--------------------------------

### Check Docker Installation Status

Source: https://github.com/vladmandic/human/wiki/Docker

Verifies Docker installation by checking its version, system info, and service status.

```bash
sudo docker version
```

```bash
sudo docker info
```

```bash
sudo systemctl status containerd docker
```

--------------------------------

### Basic Video Detection with Human.js

Source: https://github.com/vladmandic/human/wiki/Home

This example shows how to initialize Human, select input/output elements, and perform basic video detection using Promises. It draws detected faces, bodies, hands, and gestures to the output canvas.

```javascript
const config = { backend: 'webgl' };
const human = new Human.Human(config);
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');

function detectVideo() {
  human.detect(inputVideo).then((result) => {
    human.draw.canvas(result.canvas, outputCanvas);
    human.draw.face(outputCanvas, result.face);
    human.draw.body(outputCanvas, result.body);
    human.draw.hand(outputCanvas, result.hand);
    human.draw.gesture(outputCanvas, result.gesture);
    requestAnimationFrame(detectVideo);
    return result;
  });
}

detectVideo();
```

--------------------------------

### Full Video Processing with Human.js

Source: https://github.com/vladmandic/human/wiki/Home

This example uses Human's built-in full video processing, eliminating the need for manual frame-by-frame loops. It starts the detection loop with `human.video` and uses `human.next` for interpolated results in the drawing loop.

```javascript
const human = new Human();
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');

async function drawResults() {
  const interpolated = human.next();
  human.draw.all(outputCanvas, interpolated);
  requestAnimationFrame(drawResults);
}

human.video(inputVideo);
drawResults();
```

--------------------------------

### Development Server Log Output

Source: https://github.com/vladmandic/human/wiki/Development-Server

Example log output from the development server, showing environment details, toolchain versions, and server states.

```log
2021-09-10 21:03:37 INFO:  @vladmandic/human version 2.1.5
2021-09-10 21:03:37 INFO:  User: vlado Platform: linux Arch: x64 Node: v16.5.0
2021-09-10 21:03:37 INFO:  Application: { name: '@vladmandic/human', version: '2.1.5' }
2021-09-10 21:03:37 INFO:  Environment: { profile: 'development', config: 'build.json', tsconfig: true, eslintrc: true, git: true }
2021-09-10 21:03:37 INFO:  Toolchain: { build: '0.3.4', esbuild: '0.12.26', typescript: '4.4.3', typedoc: '0.21.9', eslint: '7.32.0' }
2021-09-10 21:03:37 STATE: WebServer: { ssl: false, port: 10030, root: '.' }
2021-09-10 21:03:37 STATE: WebServer: { ssl: true, port: 10031, root: '.', sslKey: 'node_modules/@vladmandic/build/cert/https.key', sslCrt: 'node_modules/@vladmandic/build/cert/https.crt' }
2021-09-10 21:03:37 STATE: Watch: { locations: [ 'test/src/**', 'src/**', 'tfjs/*', [length]: 3 ] }
2021-09-10 21:03:37 STATE: Watch: { locations: [ 'test/src/**', 'src/**', 'tfjs/*', [length]: 3 ] }
2021-09-10 21:03:37 STATE: Watch: { locations: [ 'test/src/**', 'src/**', 'tfjs/*', [length]: 3 ] }
2021-09-10 21:07:48 INFO:  Watch: { event: 'modify', input: 'src/human.ts' }
2021-09-10 21:07:48 STATE: Build: { name: 'tfjs for browser esm bundle', type: 'development', format: 'esm', platform: 'browser', input: 'tfjs/tf-browser.ts', output: 'dist/tfjs.esm.js', files: 7, inputBytes: 2168, outputBytes: 2343946 }
2021-09-10 21:07:49 STATE: Build: { name: 'human for browser esm bundle', type: 'development', format: 'esm', platform: 'browser', input: 'src/human.ts', output: 'dist/human.esm.js', files: 47, inputBytes: 2799374, outputBytes: 2583497 }
2021-09-10 21:07:31 DATA:  GET/1.1 200 text/html; charset=utf-8 6435 / ::ffff:192.168.0.200
2021-09-10 21:07:31 DATA:  GET/1.1 200 text/css; charset=utf-8 107884 /icons.css ::ffff:192.168.0.200
2021-09-10 21:07:31 DATA:  GET/1.1 200 text/javascript; charset=utf-8 44675 /index.js ::ffff:192.168.0.200
2021-09-10 21:07:31 DATA:  GET/1.1 200 text/javascript; charset=utf-8 2583497 /dist/human.esm.js ::ffff:192.168.0.200
...
```

--------------------------------

### init()

Source: https://github.com/vladmandic/human/blob/main/typedoc/functions/draw.init.html

Initializes default label templates for face, body, hand, object, and gestures. This function is typically called once during application setup.

```APIDOC
## Function: init()

### Description
Sets default label templates for face, body, hand, object, and gestures.

### Signature
`init(): void[]`

### Returns
`void[]` - An array of void, indicating no specific return value.

### Source
Defined in `src/draw/draw.ts:100`
```

--------------------------------

### Install Human with tfjs-node

Source: https://github.com/vladmandic/human/wiki/Install

Install the Human library and the TensorFlow.js Node.js backend for CPU execution. This is recommended for Node.js projects running on the backend.

```shell
npm install @vladmandic/human @tensorflow/tfjs-node
```

--------------------------------

### Install Human with tfjs-node-gpu

Source: https://github.com/vladmandic/human/wiki/Install

Install the Human library and the TensorFlow.js Node.js GPU backend for accelerated execution. Requires a compatible CUDA environment.

```shell
npm install @vladmandic/human @tensorflow/tfjs-node-gpu
```

--------------------------------

### Video Detection with Human.js using Async/Await

Source: https://github.com/vladmandic/human/wiki/Home

This example demonstrates video detection using async/await syntax for cleaner asynchronous code. It initializes Human, selects video and canvas elements, and uses `human.draw.all` to draw all detected results.

```javascript
const config = { backend: 'webgl' };
const human = new Human(config);
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');

async function detectVideo() {
  const result = await human.detect(inputVideo);
  human.draw.all(outputCanvas, result);
  requestAnimationFrame(detectVideo);
}

detectVideo();
```

--------------------------------

### Load Human Library from CDN in Browser

Source: https://context7.com/vladmandic/human/llms.txt

Load the Human library directly from a CDN for browser use without needing an NPM installation. Initialize the Human instance with a specified backend.

```html
<!-- Browser: load directly from CDN (no install needed) -->
<!DOCTYPE HTML>
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/human/dist/human.js"></script>
<script>
  const human = new Human.Human({ backend: 'webgl' });
</script>
```

--------------------------------

### Webcam and Drawing Helper Methods

Source: https://github.com/vladmandic/human/wiki/Usage

Helper namespaces for controlling webcam functionality (start, stop, play, pause) and drawing detection results to a canvas.

```javascript
human.webcam.*    // helper methods to control webcam, main properties are `start`, `stop`, `play`, `pause`
```

```javascript
human.draw.*      // helper methods to draw detected results to canvas, main options are `options`, `canvas`, `all`
```

--------------------------------

### Run NodeJS Multi-process Demo

Source: https://github.com/vladmandic/human/blob/main/demo/multithread/README.md

Execute the NodeJS multi-process demo to see parallel execution of the Human library across multiple worker processes. This example uses CommonJS modules.

```shell
node demo/nodejs/node-multiprocess.js
```

--------------------------------

### NodeJS Multi-process Demo Output

Source: https://github.com/vladmandic/human/blob/main/demo/multithread/README.md

Example output from the NodeJS multi-process demo, showing worker initialization, message dispatching, and processing results. This demonstrates the parallel processing capabilities.

```json
2021-06-01 08:54:19 INFO:  @vladmandic/human version 2.0.0
2021-06-01 08:54:19 INFO:  User: vlado Platform: linux Arch: x64 Node: v16.0.0
2021-06-01 08:54:19 INFO:  Human multi-process test
2021-06-01 08:54:19 STATE: Enumerated images: ./assets 15
2021-06-01 08:54:19 STATE: Main: started worker: 130362
2021-06-01 08:54:19 STATE: Main: started worker: 130363
2021-06-01 08:54:19 STATE: Main: started worker: 130369
2021-06-01 08:54:19 STATE: Main: started worker: 130370
2021-06-01 08:54:20 STATE: Worker: PID: 130370 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130362 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130369 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:20 STATE: Worker: PID: 130363 TensorFlow/JS 3.6.0 Human 2.0.0 Backend: tensorflow
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130370
2021-06-01 08:54:21 INFO:  Latency: worker initializtion:  1348 message round trip: 0
2021-06-01 08:54:21 DATA:  Worker received message: 130370 { test: true }
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:21 DATA:  Worker received message: 130362 { image: 'samples/ai-face.jpg' }
2021-06-01 08:54:21 DATA:  Worker received message: 130370 { image: 'samples/ai-body.jpg' }
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:21 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:21 DATA:  Worker received message: 130369 { image: 'assets/human-sample-upper.jpg' }
2021-06-01 08:54:21 DATA:  Worker received message: 130363 { image: 'assets/sample-me.jpg' }
2021-06-01 08:54:24 DATA:  Main: worker finished: 130362 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:24 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:24 DATA:  Worker received message: 130362 { image: 'assets/sample1.jpg' }
2021-06-01 08:54:25 DATA:  Main: worker finished: 130369 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:25 DATA:  Main: worker finished: 130370 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130370
2021-06-01 08:54:25 DATA:  Worker received message: 130369 { image: 'assets/sample2.jpg' }
2021-06-01 08:54:25 DATA:  Main: worker finished: 130363 detected faces: 1 bodies: 1 hands: 0 objects: 2
2021-06-01 08:54:25 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:25 DATA:  Worker received message: 130370 { image: 'assets/sample3.jpg' }
2021-06-01 08:54:25 DATA:  Worker received message: 130363 { image: 'assets/sample4.jpg' }
2021-06-01 08:54:30 DATA:  Main: worker finished: 130362 detected faces: 3 bodies: 1 hands: 0 objects: 7
2021-06-01 08:54:30 STATE: Main: dispatching to worker: 130362
2021-06-01 08:54:30 DATA:  Worker received message: 130362 { image: 'assets/sample5.jpg' }
2021-06-01 08:54:31 DATA:  Main: worker finished: 130369 detected faces: 3 bodies: 1 hands: 0 objects: 5
2021-06-01 08:54:31 STATE: Main: dispatching to worker: 130369
2021-06-01 08:54:31 DATA:  Worker received message: 130369 { image: 'assets/sample6.jpg' }
2021-06-01 08:54:31 DATA:  Main: worker finished: 130363 detected faces: 4 bodies: 1 hands: 2 objects: 2
2021-06-01 08:54:31 STATE: Main: dispatching to worker: 130363
2021-06-01 08:54:39 STATE: Main: worker exit: 130370 0
2021-06-01 08:54:39 DATA:  Main: worker finished: 130362 detected faces: 1 bodies: 1 hands: 0 objects: 1
2021-06-01 08:54:39 DATA:  Main: worker finished: 130369 detected faces: 1 bodies: 1 hands: 1 objects: 3
2021-06-01 08:54:39 STATE: Main: worker exit: 130362 0
2021-06-01 08:54:39 STATE: Main: worker exit: 130369 0
2021-06-01 08:54:41 DATA:  Main: worker finished: 130363 detected faces: 9 bodies: 1 hands: 0 objects: 10
2021-06-01 08:54:41 STATE: Main: worker exit: 130363 0
2021-06-01 08:54:41 INFO:  Processed: 15 images in total: 22006 ms working: 20658 ms average: 1377 ms
```

--------------------------------

### WebCam Methods

Source: https://github.com/vladmandic/human/blob/main/typedoc/interfaces/WebCam.html

These methods allow for controlling the webcam, such as enumerating devices, pausing, playing, starting, and stopping the stream.

```APIDOC
## Methods

### enumerate

*   **Description**: Enumerates available video input devices.
*   **Returns**: `Promise<MediaDeviceInfo[]>`

### pause

*   **Description**: Pauses the webcam stream.
*   **Returns**: `void`

### play

*   **Description**: Resumes the webcam stream.
*   **Returns**: `Promise<void>`

### start

*   **Description**: Starts the webcam stream with optional configuration.
*   **Parameters**:
    *   `webcamConfig` (Partial<[WebCamConfig](WebCamConfig.html)
angle) - Optional - Configuration for the webcam.
*   **Returns**: `Promise<string>`

### stop

*   **Description**: Stops the webcam stream.
*   **Returns**: `void`
```

--------------------------------

### Dockerfile for Human Web Application

Source: https://github.com/vladmandic/human/wiki/Docker

A Dockerfile for serving a Human web application. It sets up a NodeJS environment, installs a web server, copies necessary files, and exposes a port.

```dockerfile
FROM node:16
WORKDIR <path-to-myapp>
RUN npm init --yes
COPY build.json .
RUN npm install @vladmandic/build --no-fund
COPY dist ./dist
COPY demo ./demo
EXPOSE 10031
ENTRYPOINT node node_modules/@vladmandic/build/dist/build.js --profile serve
USER node
```

--------------------------------

### Human Configuration Reference

Source: https://context7.com/vladmandic/human/llms.txt

The `Config` object controls Human's behavior. All properties are optional and deep-merged over defaults. This example shows various configuration options for backend, model paths, caching, debugging, and specific detection modules like face, body, hand, object, and segmentation.

```typescript
const config: Partial<Config> = {
  backend:          'webgl',      // TF backend: 'cpu'|'wasm'|'webgl'|'humangl'|'webgpu'|'tensorflow'
  modelBasePath:    '../models/', // base path for all model .json files
  cacheModels:      true,         // cache model weights in IndexedDB (browser only)
  validateModels:   true,         // warn on unsupported kernel ops
  debug:            false,        // verbose console output
  async:            true,         // run models in parallel (faster, more memory)
  warmup:           'full',       // 'none'|'face'|'body'|'full'
  cacheSensitivity: 0.70,         // scene-change threshold (0=disabled, 1=always cache)
  deallocate:       false,        // immediately free tensors (slower but lower memory)
  softwareKernels:  false,        // CPU fallback for missing GPU kernels
  flags:            {},           // raw TF ENV flags

  filter: {
    enabled:       true,
    flip:          false,         // horizontal mirror
    equalization:  false,         // histogram equalization
    autoBrightness:true,
    brightness:    0,             // -1..1
    contrast:      0,             // -1..1
    sharpness:     0,             // 0..1
    blur:          0,             // radius in pixels
    saturation:    0,             // -1..1
    hue:           0,             // 0..360 degrees
    negative:      false,
    sepia:         false,
    width:         0,             // resize; 0 = no resize
    height:        0,
  },

  face: {
    enabled: true,
    detector:    { maxDetected: 1, minConfidence: 0.2, rotation: false, skipFrames: 99 },
    mesh:        { enabled: true },
    iris:        { enabled: true },
    description: { enabled: true, minConfidence: 0.1 }, // age, gender, race, embedding
    emotion:     { enabled: true, minConfidence: 0.1 },
    antispoof:   { enabled: false },
    liveness:    { enabled: false },
  },

  body: {
    enabled:        true,
    modelPath:      'movenet-lightning.json', // or 'blazepose.json', 'efficientpose.json', 'posenet.json'
    maxDetected:    -1,           // -1 = auto (matches face count)
    minConfidence:  0.3,
  },

  hand: {
    enabled:       true,
    maxDetected:   -1,            // -1 = auto (2× face count)
    minConfidence: 0.5,
    landmarks:     true,
    detector:   { modelPath: 'handtrack.json' },
    skeleton:   { modelPath: 'handlandmark-lite.json' },
  },

  object: {
    enabled:       false,
    modelPath:     'centernet.json', // or 'nanodet.json'
    maxDetected:   10,
    minConfidence: 0.2,
  },

  segmentation: {
    enabled:   false,
    modelPath: 'rvm.json',  // or 'meet.json', 'selfie.json'
    ratio:     0.5,
    mode:      'default',   // 'default'|'alpha'|'foreground'|'state'
  },

  gesture: { enabled: true },
};
```

--------------------------------

### human.webcam.*

Source: https://context7.com/vladmandic/human/llms.txt

Provides a set of helper methods for managing webcam streams. This includes enumerating available cameras, starting and stopping streams with specific resolutions and modes, and managing the video element for display. It simplifies webcam integration into applications.

```APIDOC
## `human.webcam.*` — WebCam Helper

Built-in webcam management class that handles device enumeration, stream acquisition, and lifecycle (start/stop/pause/play).

```js
const human  = new Human({ backend: 'webgl' });
const canvas = document.getElementById('canvas');

// Enumerate available cameras
const devices = await human.webcam.enumerate();
console.log('Cameras:', devices.map((d) => d.label));

// Start front camera at 1280×720
const status = await human.webcam.start({
  element: 'video-element-id', // id of an <video> element, or an HTMLVideoElement, or undefined to auto-create
  mode:    'front',             // 'front' | 'back'
  crop:    true,                // crop-and-scale to square
  width:   1280,
  height:  720,
  id:      devices[0].deviceId,
});
console.log(status); // 'webcam: FaceTime HD Camera'

// Attach to detection loop
canvas.width  = human.webcam.width;
canvas.height = human.webcam.height;

human.video(human.webcam.element);

async function drawLoop() {
  const result = human.next();
  human.draw.canvas(human.webcam.element, canvas);
  await human.draw.all(canvas, result);
  requestAnimationFrame(drawLoop);
}
drawLoop();

// Pause / resume
human.webcam.pause();
await human.webcam.play();

// Stop entirely
human.webcam.stop();
```
```

--------------------------------

### Video Detection with Human.js using Events

Source: https://github.com/vladmandic/human/wiki/Home

This example utilizes Human's event listener for the 'detect' event to trigger drawing operations. It initializes Human, sets up the event listener, and starts the detection loop.

```javascript
const config = { backend: 'webgl' };
const human = new Human(config);
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');

human.events.addEventListener('detect', () => {
  human.draw.all(outputCanvas, human.result);
});

function detectVideo() {
  human.detect(inputVideo)
    .then(() => requestAnimationFrame(detectVideo));
}

detectVideo();
```

--------------------------------

### Smooth Video Processing with Interpolated Results

Source: https://github.com/vladmandic/human/wiki/Home

This example separates detection and drawing loops for smoother video processing. It uses `human.detect` for detection and `human.next` to get interpolated results for drawing, requiring separate loops for detection and drawing.

```javascript
const human = new Human();
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');
let result;

async function detectVideo() {
  result = await human.detect(inputVideo);
  requestAnimationFrame(detectVideo);
}

async function drawVideo() {
  if (result) {
    const interpolated = human.next(result);
    human.draw.all(outputCanvas, interpolated);
  }
  requestAnimationFrame(drawVideo);
}

detectVideo();
drawVideo();
```

--------------------------------

### Human Instance Creation and Detection

Source: https://github.com/vladmandic/human/wiki/Usage

Demonstrates how to create an instance of the Human library and perform a single detection on an input.

```APIDOC
## Create Human Instance and Detect

### Description
Instantiate the Human library and perform a single detection on an input image or frame.

### Method
```javascript
const human = new Human(config?); // create instance of human
const result = await human.detect(input, config?); // run single detection
```

### Notes
- Refer to [Valid Inputs](https://github.com/vladmandic/human/wiki/Inputs) for supported input types.
- Refer to [Configuration Details](https://github.com/vladmandic/human/wiki/Config) for configuration options.
```

--------------------------------

### Default Module Paths

Source: https://github.com/vladmandic/human/wiki/Install

Configuration showing default paths for different module formats and environments.

```json
{
  "node": {
    "require": "./dist/human.node.js",
    "import": "./dist/human.node.js",
    "module": "./dist/human.node.js"
  },
  "require": "./dist/human.node.js",
  "import": "./dist/human.esm.js",
  "script": "./dist/human.js",
  "module": "./dist/human.esm.js",
  "types": "./types/human.d.ts"
}
```

--------------------------------

### Get Profiling Data

Source: https://github.com/vladmandic/human/wiki/Profiling

Call `human.profileData()` when `config.profile` is enabled to get detailed profiling information from the last detection.

```javascript
  result = {
    {age: {…}, gender: {…}, emotion: {…}}
      age:
        timeKernelOps: 53.78892800000002
        newBytes: 4
        newTensors: 1
        numKernelOps: 341
        peakBytes: 46033948
        largestKernelOps: Array(5)
          0: {name: "Reshape", bytesAdded: 107648, totalBytesSnapshot: 46033948, tensorsAdded: 1, totalTensorsSnapshot: 1149, …}
          1: {name: "Reshape", bytesAdded: 0, totalBytesSnapshot: 45818652, tensorsAdded: 1, totalTensorsSnapshot: 1147, …}
          2: {name: "Reshape", bytesAdded: 0, totalBytesSnapshot: 45633996, tensorsAdded: 1, totalTensorsSnapshot: 1148, …}
          3: {name: "Reshape", bytesAdded: 0, totalBytesSnapshot: 45389376, tensorsAdded: 1, totalTensorsSnapshot: 1154, …}
          4: {name: "Reshape", bytesAdded: 53824, totalBytesSnapshot: 45381776, tensorsAdded: 1, totalTensorsSnapshot: 1155, …}
        slowestKernelOps: Array(5)
          0: {name: "_FusedMatMul", bytesAdded: 12, totalBytesSnapshot: 44802280, tensorsAdded: 1, totalTensorsSnapshot: 1156, …}
          1: {name: "_FusedMatMul", bytesAdded: 4, totalBytesSnapshot: 44727564, tensorsAdded: 1, totalTensorsSnapshot: 1152, …}
          2: {name: "_FusedMatMul", bytesAdded: 12, totalBytesSnapshot: 44789100, tensorsAdded: 1, totalTensorsSnapshot: 1157, …}
          3: {name: "Add", bytesAdded: 4, totalBytesSnapshot: 44788748, tensorsAdded: 1, totalTensorsSnapshot: 1158, …}
          4: {name: "Add", bytesAdded: 4, totalBytesSnapshot: 44788748, tensorsAdded: 1, totalTensorsSnapshot: 1158, …}
  }
```

--------------------------------

### warmup

Source: https://github.com/vladmandic/human/blob/main/typedoc/classes/Human.html

Pre-initializes all configured models for faster inference. This method can take significant time on startup and is primarily used for 'webgl' and 'humangl' backends.

```APIDOC
## warmup

### Description
Warmup method pre-initializes all configured models for faster inference.

### Method
`warmup(userConfig?: Partial<Config>): Promise<undefined | Result>[]`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
*   **userConfig** (Partial<Config>) - Optional. Configuration object to customize the warmup process.

### Request Example
```typescript
// Example usage:
// await human.warmup({ backend: 'webgl' });
```

### Response
#### Success Response (undefined | Result)
Returns a Promise that resolves with the warmup result, which can be undefined or a Result object.

#### Response Example
```json
// Example response structure (actual content may vary):
// {
//   "message": "Warmup complete"
// }
// or undefined if no result is returned
```
```

--------------------------------

### Human Instance Creation and Video Processing

Source: https://github.com/vladmandic/human/wiki/Usage

Shows how to create a Human instance and continuously process video input.

```APIDOC
## Create Human Instance and Process Video

### Description
Instantiate the Human library and set up continuous detection processing on a video input.

### Method
```javascript
const human = new Human(config?); // create instance of human
await human.video(input, config?); // run detection loop on input video
// last known results are available in human.results
```

### Notes
- The results of the video processing are stored in `human.results`.
```

--------------------------------

### Build Docker Image for Human Web Application

Source: https://github.com/vladmandic/human/wiki/Docker

Builds a Docker image for the Human web application using the 'human-web.docker' file and tags it as 'human-web'.

```bash
sudo docker build . --file human-web.docker --tag human-web
```

--------------------------------

### Systemd Service Configuration for Human

Source: https://github.com/vladmandic/human/wiki/Development-Server

Sample systemd service file for running the Human project as a daemon on Linux. Ensure paths and user are correctly configured.

```text
[Unit]
Description=human
After=network.target network-online.target

[Service]
Type=simple
Environment="NODE_ENV=production"
ExecStart=/home/vlado/.nvm/versions/node/v16.5.0/bin/node /home/vlado/dev/human/node_modules/@vladmandic/build/src/build.js --profile development
WorkingDirectory=/home/vlado/dev/human
StandardOutput=inherit
StandardError=inherit
Restart=always
RestartSec=300
User=vlado
StandardOutput=null

[Install]
WantedBy=multi-user.target
```

--------------------------------

### Custom Body Label Template Example

Source: https://github.com/vladmandic/human/wiki/Draw

Demonstrates how to override default label templates with custom strings. This example creates a custom label for the body that includes the confidence score and the number of keypoints detected. Ensure 'human.result' and 'human.result.body' are populated before accessing their properties.

```javascript
const drawOptions = {
  bodyLabels: `person confidence is [score]% and has ${human.result?.body?.[0]?.keypoints.length || 'no'} keypoints`,
};
human.draw.all(dom.canvas, human.result, drawOptions);
```

--------------------------------

### Initialize Human Library with Configuration

Source: https://context7.com/vladmandic/human/llms.txt

Create a new Human library instance with an optional configuration object. This configures model paths, performance settings, and enables/disables various analysis features like face detection, body pose, and gestures.

```javascript
import Human from '@vladmandic/human'; // ESM / bundler

const human = new Human({
  backend: 'webgl',          // 'cpu' | 'wasm' | 'webgl' | 'humangl' | 'webgpu' | 'tensorflow'
  modelBasePath: 'https://vladmandic.github.io/human-models/models/',
  debug: false,
  async: true,               // run models concurrently
  warmup: 'full',            // pre-initialize shaders on startup
  cacheSensitivity: 0.7,     // 0 = no cache, 1 = always cache
  filter: {
    enabled: true,
    flip: true,              // mirror webcam
    equalization: false,
  },
  face: {
    enabled: true,
    detector: { maxDetected: 4, rotation: true },
    mesh:        { enabled: true },
    iris:        { enabled: true },
    description: { enabled: true },  // age, gender, race, embedding
    emotion:     { enabled: true },
    antispoof:   { enabled: false },
    liveness:    { enabled: false },
  },
  body:        { enabled: true,  modelPath: 'movenet-lightning.json' },
  hand:        { enabled: true },
  object:      { enabled: false },
  gesture:     { enabled: true },
  segmentation:{ enabled: false },
});

console.log('Human version:', human.version);
// Human version: 3.3.6
```

--------------------------------

### Get List of Running Docker Containers

Source: https://github.com/vladmandic/human/wiki/Docker

Lists all currently running Docker containers.

```bash
docker ps
```

--------------------------------

### Build Tracker with esbuild

Source: https://github.com/vladmandic/human/blob/main/demo/tracker/README.md

Build the tracker.js file using esbuild, bundling it for browser use and analyzing the output.

```bash
node_modules/.bin/esbuild --bundle tracker.js --format=esm --platform=browser --target=esnext --keep-names --tree-shaking=false --analyze --outfile=/home/vlado/dev/human/demo/tracker/tracker.js --banner:js="/* eslint-disable */"
```

--------------------------------

### Get Logs from a Running Docker Container

Source: https://github.com/vladmandic/human/wiki/Docker

Retrieves logs from a specified running Docker container using its ID.

```bash
docker logs `containerID`
```

--------------------------------

### Get Human Library Version

Source: https://github.com/vladmandic/human/wiki/Diag

Access the current version of the Human library. This is useful for compatibility checks and debugging.

```javascript
console.log(human.version);
```

--------------------------------

### Configure Demo Options in JavaScript

Source: https://github.com/vladmandic/human/blob/main/demo/README.md

Set various options for the Human library demo, such as enabling console logging, using web workers, buffering, interpolation, displaying results, and choosing the camera source.

```javascript
const ui = {
  console: true,      // log messages to browser console
  useWorker: true,    // use web workers for processing
  buffered: true,     // should output be buffered between frames
  interpolated: true, // should output be interpolated for smoothness between frames
  results: false,     // show results tree
  useWebRTC: false,   // use webrtc as camera source instead of local webcam
};
```

--------------------------------

### Initialize Human and Detect Objects

Source: https://github.com/vladmandic/human/wiki/Usage

Create an instance of the Human library and perform a single detection on an input. Configuration is optional.

```javascript
const human = new Human(config?)
const result = await human.detect(input, config?)
```

--------------------------------

### human.warmup

Source: https://context7.com/vladmandic/human/llms.txt

Pre-initializes the Human backend by running a dummy inference pass. This is useful for initializing GPU shaders and compiler caches, which can significantly reduce latency for the first real detection, especially for webgl and humangl backends.

```APIDOC
## `human.warmup(config?)` — Pre-initialize Backend

Runs a dummy inference pass through all loaded models to initialize GPU shaders and compiler caches, dramatically reducing latency on the first real detection. Most impactful for `webgl` and `humangl` backends.

```js
await human.load();
await human.warmup(); // runs ~200ms on first call; subsequent detections are immediate

console.log('Warmup time:', human.performance.warmup, 'ms');
// Warmup time: 218 ms
```
```

--------------------------------

### Get List of All Models

Source: https://github.com/vladmandic/human/wiki/Diag

Retrieve a list of all available models and their loaded status. This helps in understanding which models are ready for use.

```javascript
const models = human.models.list();
console.log(models);
```

```javascript
models = [
  { name: 'face', loaded: true },
  { name: 'posenet', loaded: false },
  { name: 'blazepose', loaded: false },
  { name: 'efficientpose', loaded: false },
  { name: 'movenet', loaded: true },
  { name: 'handpose', loaded: true },
  { name: 'age', loaded: false },
  { name: 'gender', loaded: false },
  { name: 'emotion', loaded: true },
  { name: 'embedding', loaded: false },
  { name: 'nanodet', loaded: false },
  { name: 'centernet', loaded: false },
  { name: 'faceres', loaded: true },
  { name: 'segmentation', loaded: false },
];
```

--------------------------------

### Get Current TensorFlow Flags

Source: https://github.com/vladmandic/human/wiki/Diag

View the active TensorFlow.js environment flags. These flags control various aspects of TensorFlow.js behavior and performance.

```javascript
console.log(human.tf.ENV.flags);
```

```javascript
flags = { DEBUG: false, PROD: true, CPU_HANDOFF_SIZE_THRESHOLD: 128 };
```

--------------------------------

### Human Detection with Async/Await

Source: https://github.com/vladmandic/human/blob/main/README.md

Shows how to perform Human detection using async/await syntax for cleaner asynchronous code. Requires input video and output canvas elements.

```javascript
// create instance of human with simple configuration using default values
const config = { backend: 'webgl' };
const human = new Human(config); // create instance of Human
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');

async function detectVideo() {
  const result = await human.detect(inputVideo); // run detection
  human.draw.all(outputCanvas, result); // draw all results
  requestAnimationFrame(detectVideo); // run loop
}

detectVideo(); // start loop

```

--------------------------------

### Run Node.js Demo

Source: https://github.com/vladmandic/human/blob/main/demo/nodejs/README.md

Execute the Node.js demo script. This script processes provided sample images or a specified image path.

```shell
node demo/nodejs/node.js
```

--------------------------------

### Get Performance Information After Detection

Source: https://github.com/vladmandic/human/wiki/Diag

After running a detection, access the performance metrics. This provides insights into the time spent on different stages of the detection process.

```javascript
const result = await human.detect(input);
console.log(result.performance);
```

```javascript
performance = {
  backend: 1, load: 283, image: 1, frames: 1, cached: 0, changed: 1, total: 947, draw: 0, face: 390, emotion: 15, embedding: 97, body: 97, hand: 142, object: 312, gesture: 0,
};
```

--------------------------------

### Get Memory Usage Information

Source: https://github.com/vladmandic/human/wiki/Diag

Query the TensorFlow.js engine for current memory usage statistics. This is useful for performance tuning and identifying memory leaks.

```javascript
console.log(human.tf.engine().memory());
```

```javascript
memory = { numTensors: 1053, numDataBuffers: 1053, numBytes: 42736024 };
```

--------------------------------

### init()

Source: https://github.com/vladmandic/human/blob/main/typedoc/classes/Human.html

Explicitly initializes the TFJS backend. This is normally done implicitly but can be called to register and initialize the backend without other operations, or when changing backends at runtime.

```APIDOC
## init()

### Description
Explicit backend initialization. Normally done implicitly during the initial load phase, but can be called to explicitly register and initialize the TFJS backend without any other operations, or when changing backends during runtime.

### Returns
* `Promise<void>` - A promise that resolves when the backend is initialized.
```