20250706-油猴+手势识别：我实现了任意网页隔空控制！

原文摘要

引言

最近我的小册《油猴脚本实战指南》上线了，很多同学都很感兴趣。

有些人学习后就私下问我，油猴既然能将任意前端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，我会拉你进学习交流群，一起体验油猴脚本开发的魅力！

原文链接

进一步信息揣测

油猴脚本的隐蔽风险：虽然油猴可以注入任意JS代码，但部分网站会检测脚本注入行为（如银行/支付类网站），可能导致账号封禁或功能限制，需谨慎使用高风险操作。
手势识别的性能陷阱：MediaPipe等AI模型在低端设备或老旧浏览器上可能卡顿，实际应用需做性能降级方案（如降低识别帧率），否则用户体验极差。
隐私合规灰色地带：手势识别需调用摄像头权限，但油猴脚本通常未经应用商店审核，可能触发浏览器安全警告或被标记为恶意插件。
跨域限制的变通方法：油猴脚本若需访问第三方API（如自定义手势服务），需通过GM_xmlhttpRequest绕过同源策略，但部分网站会拦截此类请求。
手势库的隐藏成本：MediaPipe虽免费，但商用需遵守谷歌条款；自建手势识别服务（如TensorFlow.js）需额外训练模型，数据集和算力成本高昂。
浏览器兼容性内幕：油猴脚本在Firefox上对WebAssembly（MediaPipe依赖）的支持弱于Chrome，部分功能需额外polyfill。
手势误触发的防御机制：实际开发中需添加「手势锁定延迟」（如连续识别到3次相同手势才触发），否则日常动作易误操作页面。
商业化脚本的潜规则：文中推广的小册可能包含未公开的付费高级技巧（如绕过网站反爬机制），免费教程通常只展示基础功能。
MediaPipe的CDN隐患：直接引用jsdelivr的CDN可能因网络问题加载失败，生产环境应自托管WASM文件以避免依赖风险。
油猴更新机制的坑：脚本自动更新时若接口变更（如手势识别API版本升级），会导致旧版用户功能异常，需手动处理版本兼容。