Handtrack.js 项目教程

丁战崇Exalted

于 2024-08-09 07:42:03 发布

阅读量298

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00870/article/details/141045755

版权

Handtrack.js 项目教程

handtrack.jsA library for prototyping realtime hand detection (bounding box), directly in the browser. 项目地址:https://gitcode.com/gh_mirrors/ha/handtrack.js

1. 项目的目录结构及介绍

Handtrack.js 项目的目录结构如下：

handtrack.js/
├── demo/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── dist/
│   ├── handtrack.min.js
│   └── handtrack.min.js.map
├── src/
│   ├── data/
│   │   ├── coco.names
│   │   ├── yolov3-tiny.cfg
│   │   └── yolov3-tiny.weights
│   ├── index.js
│   └── utils.js
├── README.md
└── package.json

目录介绍

demo/: 包含项目的演示文件，包括 index.html, style.css, 和 script.js。
dist/: 包含编译后的 JavaScript 文件，handtrack.min.js 是压缩后的库文件，handtrack.min.js.map 是源映射文件。
src/: 包含项目的源代码，data/ 目录下是模型配置和权重文件，index.js 是主入口文件，utils.js 包含一些辅助函数。
README.md: 项目的说明文档。
package.json: 项目的配置文件，包含依赖和脚本信息。

2. 项目的启动文件介绍

项目的启动文件是 demo/index.html，它是一个简单的 HTML 文件，用于展示 Handtrack.js 的基本功能。

`demo/index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handtrack.js Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Handtrack.js Demo</h1>
    <video id="video" width="600" height="450" autoplay muted></video>
    <canvas id="canvas" width="600" height="450"></canvas>
    <script src="../dist/handtrack.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

`demo/script.js`

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

handTrack.startVideo(video).then((status) => {
    if (status) {
        handTrack.load().then(model => {
            console.log("Model loaded.");
            setInterval(() => {
                model.detect(video).then(predictions => {
                    console.log('Predictions: ', predictions);
                    model.renderPredictions(predictions, canvas, context, video);
                });
            }, 100);
        });
    }
});

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的依赖、脚本和其他元数据。

`package.json`

{
  "name": "handtrackjs",
  "version": "0.1.0",
  "description": "A library for prototyping realtime hand detection (bounding box) directly in the browser.",
  "main": "dist/handtrack.min.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "handtracking",
    "machinelearning",
    "tensorflowjs"
  ],
  "author": "Victor Dibia",
  "license": "MIT",
  "dependencies": {
    "@tensorflow/tfjs": "^1.2.11",
    "@tensorflow/tfjs-node": "^1.2.11"
  },
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}