三行代码实时追踪你的手,只要有浏览器就够了

2023-11-16

栗子 发自 凹非寺 
量子位 报道 | 公众号 QbitAI

640?wx_fmt=gif

“Are You OK?”

“O!K!”

人脸不管做了多么一言难尽的表情,五官也不太会四处乱跑。

手就不一样了,手势百媚千娇,镜头看到的画面就百媚千娇。

所以,AI怎么识别手呢?

640?wx_fmt=gif

一位叫做Victor Dibia的程序猿说,“三行代码”就能实时追踪你的手,只要有个浏览器

你还可以用手在屏幕上涂鸦,成为实至名归的灵魂画“手”:

640?wx_fmt=gif

Victor说,只要召唤出他的Handtrack.js库,模型便可以在网页上跑起来。

他还提供了线上Demo给大家玩耍。

十魔乱舞

进了Demo,按下开始检测的按钮,打开摄像头,就可以放飞自我了。

在下的手不甚优美,但还是忍不住乱舞了好一阵子。

640?wx_fmt=gif

手指自由挥舞,边框就敏捷地跟随。

除了随性活动手指之外,还尝试了一下狼人夜间的战术交流:

640?wx_fmt=gif

翻译一下:你,起跳预言家,给8号发个查杀。

(作为一个菜鸡玩家,通常夜里是轮不到我分配工作的,此处纯属借机过瘾。)

书归正传,手势频繁变换,AI依然紧追不舍

除了打叉叉的时候,只识别了一只手。也许是因为手的侧面朝着屏幕,面积小,不容易识别吧。

如果你伸了两只手,AI却画了三个边框,可以调整一下左边的滑动条:

640?wx_fmt=png

这是置信阈值 (Confidence Threshold) ,默认0.7,分值高于0.7就会认定是手,显示出边框;如果调高到0.8,那些得分0.7的疑似人手,就不会显示边框了。

除此之外,Demo也有涂鸦功能:

640?wx_fmt=png

鉴于在下绘画功力有限,略去动态展示,大家可以自己去画一波。

模型如何食用?

Handtrack.js库,是程序猿用TensorFlow.js搭起来的。

里面的模型是用Egohands数据集养成,4800张人手的图片,背景有室内也有户外。

640?wx_fmt=gif

有了它,就不用自己训练模型了。直接拿来用,方法有两种:

第一种方法是在脚本标签 (Script Tag) 里,填上它的URL:

1<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

把脚本标签添加到html页面之后,就可以用handTrack变量来引出这个库了:

1const img = document.getElementById('img');  
2handTrack.load().then(model => { 
3    model.detect(img).then(predictions => {
4      console.log('Predictions: ', predictions) // bbox predictions
5    });
6});

上面这几句代码,是给手加了边框。只要提交每一帧视频,就可以追踪里面的手了,不论是摄像头实时拍摄的,还是已经拍好的视频。

第二种方法,是把这个库当做一个NPM包来安装:

1npm install --save handtrackjs

然后,从NPM导入就可以了。

Victor说,大家可以用这个方法,来开发自己喜欢的应用。比如,做个游戏:

640?wx_fmt=gif

One More Thing

这个模型是训练好了。

但Victor说,也不是不让大家训练。

还说,想自己养成一只实时手部追踪模型的同学们,可以参照这个项目 (600星) :
https://github.com/victordibia/handtracking

最后,送你Handtrack.js库的源代码:
https://github.com/victordibia/handtrack.js

线上Demo传送门:
https://victordibia.github.io/handtrack.js/

Egohands数据集:
http://vision.soic.indiana.edu/projects/egohands/

订阅AI内参,获取AI行业资讯

640?wx_fmt=jpeg

购买AI书籍

640?wx_fmt=jpeg

诚挚招聘

量子位正在招募编辑/记者,工作地点在北京中关村。期待有才气、有热情的同学加入我们!相关细节,请在量子位公众号(QbitAI)对话界面,回复“招聘”两个字。

640?wx_fmt=jpeg

量子位 QbitAI · 头条号签约作者

վ'ᴗ' ի 追踪AI技术和产品新动态

喜欢就点「好看」吧 !

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

三行代码实时追踪你的手,只要有浏览器就够了 的相关文章

  • Java面向对象进阶&继承

    1 继承 1 1 继承的实现 继承的概念 继承是面向对象三大特征之一 可以使得子类具有父类的属性和方法 还可以在子类中重新定义 以及追加属性和方法 实现继承的格式 继承通过extends实现 格式 class 子类 extends 父类 举
  • 水仙花数(Java语言)——最基础全面的讲解

    题目 判读一个整数是否是水仙花数 所谓水仙花数是一个三位数 其各个位上数字立方和等于它本身 例如 153 1 1 1 3 3 3 5 5 5 首先进行思路分析 1 首先要得到此数百位 十位 个位上的数字 然后用 if 判断他们的立方和是否相
  • 数据库锁表?别慌,本文教你如何解决

    引言 作为开发人员 我们经常会和数据库打交道 当我们对数据库进行修改操作的时候 例如添加字段 更新记录等 没有正确评估该表在这一时刻的使用频率 直接进行修改 致使修改操作长时间无法响应 造成锁表 在 mysql 中 如果出现 alter 操
  • flink中AggregateFunction 执行步骤以及含义全网详细解释

    package operator import org apache flink api common functions AggregateFunction import org apache flink api common funct
  • 我对 Kubernetes 的片面理解 —— 基础篇(持续更新中)

    Kubernetes 为何让我如此着迷 Kubernetes 的高矮胖瘦 介绍 Kubernetes 功能 Kubernetes 边界 声明式的配置 创建 Deployment 更新 Deployment 回滚 Deployment Kub
  • Python 3.9.0 已经可以下载了,但不支持win7和更低的系统版本!

    python3 9 0最近在官网可以下载了 而3 10 0a1已经开始测试了 根据python官网的说法 python3 9 0将不再支持win7或者win7以前的系统 下载来试了一下 win7果然不支持了 安装时报错 3 9的一些新功能
  • MongoDb随笔,PyMongo简单使用

    安装MongoDb 更新2021 07 06 https www mongodb com try download community 下载对应系统的软件版本 CentOS7 9 mongod 4 4 6 rpm ivh mongodb o
  • VSCode:Remote-SSH配置实录

    转自 VSCode Remote SSH配置实录 六天 CSDN博客 也可以通过这样一步步输入用户名和密码链接 为什么要使用VSCode Remote SSH 服务器很多时候都是部署在Linux远程机器上的 我们通常是SSH连过去然后用vi
  • JDBC——BasicDAO

    为什么要有 BasicDAO apache dbutils Druid 简化了 JDBC 开发 但还有不足 SQL语句是固定 不能通过参数传入 通用性不好 需要进行改进 更方便执行增删改查 对于 select 操作 如果有返回值 返回类型不
  • Putty配色方案(转)

    平时用Putty的频率相对挺高的 每次装完系统或是怎么的都得重新配色 还得百度去找配色表 每次太麻烦了 特地转载一篇好看的配色表供以后长期使用 以下内容为转载内容 使用的是修改注册表的方法 1 打开注册表 运行 regedit 2 找到对应
  • matlab仿真实例100题_输入-输出反馈线性化(Feedback linearization)控制算法Matlab仿真实例...

    反馈线性化 Feedback linearization 可能是大部分人接触非线性控制之后学习的第一种控制方法 个人认为主要优点有两点 一 它的理解和实现都相对简单 二 它能让非线性系统的转换为线性系统 这样接下来 就可以直接套用线性系统中
  • SQLEXPRESS服务无法启动

    一 软件版本 SQL Sever2014 localdb MSSQLLocalDB SQLServer13 0 VS2015 二 问题描述 由于使用web API中的odata编程 在工程中使用的是 localdb MSSQLLocalDB
  • Lintcode 464. 整数排序 II 冒泡排序三种实现 直接插入排序 直接选择排序 java

    一 冒泡排序 实现思路 https blog csdn net morewindows article details 6657829 Lintcode https www lintcode com problem sort integer
  • Ubuntu下安装及卸载JDK

    安装 1 添加 PPA repository 到系统 sudo add apt repository ppa webupd8team java 2 更新 sudo apt get update 3 下载安装 JDK sudo apt get
  • 算法专题之二叉树

    前言 树型数据结构广泛存在于现实世界中 比如家族族谱 企业职能架构等 它是一类在计算机领域被广泛应用的非线性数据结构 二叉树是树型数据中最常用的一类 本文从前端角度以js语法构建和操作二叉树的相关知识 基础概念 观察上图 二叉树的数据结构如
  • C++——大数加法

    大数加法 即运算的数据可能很大 int long long long无法存放 存在字符串中 但是加法的运算规则还是10进制 对于两个字符串 首先判断两者的长度 我们将字符串s设置为较长的字符串 方便后面的运算 也可以将t设置为较长的 从低位
  • 一文2000字详细介绍Android APP 常见概念与 adb 命令

    01 背景 因 team 正在推进 APP 自动化测试 那么主要业务是 IoT 相关的产品 既然是 APP 自动化测试 那么 Android APP 相关的一些概念与知识就很关键了 在之前遇到相关的问题都是现查现用 对于一些常用的概念和命令
  • 【Redis】常见数据结构及命令

    Redis常见命令 Redis数据结构介绍 Redis是一个key value的数据库 key一般是String类型 但是value的类型有很多种 Redis 通用命令 通用指令是部分数据类型的 都可以使用的指令 常见的有 KEYS 查看符
  • C++实现英语词典

    需要的东西 1 一个词典的txt文件 2 创建map容器 map
  • 最小二乘支持向量机”在学习偏微分方程 (PDE) 解方面的应用(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 本代码说明了 最小二乘支持向量机 在学习偏

随机推荐

  • 多媒体(视频容量计算)-软件设计(四十二)

    真题详解 有向图 软件设计 四十一 https blog csdn net ke1ying article details 129942490 一 音频概念 声音带宽 人耳 20Hz 20KHz 说话300 3400Hz 小于20Hz次声波
  • 上海链节科技:什么是企业链改?

    如何定义链改 链改 即用区块链中的部分技术原理和机制来改造业务系统中特定的部分 以创造更高效 更有公信力的系统 甚至还包括利用区块链上的各类积分 Token通证 来重新分配业务系统进而间接的改进业务系统背后的生产关系 传统基本结构的公司 通
  • 从IDataReaderHelper中读取数据实体

    using System using System Collections Generic using System Linq using System Text using System Data using System Reflect
  • 截取oracle字符串中的数字(转载)

    截取oracle字符串中的数字 云淡风轻博客 博客园 cnblogs com 方法一 如果Oracle版本不是太低的话 使用 正则表达式函数 REGEXP SUBSTR 处理 REGEXP SUBSTR有5个参数 分别是 第一个是输入的字符
  • GMAPPING的参数设置

    二 运行gmapping 我总结了运行gmapping的两种方法 1 基于命令行 rosrun gmapping slam gmapping scan scan delta 0 1 maxUrange 4 99 xmin 5 0 ymin
  • python必背代码-Python高手必修课:如何让 Python 代码更易读,推荐收藏

    阅读本文大概需要 10 分钟 我们知道 Python 是一种动态语言 在声明一个变量时我们不需要显式地声明它的类型 例如下面的例子 a 2 print 1 a 1 a 运行结果 1 a 3 这里我们首先声明了一个变量 a 并将其赋值为了 2
  • 【深入理解C++】string

    文章目录 1 概述 2 string的定义与初始化 3 string的赋值 4 string的读写 5 string的长度 6 string的遍历 6 1 运算符 6 2 at 6 3 迭代器 6 4 范围for 7 string 与 ch
  • Excel开发(VBA)— 快速定位最后有记录的行

    有时候 在进行Excel开发时 需要知道某列的最后一行的行号 Excel也提供了相关功能 Range End属性 Dim strCell As String Dim nLastUseRow As Long Dim nLastRcdRow A
  • Vue深入响应性原理

    深入响应性原理 参考资料 响应性 深入响应性原理 什么是响应性 Vue如何知道哪些代码在执行 Vue如何跟踪变化 被代理的对象 Proxy vs 原始标识 如何让渲染响应变化 响应性基础 声明响应式状态 创建独立的响应式值作为refs Re
  • 数据挖掘之关联分析(实验展示以及源代码)

    数据挖掘之关联分析 算法实现 Apriori算法和FP growth 算法 源代码 简单描述下 关联分析概念 关联分析概念主要参考下面的博文 原文 https blog csdn net qq 40587575 article detail
  • idea如何设置自动换行(亲测)

    方法 步骤 第一步 点击idea中的file 然后点击setting 第二步 在编辑中选择代码风格 然后点击java 第三步 在如图所示的栏目中点击Ensure 开头的选项 第四步 选择好以后直接点击apply应用 使其生效 第五步 返回代
  • Python界面 可视化开发(python3+PyQt5+Qt Designer)

    前言 以前制作一个Python窗体界面 我都是用GUI窗口视窗设计的模块Tkinter一点一点敲出来的 今天朋友问我有没有Python窗体的设计工具 用鼠标拖拖 就能完成窗体设计 我查了查相关资料 果然有一款好用的工具 Qt Designe
  • Q3.Numpy_统计分析-排序、去重和重复、搜索和计数函数

    Part 1 排序函数 numpy排序方式主要分为直接排序和间接排序两种 直接排序是指对数值直接进行排序 间接排序是指根据一个或多个键对数据集进行排序 在numpy中 直接排序常用sort 函数 间接排序常用argsort 函数和lexso
  • 官方YOLOV5的torch模型->ONNX模型->RKNN模型

    1 环境配置 1 1 RKNN Toolkit2的环境配置 下载RKNN Toolkit2 git clone https github com rockchip linux rknn toolkit2 git 打开一个终端命令行窗口 安装
  • C++primer(第五版)---14章(重载运算与类型转换)

    目录 编辑 重载运算符的基本概念 调用重载运算符 而有些运算符不应该被重载 应该保持与内置类型一致的含义 是否成员成员函数 重载io lt lt 和 gt gt 运算符 重载 lt lt 运算符 重载 gt gt 运算符 算术运算符 关系运
  • python英文(无空格)文本分词模块wordninja使用

    在NLP中 数据清洗与分词往往是很多工作开始的第一步 大多数工作中只有中文语料数据需要进行分词 现有的分词工具也已经有了很多了 这里就不再多介绍了 英文语料由于其本身存在空格符所以无需跟中文语料同样处理 如果英文数据中没有了空格 那么应该怎
  • react在移动端的自适应布局

    1 移动端基本可以无阻碍的进行flex的弹性布局 这边对flex就不进行深究 2 可以进行依据窗口进行vw vh vmin vmax单位的布局 1 vw vh vmin vmax 是一种视窗单位 也是相对单位 它相对的不是父节点或者页面的根
  • Android USB Camera(1) : 调试记录

    1 前言 前段时间调试了一个uvc摄像头 这里做下记录 硬件平台为mt6735 软件平台为android 5 0 2 底层配置 UVC全称是usb video class 一种usb视频规范 所有遵循uvc协议的摄像头都不需要安装额外的驱动
  • integer conversion resulted in a change of sign

    Type 69 D integer conversion resulted in a change of sign MDK 出现 68 D integer conversion resulted in a change of sign 在K
  • 三行代码实时追踪你的手,只要有浏览器就够了

    栗子 发自 凹非寺 量子位 报道 公众号 QbitAI Are You OK O K 人脸不管做了多么一言难尽的表情 五官也不太会四处乱跑 手就不一样了 手势百媚千娇 镜头看到的画面就百媚千娇 所以 AI怎么识别手呢 一位叫做Victor