image
当电视上出现上图这种科技大片的时候，有没有幻想过有一天可以实现上图的这种交互，当我打开Handsfree这个库的介绍页时，看到前端页面竟然能够识别人的手势，面部以及各种肢体动作，简直刷新了我对前端能力的认知。确信这种交互有一天成为可能。
image
计算机视觉加上AI这几年早已经不是什么新鲜的名词，随着GPU算力的不断提升，使得越来越多（小）的设备上实现人工智能成为可能。
国外的一个开发者制作了一个实现Handsfree各种效果的demo页面（https://handsfree.js.org/），并且制定了开发计划，详细的进度将在作者的twitter上实时公布。看下这个计划：
创建一个易于使用的通过面部，手，眼睛，姿势跟踪，声音和思想控制程序的库。
然后使用该库去创建自定义插件或者组件。
使用以上实现的这样一个仓库去帮助更多的人通过“用户脚本管理器”去实现浏览器插件。
然后培养实现一个围绕Handsfree的使用者和开发者的社区。
最后建立一个关于Handsfree的基金会促进实现更多优秀的创意。
下面看下Handsfree能够实现哪些有趣的功能：
触发交互事件
最近不久作者发布了名为Pincher的插件，可以实现24种以上的捏🤏的动作，包括三种状态，开始，保持，释放——分别用你的小拇指，无名指，中指，和食指去做捏的动作。它根据鼠标事件为模型模拟动作，然后通过类似于document.addEventListener()去监听。
image
在浏览器上滚动网页
这是根据作者实现的一个浏览器插件去帮助实现的滚动网页，它使用名为MediaPipe Hands模型去跟踪手势，下面的Gif展示的就是使用pinchScroll插件实现的效果，只需要加入很少的代码实现这样一个自定义的功能
image
创建多种辅助技术
下面是作者最喜欢的一个功能，使用了名为“Face Pointer”的插件，可以通过面部移动屏幕上的点去实现点击和滚动网页。
image
控制桌面游戏
使用人的面部和手去模拟鼠标去玩“Into the Breach”这款游戏。所有的这些都是通过“Face Pointer”和“Hand Pointer”插件，集成到Robot.js中触发原生的鼠标事件来轻松实现的。
image
image
创建自己的游戏
不仅仅可以使用它玩游戏，还可以创建自定义交互的游戏
image
image
image
控制无人机和机器人
当然它不仅能控制浏览器端和桌面端的软件，通过web socket接口可以和任何与你的电脑建立连接的设备，就像和这个很普通的机器人进行模拟动作。
image
image
音乐和艺术创作
这里除了一些作者即将发布的想法奇特的应用可以帮助制作一些迷幻的音乐，还有更多的创意想法等着更多的开发者去实现。另外作者正在开发的WebXR DevTools Chrome 插件以帮助在没有XR设备的情况下去开发WebXR应用。
image
image
开发指南
以上已经介绍了一些Handsfree能实现的功能，接下来介绍如何去使用它。不要担心一开始会有所迷惑，它就是大概的介绍。稍后会有更多的简短聚焦的教程放出。你可以从作者的代码仓库中/boilerplate/cdn.html找到样例。
Handsfree开发上手
更多请关注公众号“太空编程”查看
网友评论