油猴+手势识别:我实现了任意网页隔空控制!
引言
最近我的小册《油猴脚本实战指南》上线了,很多同学都很感兴趣。
有些人学习后就私下问我,油猴既然能将任意前端js注入到当前网页中,是否能结合手势识别实现任意网页隔空控制,实现类似手机上的隔空翻页功能呢?
这是个非常好的想法,于是,我经过研究,将它实现出来了!先看看脚本效果:
1️⃣ 上下翻页功能
- 左手张开,右手可以控制网页向下翻页
- 左手握拳,右手可以控制网页向上翻页
2️⃣ 右手可以控制一个模拟光标移动
3️⃣ 右手握拳,实现点击效果
当然,还预设了很多手势,比如双手比✌🏻关闭当前网页,左手竖起大拇指,右手实现缩放网页等效果。
实现原理
其实实现原理非常简单,就是油猴+手势识别
油猴Tampermonkey
油猴(Tampermonkey)是一款浏览器插件,允许用户在网页加载时注入自定义的 JavaScript 脚本,来增强、修改或自动化网页行为。
通俗地说,借助油猴,你可以将自己的 JavaScript 代码“植入”任意网页,实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能,彻底掌控页面行为。
如果你想深入了解,可以参考文章:juejin.cn/book/751468…
手势识别MediaPipe
手势识别其实已经不是一个新鲜词了,随着大模型的普及,AI识别手势非常简单方便。本示例中使用的AI模型识别,主要依赖了谷歌的MediaPipe。
MediaPipe 解决方案提供了一套库和工具,可帮助您快速在应用中应用人工智能 (AI) 和机器学习 (ML) 技术。
本示例中的demo就是借助它的手势识别能力实现的。在web中,我们可以借助MediaPipe @mediapipe/tasks-vision
NPM 软件包获取手势识别器代码。
MediaPipe @mediapipe/tasks-vision
它的使用也非常简单
// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
},
numHands: 2
});
如何将两者结合
借助油猴的脚本注入能力,我们能让我们的手势识别代码运行在任意网页,从而轻松实现隔空手势控制效果。
当然,脚本运行时必须开启摄像机权限,页面其实会有一个画面,但是很尴尬,于是实际脚本中,我将画面隐藏了。
手势识别的原理其实也不复杂,通过tasks-vision,我们可以拿到上图中各个关键的点的位置信息,通过判断不同点位之间的距离,实现不同的手势判断。
// 判定手势
// 手掌张开手势
function isHandOpen(hand) {
const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];
return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) > 0.1).length >= 4;
}
// 握拳手势
function isFist(hand) {
const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];
return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) < 0.06).length >= 3;
}
// 胜利手势
function isVictory(hand) {
const extended = [8, 12];
const folded = [16, 20];
return (
extended.every((i) => dist(hand[i], hand[i - 3]) > 0.1) &&
folded.every((i) => dist(hand[i], hand[i - 3]) < 0.05)
);
}
上述代码中的hand就是mediapipe/tasks-vision
返回的手势信息。结合这些自定义的手势信息,我们就能实现各种花里胡哨的功能!
进一步学习
对于手势识别的学习,我们可以去学习官方的demo,在npmjs上,我们可以找到使用说明
这个包人脸识别、手势识别等非常多的功能,非常强大!
如果你对油猴脚本感兴趣,可以看看教程 《 油猴脚本实战指南 》, 本示例中的demo也会在这个教程中详细讲解。
当然,你也可以加我
shc1139874527
,我会拉你进学习交流群,一起体验油猴脚本开发的魅力!
来源:juejin.cn/post/7521250468267360307