文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端实现人类动作捕捉,怎么办?几十行代码轻松搞定!

2024-12-13 14:32

关注

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

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

01:什么是 HandtrackJS

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

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

图片

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

图片

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

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

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

html 部分


 

在上面代码中,核心有两个标签:

  1. video:它的主要作用是开启一个视频流,用来捕获摄像头图像的。但是真正的展示并不是通过它来做,所以这里直接 display: none 隐藏即可
  2. 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()
})

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

图片

来源:程序员Sunday内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯