Blog

Blog

PHODAL

Node.js Leap Motion Hello World——开启AR的小窗

Leap Motion的官方已经有一个名为LeapJS的库,但是官方没有做好一个Node.js的Demo,有的都是Client Side的一些示例。

在最开始的时候给我造成了极大的困惑,我以为启动Leap Motion的应用就可以直接运行官方的Demo——在这个应用里会运行WebSocket的Server。

Leap Motion Node.js 服务端

这时候,我们需要一个简单的服务端代码来启动这个WebSocket Server。按照官方的node包,则是setupConnectionEvents

首先,我们需要先初始化一个controller:

var leapjs = require('leapjs'),
      controller = new leapjs.Controller({
        frameEventName: 'animationFrame'
     });

然后就是在启动和断开的时候打个Log

controller.on('connect', function (data) {
  console.log("Successfully connected.");
});

controller.on('streamingStarted', function (data) {
  console.log("A Leap device has been connected.");
});

controller.on('streamingStopped', function (data) {
  console.log("A Leap device has been disconnected.");
});

接着,就可以连接了:

controller.connect();

最后,我们就可以在浏览器上访问这个WebSocket Server了。

Leap Motion 浏览器访问

Leap Motion提供了leapjs,用于浏览器访问。如其源码所示,默认的端口是6437:

BaseConnection.prototype.getUrl = function() {
  return this.scheme + "//" + this.host + ":" + this.port + "/v" + this.opts.requestProtocolVersion + ".json";
}

BaseConnection.prototype.getScheme = function(){
  return 'ws:'
}

BaseConnection.prototype.getPort = function(){
  return 6437
}

接着,我们所需要做的就是创建一个web app。然后,先用官方的Demo:

Leap.loop({

  hand: function(hand){
    console.log( hand.screenPosition() );
  }

}).use('screenPosition');

然后,启动Server,刷新浏览器,在Leap Motion上面动动,就会有下面的结果:

[-65.61160000000001, 160.66859999999997, 72.7992]
[-165.05679999999995, 172.716, 83.8854]
[-222.02319999999997, 157.9176, 83.9886]
[-270.48220000000003, 164.90820000000002, 86.7462]
[-319.08939999999996, 189.69539999999995, 86.4468]
[-347.6512, 236.19600000000003, 76.0038]
[-407.668, 261.657, 72.2484]

现在,我们就可以连接更多的东西~~。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签