✋ W-Interface

手势操控任意网页

一行 <script> 引入,页面上立刻出现一个由手势驱动的虚拟鼠标 —— 移动、点击、拖拽、滚动、右键,对网页里本来就存在的元素派发标准事件。 纯浏览器端运行(MediaPipe / WASM),零侵入、零后端。

点击右下角「✋ 启用手势操控」,允许摄像头,按引导完成一次手势练习,然后在下面的演示区试试 👇

输入模式:

① 点击

拇指 + 食指捏合一下,点这些按钮。

点击次数:0 · 最近:

② 拖拽

捏住方块不放并移动手,松开放下(派发标准 pointer 事件,由本页自己响应)。

拖我

③ 滚动

张开手掌上下移动来滚动这个列表。

④ 右键

拇指 + 中指捏合,在这个区域触发右键菜单。

右键区域
尚未触发

⑤ 视线 + 眨眼(实验性)

切到上方「👁 视线 + 眨眼」模式:用注视移动光标(启动时请直视屏幕中心做一次基线校准),眨眼计数触发点击:

基于 MediaPipe FaceLandmarker 的注视估计为相对映射,精度有限;若方向相反可加 data-gaze-flip-x,或用 data-gaze-gain 调灵敏度。

把它加到你的网站

在任意页面 <head> 里加一行即可(默认手势模式):

<script src="https://w-interface.pages.dev/w-interface.min.js"></script>

视线 + 眨眼模式:

<script src="https://w-interface.pages.dev/w-interface.min.js" data-drivers="face"></script>

高级用法:window.WInterface.restartWith(['face']) 运行时切换、.on('press', fn) 订阅意图、 .resetTutorial() 重新学习;或通过 data-* 调参。