当前位置：首页 > 科技 > 软件

前端实现人类动作捕捉，怎么办？几十行代码轻松搞定！

来源：责编：时间：2024-06-12 17:25:22 77观看

导读Hello，大家好，我是 Sunday。昨天有个同学问我：“Sunday 老师，我们公司要做一个动作捕捉的功能，竟然要前端去做！这玩意前端弄不了吧？”这样的功能，如果完全从 0 去写，自然是非常复杂，但是目前早已有了对应的实现类库，它就是 Handt

Hello，大家好，我是 Sunday。

昨天有个同学问我：“Sunday 老师，我们公司要做一个动作捕捉的功能，竟然要前端去做！这玩意前端弄不了吧？”

这样的功能，如果完全从 0 去写，自然是非常复杂，但是目前早已有了对应的实现类库，它就是 HandtrackJS！基于它，我们可以很轻松的实现对应的功能！

01：什么是 HandtrackJS

HandtrackJS 是一个基于 JavaScript 的开源库，用于实时手部检测和手势识别。它利用了机器学习模型来检测手的位置和姿势，使得开发者可以在网页和其他 JavaScript 环境中轻松地实现手势控制和交互功能。

HandtrackJS 提供了对应的案例，我们可以一起来看下对应的效果：

图片

根据示例 DEMO 我们可以发现，利用 HandtrackJS 可以直接捕获到人像与手势，同时还可以根据不同的手势进行识别，如下图所示：

图片

整个手势的状态被识别并分为了：open、pinch、closed 三种不同的状态

02：实现一个动作捕捉功能

整个 HandtrackJS 使用也非常方便，根据官方文档所示，我们可以分别通过 npm 或 cdn 的形式直接进行安装，这里为了方便，直接通过 cdn 的形式引入：

html 部分

<body class="bx--body p20"> <div class="mb10">  <button   id="trackbutton"   class="bx--btn bx--btn--secondary"   type="button"   disabled  >   点击启动  </button> </div> <!-- 捕捉和展示实时视频流 --> <video  class="videobox canvasbox"  autoplay="autoplay"  id="myvideo"  style="display: none" ></video> <!-- 视频流渲染到 canvas 之中 --> <canvas id="canvas" class="border canvasbox"></canvas> <!-- cdn 引入 handtrack --> <script src="lib/handtrack.min.js"></script> <script src="js/index.js"></script></body>

在上面代码中，核心有两个标签：

video：它的主要作用是开启一个视频流，用来捕获摄像头图像的。但是真正的展示并不是通过它来做，所以这里直接 display: none 隐藏即可
canvas：这是真正用来展示捕获内容的界面

JS 部分

搞定了 html 之后，接下来我们来处理 js 的内容

1：利用 handTrack 加载模型

handTrack 是 HandtrackJS 的核心类，可以利用它的 load 方法加载配置、模型：

let model = null // 存储加载的模型let trackButton = document.getElementById('trackbutton') // 获取按钮元素// 模型参数配置const modelParams = { maxNumBoxes: 20, // 最大检测框数量 iouThreshold: 0.5, // IOU阈值 scoreThreshold: 0.6 // 分数阈值}// 加载模型handTrack.load(modelParams).then((lmodel) => { model = lmodel // 保存加载的模型 trackButton.disabled = false // 启用按钮})

2：按钮按下，开启视频捕捉

监听 trackButton 按钮的点击行为，利用 video 开启摄像头

// 获取HTML中的video和canvas元素const video = document.getElementById('myvideo')const canvas = document.getElementById('canvas')const context = canvas.getContext('2d') // 获取canvas的2D绘图上下文let isVideo = false // 标记视频是否正在播放// 开始视频捕捉function startVideo() { handTrack.startVideo(video).then(function (status) {  if (status) {   // 如果视频启动成功   isVideo = true // 设置视频状态为正在播放   runDetection() // 开始检测  } else {   // 视频启动失败处理（未实现）  } })}// 运行检测function runDetection() { model.detect(video).then((predictions) => {  model.renderPredictions(predictions, canvas, context, video) // 在canvas上绘制检测结果  if (isVideo) {   requestAnimationFrame(runDetection) // 如果视频正在播放，继续检测  } })}// 切换视频播放状态function toggleVideo() { if (!isVideo) {  startVideo() // 如果视频未播放，则启动视频 } else {  handTrack.stopVideo(video) // 停止视频  isVideo = false // 设置视频状态为未播放 }}// 按钮点击事件监听，点击按钮时切换视频状态trackButton.addEventListener('click', function () { toggleVideo()})

至此整个的检测就已经全部完成了，是不是还是挺简单的。咱们来看看效果！

图片

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-93347-0.html前端实现人类动作捕捉，怎么办？几十行代码轻松搞定！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：日本 Rapidus 宣布将同 IBM 开发 2nm 制程芯粒封装量产技术

下一篇： Python 常量使用的五个优秀实践

标签：

热门焦点

官方承诺：K60至尊版将会首批升级MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版将会搭载天玑9200+处理器和独显芯片X7的同时，Redmi给出了官方承诺，K60至尊重大更新首批升级，会首批推送MIUI 15。也就是说虽然
天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的

这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
三言两语说透设计模式的艺术-单例模式

写在前面单例模式是一种常用的软件设计模式，它所创建的对象只有一个实例，且该实例易于被外界访问。单例对象由于只有一个实例，所以它可以方便地被系统中的其他对象共享，从而减少
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
10天营收超1亿美元，《星铁》比《原神》差在哪？

来源：伯虎财经作者：陈平安即便你没玩过《原神》，你一定听说过的它的大名。恨它的人把《原神》开服那天称作是中国游戏史上最黑暗的一天，有粉丝因为索尼在PS平台上线《原神》，怒而
品牌洞察丨服务本地，美团直播成效几何？

来源：17PR7月11日，美团App首页推荐位出现“美团直播”的固定入口。在直播聚合页面，外卖“神枪手”直播间、美团旅行直播间、美团买菜直播间等均已上线，同时
与兆芯合作联想推出全新旗舰版笔记本电脑开天N7系列

联想与兆芯合作推出全新联想旗舰版笔记本电脑开天 N7系列。这个系列采用兆芯KX-6640MA处理器平台，KX-6640MA 处理器是采用了陆家嘴架构，16nm 工艺，4 核 4 线
利用职权私自解除被封帐号 Meta开除20多名员工

11月18日消息，据外媒援引知情人士表示，过去一年时间内，Facebook母公司Meta解雇或处罚了20多名员工以及合同工，指控这些人通过内部系统以不当方式重置用户帐号，其