油猴+手势识别：我实现了任意网页隔空控制！ 点击关注公众号，“技术干货” 及时达！引言有些人学习后就私下问我，「油猴既然能将任意前端 js 注入到当前网页中」，是否能结合手势识别实现任意网页隔空控制，实现类似手机上的隔空翻页功能呢？ 这是个非常好的想法，于是，我经过研究，将它实现出来了！先看看脚本效果： 1??「上下翻页功能」 左手张开，右手可以控制网页向下翻页左手握拳，右手可以控制网页向上翻页2??「右手可以控制一个模拟光标移动」 3??「右手握拳，实现点击效果」 当然，还预设了很多手势，比如双手比???关闭当前网页，左手竖起大拇指，右手实现缩放网页等效果。 实现原理其实实现原理非常简单，就是「油猴」+「手势识别」 油猴 Tampermonkey油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来「增强、修改或自动化网页行为」。 通俗地说，借助油猴，你可以将自己的 JavaScript 代码 “植入” 任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种 “开挂级” 功能，彻底掌控页面行为。 如果你想深入了解，可以参考文章：juejin.cn/book/751468…[1] 手势识别 MediaPipe手势识别其实已经不是一个新鲜词了，随着大模型的普及，AI 识别手势非常简单方便。本示例中使用的 AI 模型识别，主要依赖了谷歌的 MediaPipe。 MediaPipe 解决方案提供了一套库和工具，可帮助您快速在应用中应用人工智能 (AI) 和机器学习 (ML) 技术。 本示例中的 demo 就是借助它的手势识别能力实现的。在 web 中，我们可以借助 MediaPipe@mediapipe/tasks-visionNPM[2]软件包获取手势识别器代码。 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 } // 握拳手势 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 } // 胜利手势 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 上，我们可以找到使用说明 这个包人脸识别、手势识别等非常多的功能，非常强大！ 如果你对油猴脚本感兴趣，可以看看教程《油猴脚本实战指南[3]》本示例中的 demo 也会在这个教程中详细讲解。 AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文