返回

视觉集成识别前端库Handsfree.js使用教程

2024-04-02 视觉集成 前端库 Handsfree.js 使用教程 342 0

Handsfree.js是一个通过计算机视觉集成手势、面部表情和各种姿势识别的前端库。其核心技术使用了TensorFlow.js,可在浏览器上触发交互事件,比如滚动网页,检测人脸并展示相关表情,控制桌面游戏等。开发者还可以通过 Handsfree 与 websocket 的结合控制任意与电脑连接的设备。

Handsfree.js 官网地址:https://handsfreejs.netlify.app/

视觉集成识别前端库Handsfree.js使用教程

主要功能

手势识别:识别常见的手势,如挥手、点赞、比V等。

面部表情识别:识别常见的面部表情,如微笑、皱眉、惊讶等。

姿势识别:识别常见的姿势,如坐姿、站姿、挥手等。

官方提供的以下模型可以实时组合和重新配置:

MediaPipe Hands (2D):每只手 21 个 2D 手部标志;同时追踪最多 4 只手;支持捏合状态、手指指针和手势

TensorFlow Handpose:支持 21 个 3D 手部标记;一次只能追踪 1 只手;支持额外的助手和插件

MediaPipe FaceMesh:支持 468 个 2D 人脸特征点;一次最多追踪 4 张面孔; 支持更多助手和插件

MediaPipe Pose:支持具有 33 个 2D 姿势地标的全身模式;具有 25 个 2D 上身姿势标志的上半身模式

TensorFlow Handpose:支持 6DOF 头部姿势;11 种面部变形和 16 种辅助状态;附带基于 “Face Pointer” 的插件

2.如何使用 Handsfree

开发者可以选择从 CDN 加载资源然后使用,比如下面的例子:

<head>
  <!-- 加载 Handsfree.js 的官方包,包含 css 和 js -->
  <link rel="stylesheet" href="https://unpkg.com/handsfree@8.5.1/build/lib/assets/handsfree.css" />
  <script src="https://unpkg.com/handsfree@8.5.1/build/lib/handsfree.js"></script>
</head>

<body>
  <!-- 实例化Handsfree同时启用  -->
  <script>
    const handsfree = new Handsfree({hands: true})
    handsfree.enablePlugins('browser')
    handsfree.start()
  </script>
</body>

当然,也可以选择从 NPM 下载然后使用:

// 启用 Mediapipe 的 “手” 模型
const handsfree = new Handsfree({hands: true})
// 启动标签为 "browser" 的插件
handsfree.enablePlugins('browser')
// 开始追踪
handsfree.start()

但是,值得一提的是某些模型体积可能超过 10Mb+,加载可能需要先对较长的时间。因此,如果要自行托管模型并离线使用,可以将模型从 npm 包下载到项目的公共文件夹中,比如 PUBLIC:

// 在 WINDOWS 平台上
xcopy /e node_modules\handsfree\build\lib PUBLIC
// 在其他平台上
cp -r node_modules/handsfree/build/lib/* PUBLIC

然后按照如下方式引用:

import Handsfree from 'handsfree'
const handsfree = new Handsfree({
  hands: true,
  // Set this to your where you moved the models into
  assetsPath: '/PUBLIC/assets',
})
handsfree.enablePlugins('browser')
handsfree.start()

Handsfree.js 还允许开发者通过 handsfree.use(pluginName,callback) 创建各种插件,比如:

// A plugin that console logs your data on every frame
handsfree.use('consoleLogger', (data) => {
  console.log(data.weboji.rotation, data.pose.data.faceLandmarks)
})

以上代码将创建一个新插件,然后可以使用

handsfree.plugin.consoleLogger 访问该插件,并将在每一帧上运行。回调存储在 handsfree.plugin.consoleLogger.onFrame 中,可以使用以下命令切换插件可用状态:

handsfree.plugin.consoleLogger.enable()
handsfree.plugin.consoleLogger.disable()

更多关于 Handsfree.js 的用法和原理可以参考Handsfree.js官网说明。

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

DOVE 网络加速器免费试用

顶部