human
Human 是一款功能强大的开源 AI 库,专为在浏览器和 Node.js 环境中实现全方位的人体感知而设计。它能够实时完成 3D 人脸检测与旋转追踪、人脸识别、身体姿态估计、3D 手部及手指追踪、虹膜分析,以及年龄、性别、情绪预测、视线追踪和手势识别等复杂任务。
Human 主要解决了开发者在集成多种计算机视觉模型时面临的痛点:传统方案往往需要分别调用多个独立的库,导致代码冗余、资源消耗大且难以协调。Human 通过将多个机器学习模型整合到统一的注意力管道中,实现了按需加载和智能调度。其独特的技术亮点包括优化的图像预处理、基于帧变化的动态模型触发机制,以及智能的时间插值算法,确保即使在性能有限的设备上也能输出流畅、稳定的结果。
这款工具非常适合前端工程师、全栈开发者以及希望快速构建交互式应用的研究人员。无论是开发虚拟试衣、视频会议特效、无障碍交互界面,还是进行行为分析研究,Human 都提供了简洁统一的 API 和内置的媒体处理能力。它支持 WebGL、WebGPU、WASM 等多种后端,兼容桌面与移动端主流浏览器,让高精度的 AI 视觉能力能够轻松落地于各类 Web 项目中。
使用场景
某在线教育平台正在开发一款"AI 互动课堂”功能,旨在通过摄像头实时分析学生的听课状态与专注度,以优化教学反馈。
没有 human 时
- 开发周期漫长:团队需分别集成人脸检测、姿态估计、情绪识别等多个独立的开源模型,代码耦合度高,调试耗时数周。
- 浏览器兼容性差:不同模型对后端(WebGL/WASM)支持不一,导致在部分老旧设备或 Safari 浏览器上功能直接不可用。
- 画面抖动严重:由于缺乏时序插值算法,单帧检测结果波动大,学生轻微晃动会被误判为“频繁走神”或“异常动作”。
- 资源占用过高:所有模型全量运行且无动态调度机制,导致用户笔记本风扇狂转,视频流卡顿甚至崩溃。
使用 human 后
- 一站式快速集成:human 提供统一 API,将 3D 人脸、手势、视线及情绪分析等能力打包,原本数周的整合工作缩短至两天完成。
- 全平台流畅运行:自动适配 WebGPU、WebGL 或 WASM 后端,确保从高端台式机到移动端 WebView 均能稳定执行推理。
- 数据平滑精准:内置智能时序插值与帧变化检测,有效过滤噪点,输出的专注度曲线平滑自然,真实反映学生状态。
- 性能动态优化:根据场景需求按需加载模型(如仅有人脸时暂停姿态追踪),大幅降低 CPU/GPU 负载,保证视频流高清流畅。
human 通过高度集成的多模态感知能力与智能性能调度,让复杂的端侧 AI 交互应用得以低成本、高性能地落地。
运行环境要求
- Linux
- macOS
- Windows
- 非必需
- 浏览器端支持 WebGL/WebGPU/WASM/CPU
- NodeJS 端若需 GPU 加速,需 nVidia CUDA 及对应的 tensorflow 共享库
未说明

快速开始
Human库
AI驱动的3D人脸检测与旋转跟踪、人脸描述与识别,
人体姿态跟踪、3D手部与手指跟踪、虹膜分析,
年龄、性别与情绪预测、视线跟踪、手势识别、人体分割
亮点
- 兼容大多数服务器端和客户端环境及框架
- 结合了多种机器学习模型,可根据使用场景按需切换
- 相关模型以注意力流水线方式执行,在需要时提供详细信息
- 优化的输入预处理可提升任何类型输入的图像质量
- 检测帧变化以仅触发所需模型,从而提升性能
- 智能的时间插值技术可在不同处理性能下提供流畅结果
- 简单统一的API
- 内置图像、视频和网络摄像头处理功能
兼容性
浏览器:
- 兼容桌面和移动平台
- 兼容 WebGPU、WebGL、WASM、CPU 后端
- 兼容 WebWorker 执行
- 兼容 WebView
- 主要平台:基于 Chromium 的浏览器
- 次要平台:Firefox、Safari
NodeJS:
- 兼容 WASM 后端,适用于无法使用 tensorflow 二进制文件的架构
- 兼容使用 tensorflow 共享库进行软件执行的 tfjs-node
- 兼容使用 tensorflow 共享库和 nVidia CUDA 进行 GPU 加速执行的 tfjs-node
- 支持的版本从 14.x 到 22.x
- 由于重大变更及与
@tensorflow/tfjs的兼容性问题,不支持 NodeJS 23.x 版本
发布
演示
请查看 简单实时演示,这是一款完全注释的应用程序,是一个很好的起点(html)(代码)
请查看 主实时演示,该应用可对网络摄像头、视频流或静态图像进行高级处理,并提供所有可调参数
- 要开始视频检测,只需按下 播放 按钮
- 要处理图像,只需在浏览器窗口中拖放即可
- 注意:为获得最佳性能,请仅选择您想要使用的模型
- 注意:如果您拥有现代显卡,建议使用 WebGL(默认)后端,否则请选择 WASM 后端
浏览器演示
所有浏览器演示均自包含,无需任何外部依赖
- 完整版 [在线] [详情]: 主要浏览器演示应用,展示了 Human 的全部功能
- 简易版 [在线] [详情]: 使用 TypeScript 编写的简单网络摄像头处理演示
- 嵌入版 [在线] [详情]: 更加简单的演示,代码直接嵌入在 HTML 文件中
- 人脸检测 [在线] [详情]: 从图像中提取人脸并进行细节处理
- 人脸匹配 [在线] [详情]: 提取图像中的人脸,计算人脸描述符和相似度,并与已知数据库进行匹配
- 人脸ID [在线] [详情]: 在对 IndexDB 中的人脸进行匹配之前,运行多项检查以验证网络摄像头输入
- 多线程 [在线] [详情]: 将每个 Human 模块运行在独立的 Web Worker 中,以实现最高性能
- NextJS [在线] [详情]: 使用 Human 结合 TypeScript、NextJS 和 ReactJS
- ElectronJS [详情]: 使用 Human 结合 TypeScript 和 ElectronJS 创建跨平台独立应用
- 使用 BabylonJS 进行3D分析 [在线] [详情]: 对头部、面部、眼部、身体和手部进行3D跟踪与可视化
- 使用 Three.JS 跟踪VRM虚拟模型 [在线] [详情]: 跟踪带有头部、面部、眼部、身体和手部的VR模型
- 使用 BabylonJS 跟踪VRM虚拟模型 [在线] [详情]: 跟踪带有头部、面部、眼部、身体和手部的VR模型
Node.js 示例
Node.js 示例可能需要额外的依赖项,这些依赖项用于解码输入
请查看每个示例的头部以了解其依赖项,因为它们不会随 Human 自动安装
- 主程序 [详情]: 使用原生方法处理来自文件、文件夹或 URL 的图像
- Canvas [详情]: 处理来自文件或 URL 的图像,并使用
node-canvas将结果绘制到新的图像文件中 - 视频 [详情]: 使用
ffmpeg处理视频输入 - 网络摄像头 [详情]: 使用
fswebcam处理网络摄像头截图 - 事件 [详情]: 展示如何使用
Human的事件机制获取处理通知 - 相似度 [详情]: 比较两张输入图像中检测到的人脸的相似性
- 人脸匹配 [详情]: 在多个子工作线程中并行处理人脸 匹配
- 多进程 [详情]: 通过将多个
human分配到预先创建的工作进程池中来运行多个并行任务 - 动态加载 [详情]: 动态加载具有多种不同后端的 Human
项目页面
Wiki 页面
补充说明
- 比较后端
- 开发服务器
- 构建流程
- 添加自定义模块
- 性能注意事项
- 性能剖析
- 平台支持
- 诊断与性能追踪信息
- 将 Human 应用程序 Docker 化
- 模型与致谢列表
- 模型下载仓库
- 安全与隐私政策
- 许可证与使用限制
欢迎提出建议!
应用示例
访问 示例图库 获取更多示例
选项
演示应用程序中展示的所有选项...
demo/index.html
高级示例
- 人脸相似度匹配:
从提供的输入图像中提取所有人脸,
按与选定人脸的相似度进行排序,
并可选地将检测到的人脸与已知人员数据库进行匹配,以猜测其姓名。
- 人脸检测:
按需从加载的图像中提取所有检测到的人脸,并在选定的人脸上突出显示面部细节。
- 人脸身份验证:
对网络摄像头输入进行验证检查,以检测真实人脸,并将其与数据库中存储的已知人脸进行匹配。
- 3D 渲染:
- VR 模型追踪:
- 将人类作为操作系统原生应用:
468 点人脸网格细节:
(以全分辨率查看以看清关键点)
快速入门
只需在 HTML 文件中直接从云 CDN 加载 Human(IIFE 版本):
(选择其中一个:jsdelirv、unpkg 或 cdnjs)
<!DOCTYPE HTML>
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/human/dist/human.js"></script>
<script src="https://unpkg.dev/@vladmandic/human/dist/human.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/human/3.0.0/human.js"></script>
有关详细信息,包括如何使用 Browser ESM 版本或 NodeJS 版本的 Human,请参阅 安装。
代码示例
一个简单的应用,使用 Human 处理视频输入,并利用内置的绘制辅助函数在屏幕上绘制输出结果。
// 使用默认值创建一个简单配置的 Human 实例
const config = { backend: 'webgl' };
const human = new Human.Human(config);
// 从页面中选择输入的 HTMLVideoElement 和输出的 HTMLCanvasElement
const inputVideo = document.getElementById('video-id');
const outputCanvas = document.getElementById('canvas-id');
function detectVideo() {
// 使用默认配置进行处理
human.detect(inputVideo).then((result) => {
// 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();
或者使用 async/await:
// 使用默认值创建一个简单配置的 Human 实例
const config = { backend: 'webgl' };
const human = new Human(config); // 创建 Human 实例
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(); // 开始循环
或者使用 Events:
// 使用默认值创建一个简单配置的 Human 实例
const config = { backend: 'webgl' };
const human = new Human(config); // 创建 Human 实例
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(); // 开始循环
或者通过插值结果实现平滑的视频处理,将检测和绘制循环分开:
const human = new Human(); // 创建 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(); // 开始绘制循环
或者同样的方式,但使用内置的完整视频处理功能,而不是手动逐帧循环:
const human = new Human(); // 创建 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(); // 开始绘制循环
或者使用内置的摄像头辅助方法,完全负责视频处理:
const human = new Human(); // 创建 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(); // 开始绘制循环
为了获得更好的效果,还可以在单独的 Web Worker 线程中运行检测。
输入
Human 库可以处理所有已知的输入类型:
Image、ImageData、ImageBitmap、Canvas、OffscreenCanvas、TensorHTMLImageElement、HTMLCanvasElement、HTMLVideoElement、HTMLMediaElement
此外,HTMLVideoElement 和 HTMLMediaElement 可以是标准的 <video> 标签,链接到以下内容:
- 用户设备上的网络摄像头
- 任何支持的视频格式
例如.mp4、.avi等 - 通过 HTML5 媒体源扩展 支持的其他视频格式
例如:使用hls.js的 HLS(HTTP 实时流)或使用dash.js的 DASH(基于 HTTP 的动态自适应流) - 内置支持的 WebRTC 媒体轨道
详细使用说明
TypeDefs
Human 是使用 TypeScript 强类型编写的,并随附库中定义的所有类的完整 TypeDefs,打包在 types/human.d.ts 中,默认启用。
注意:这不包括嵌入的 tfjs。
如果您希望在 Human 中使用嵌入的 tfjs(human.tf 命名空间),同时保留完整的 typedefs,请添加以下代码:
import type * as tfjs from '@vladmandic/human/dist/tfjs.esm';
const tf = human.tf as typeof tfjs;
默认情况下未启用此功能,因为考虑到体积因素,Human 并不提供完整的 TFJS TypeDefs。
如上启用 tfjs 的 TypeDefs 会引入额外的项目依赖(仅开发环境所需,因为仅需类型信息),这些依赖定义在 @vladmandic/human/dist/tfjs.esm.d.ts 中:
@tensorflow/tfjs-core, @tensorflow/tfjs-converter, @tensorflow/tfjs-backend-wasm, @tensorflow/tfjs-backend-webgl
默认模型
Human 库中的默认模型包括:
- 人脸检测:MediaPipe BlazeFace Back 变体
- 人脸网格:MediaPipe FaceMesh
- 虹膜分析:MediaPipe Iris
- 人脸描述:HSE FaceRes
- 情绪识别:Oarriaga Emotion
- 人体分析:MoveNet Lightning 变体
- 手部分析:HandTrack & MediaPipe HandLandmarks
- 人体分割:Google Selfie
- 目标检测:CenterNet 配合 MobileNet v3
请注意,库中提供了替代模型,可通过配置启用。
例如,人体姿态检测默认使用 MoveNet Lightning,但也可以切换为 MultiNet Thunder 以获得更高精度,或切换为 Multinet MultiPose 以实现多人检测;此外,还可以根据具体应用场景选择 PoseNet、BlazePose 或 EfficientPose。
诊断工具
Human 库采用 TypeScript 5.1 编写,基于 TensorFlow/JS 4.10 构建,并遵循最新的 JavaScript ECMAScript 2022 标准。
可分发版本的目标环境为 JavaScript ECMAScript 2018。
版本历史
3.2.12024/02/153.1.22023/09/183.0.12022/11/222.11.12022/10/132.10.12022/09/072.9.12022/07/252.8.12022/06/08v2.7.12022/05/092.6.12022/01/202.5.62021/12/152.5.12021/11/082.4.12021/10/252.3.22021/10/062.2.12021/09/162.0.12021/06/081.8.12021/05/021.4.12021/04/091.0.12021/03/090.32021/01/290.12020/10/12常见问题
相似工具推荐
openclaw
OpenClaw 是一款专为个人打造的本地化 AI 助手,旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚,能够直接接入你日常使用的各类通讯渠道,包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息,OpenClaw 都能即时响应,甚至支持在 macOS、iOS 和 Android 设备上进行语音交互,并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地,用户无需依赖云端服务即可享受快速、私密的智能辅助,真正实现了“你的数据,你做主”。其独特的技术亮点在于强大的网关架构,将控制平面与核心助手分离,确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者,以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力(支持 macOS、Linux 及 Windows WSL2),即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。
LLMs-from-scratch
LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目,旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型(LLM)。它不仅是同名技术著作的官方代码库,更提供了一套完整的实践方案,涵盖模型开发、预训练及微调的全过程。 该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型,却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码,用户能够透彻掌握 Transformer 架构、注意力机制等关键原理,从而真正理解大模型是如何“思考”的。此外,项目还包含了加载大型预训练权重进行微调的代码,帮助用户将理论知识延伸至实际应用。 LLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API,而是渴望探究模型构建细节的技术人员而言,这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计:将复杂的系统工程拆解为清晰的步骤,配合详细的图表与示例,让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础,还是为未来研发更大规模的模型做准备
Deep-Live-Cam
Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具,用户仅需一张静态照片,即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点,让高质量的数字内容创作变得触手可及。 这款工具不仅适合开发者和技术研究人员探索算法边界,更因其极简的操作逻辑(仅需三步:选脸、选摄像头、启动),广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换,还是制作趣味短视频和直播互动,Deep-Live-Cam 都能提供流畅的支持。 其核心技术亮点在于强大的实时处理能力,支持口型遮罩(Mouth Mask)以保留使用者原始的嘴部动作,确保表情自然精准;同时具备“人脸映射”功能,可同时对画面中的多个主体应用不同面孔。此外,项目内置了严格的内容安全过滤机制,自动拦截涉及裸露、暴力等不当素材,并倡导用户在获得授权及明确标注的前提下合规使用,体现了技术发展与伦理责任的平衡。











