跳到主要内容

Kinect到网络浏览器

这篇文章首次出现在问题240.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

微软Xbox Kinect是第一款进入大众市场的3D运动传感设备。一旦它上架,互联网就充斥着黑客将它连接到电脑上。我找到的第一个JavaScript库,以Web开发人员可以利用的方式从动作感应设备中公开数据DepthJS。 DepthJS由麻省理工学院(MIT)的团队制作,允许浏览器以与触摸屏设备注册触摸开始和触发事件相同的方式响应预定义的手势作为浏览器事件。

近年来,浏览器中运动感知开发的机会有所增加。对于任何热衷于利用Web开发中的新变化的人来说,这都是一个令人兴奋的领域。有一系列令人眼花缭乱的软件选择,因此从一开始就了解您的要求非常重要。不同的设备提供不同的交互范例,并且还可以选择将Kinect绑定到浏览器中的库。

入门

首先,您想要决定您正在制作什么样的应用程序。我认为运动传感应用主要分为两个独立的阵营:需要在3D空间中进行手部或身体检测的应用程序(如在线游戏)和手势控制的网站,其中手势用于映射到标准网站交互(例如用户滚动页面,单击链接或滑动轮播)。后者非常适合用户远程浏览,例如在艺术画廊或博物馆中。有关手势控制的Web应用程序的精彩示例看看这个项目由东南宾夕法尼亚州交通管理局创建,允许用户从仓库内浏览公交车时刻表。

Demonstrating our prototype of mapping the hand movements to a 3D object modelled using the canvas element

演示我们将手部动作映射到使用canvas元素建模的3D对象的原型

要开始使用动作感应Web开发,您基本上需要三件事:硬件设备,读取传入USB的数据的软件驱动程序,以及将数据转换为JavaScript可以设置事件监听器的浏览器插件。 。

Kinect本身有两种不同的风格:Xbox Kinect和Kinect for Windows。 Kinect for Windows具有近场检测功能,可以在距设备40厘米处进行手指和手势检测。另一方面,Xbox Kinect要求用户距离设备至少三到四英尺。显然,这会对您可能正在构建的应用程序类型产生影响。需要全身检测的游戏非常适合Xbox Kinect。但是,只有使用Kinect for Windows设备才能实现需要精确手势识别的网站 - 这需要付出代价。它的价格高达160英镑,几乎是其Xbox版本的两倍。

硬件的其他选项包括PrimeSense自己的Asus Xtion设备(PrimeSense是帮助微软开发Kinect的公司)以及最近宣布的Leap Motion控制器,该控制器仅用于手部和手指手势检测以及近场交互。您选择的中间件很大程度上取决于您使用的操作系统。这也可能决定了你如何轻松地启动和运行它。

如果您使用的是Windows,则可以使用自己的自定义驱动程序和SDK。这绝对是最简单的安装选项。开源驱动程序有两种选择:由Open Kinect社区开发的Libfreenect和由PrimeSense开发的OpenNI。这些都支持Xbox Kinect。显然,对于Kinect for Windows设备的OpenNI支持在Mac / Linux上表现不佳,而Libfreenect需要修补版本的库才能进行近场检测。简而言之,如果你想要近场模式,你可能现在更喜欢坚持使用Windows驱动程序。

安装OpenNI库非常简单。下载提供了一个脚本,您可以从命令行运行该脚本。有关安装Libfreenect的全面说明,您希望自己进入Open Kinect站点阅读入门指南。由于这是实验性技术,因此没有软件安装程序图标可以双击。这是(卷起袖子)从源安装编译。作为一名前端开发人员,这有点超出了我的舒适区域,因为我用Google搜索了“cMake错误消息”并反复重新安装了软件包,导致超过20个小时的牙齿尴尬。

Kinect prototype application maps the position of user’s hand in 3D space to a 3D object in the browser

Kinect原型应用程序将用户手在3D空间中的位置映射到浏览器中的3D对象

如果你正在使用Linux,你可能熟悉apt-get,这可能不会给你带来很多问题。如果您正在使用Mac OS X,那么您需要一个软件包安装程序,其中两个领先者是MacPorts和Homebrew。 Homebrew看起来更加用户友好,但如果您使用其他人的公式来安装具有多个依赖项的软件包,则您无法真正控制正在安装的软件包。最后我最终选择了MacPorts。有一次我不得不删除一个包并安装一个早期版本来解决冲突依赖项的问题。这是通过Homebrew安装无法实现的。

您选择的浏览器插件很可能取决于您要创建的应用程序类型和所选的技术堆栈。您目前有以下选项:DepthJS,Kinected Browser,Kinesis.io和Zigfu。

浏览器插件

DepthJS依赖于OpenNI驱动程序,但它也将Libfreenect规定为依赖项,因此我最终安装了两者。 DepthJS插件目前仅在WebKit上运行,但预计会支持Firefox。

如果您选择使用Kinect for Windows SDK和驱动程序,那么Microsoft研究团队已经开发了自己的Kinected浏览器ActiveX插件。可悲的是,它只能在Windows 7+和Internet Explorer 9+上运行,这有点令人失望。

另一种选择是Kinesis.io,它也运行Kinect for Windows驱动程序,为您提供近场开发选项。 Kinesis.io表示它支持所有主流浏览器,但安装要求将Windows 7规定为操作系统。

在所有选项中,Zigfu拥有最大的浏览器和平台支持。您可以使用Kinect for Windows驱动程序或开源OpenNI替代方案。 Zigfu API主要用于跟踪可见用户和骨架关节以进行全身检测,以及为游戏内导航提供交互小部件。

Provided with Libfreenect, GLview tests if the device is returning depth and camera information

随着Libfreenect提供,GLview测试设备是否返回深度和相机信息

在原型设计的早期阶段,我遇到了很多问题。在开发工作流程中,您无法从硬件访问任何调试信息。有时很难确定我收到的错误是由于环境因素造成的,例如照明,位置或布线,影响红外线的阳光水平,Kinect设备故障或纯粹基于错误实施的代码的问题。

尽管如此,当我最终创建一个映射到浏览器中的3D环境的对象与我的空间同步移动时,我感受到了巨大的成就。通过试验和错误的单独安装困境和盲目调试是值得的。

我很高兴看到其他人将使用这项技术创造出来,并最终看到这些网络应用程序在野外 - 所以得到制作!

发现20种巧妙且鼓舞人心的网站导航方法Creative Bloq



翻译字数超限