Read Leap data from guest VM on host machine using WebSockets

[travagta]

Ok, so I am trying to get the tracking data from my Leap Motion from inside a Virtual Machine and use the tracking data on my host machine.

Guest OS: Ubuntu, using VirtualBox
Host OS: Windows 8.1

I know that the Leap service creates a WebSocket server and sends out the information on localhost, port 6437.
My Leap motion is working properly in Ubuntu. I have been able to successfully use the visualizer inside the VM and run the Sample.html project that reads data from the Leap WebSocket server. However, the issue comes when I try to forward any of that data to my host machine so that it can be read/used.
I have tried using the NAT network type for the VM and then doing port forwarding from the localhost port 6437 on the guest machine to a wide variety of ports on the host machine. This didn't work.
I have also tried using the "Host-only Adapter"network option for VIrtualBox. This option assigns an IP addresses to the guest and host machines that can be used to communicate between the two (in my case, the guest IP was 192.168.56.101 and the host IP was 192.168.56.102). I'm able to ping the host from the guest and vice-versa using this configuration. However, the Leap service send the WebSocket tracking data to the localhost for the guest OS, and I haven't found a way to get this information to instead be sent to the host machine.

Anyone have any advice? Thanks in advance

[jdonald]

Not specific to a VM, but other developers have set up multi-machine configurations without port forwarding. You have to set the "websockets_allow_remote" flag in config.json and restart the service. This flag is opt-in for security reasons.

I think your network configuration is fine. On VMware Workstation I need to set bridge networking for a separate machine to talk directly to the guest, but if you only want the host to talk to the guest your network configuration is probably sufficient. Plus you say you're already able to ping the guest from the host.

[travagta]

Hey @jdonald,

Thanks for the reply. Im having issues finding this config.json file anywhere though; I'm currently using the Leap V2 beta.

[jdonald]

Should be under ~/.Leap Motion/config.json

I think the service might use /root/.Leap Motion/config.json

[travagta]

I couldn't find the /.Leap Motion/ folder in the root at all. I did manage to find a /Leap/ folder under /usr/share/Leap/ that contained the files app0.dat, app1.dat, app2.dat, trparams, ov580-0214.bin, and a README

[travagta]

actually, nevermind, just found the config file, about to try editing it

[travagta]

Ok, still no luck. Here's a rundown again of how things are set-up:

Host-only connection between the guest Ubuntu OS and the host Windows OS.
When I run ifconfig on Linux, I get this:

When I run ipconfig on Windows I get this:

I changed the config file in Linux so that it looks like this:

I changed the Leap config file in Windows so that it looks like this:

I am able to run Sample.html, the visualizer, and all of the other sample programs in the guest Ubuntu OS, which makes sense since this is where the Leap is running locally.

RUNNING SAMPLE.HTML ON WINDOWS

Now, when I try to access the tracking data from the Leap inside the host Windows OS, this is where I start running into issues.

I try and run the Sample.html WebSocket example. For this, it uses the Leap.js library, and its inside Leap.js where it establishes the WebSocket connection. So, I pulled down a copy of Leap.js (named "leap-0.6.1.js") and I have Sample.html use this javascript file instead.
Inside leap-0.6.1.js, I make changes at this location:

I change the value for host. I tried this with 192.168.56.101, 192.168.56.102, 192.168.56.1, and 192.168.56.255. I also tried this whole procedure using a bridged connection instead of a host only connection. None of these things worked. I'm stumped.

[travagta]

Ok, for anyone else who sees this, I managed to get it working. What ended up fixing the problem is that I turned off all the Firewalls for my host Windows 8 machine.
The networking type for the VirtualBox is set to host-only adapter. The ip address assigned to the guest for the host-only network (which can be found by typing ifconfig for the guest Ubuntu system) is 192.168.56.101. On the host machine, for the JSONViewer.html sample provided with the Leap SDK, I set the WebSocket to connect to 192.168.56.101 on port 6437.

ws = new WebSocket("ws://192.168.56.101:6437/v6.json");

Once this was set, the JSONViewer example worked as intended.

[jdonald]

Nice work.

As I was debugging this for you, I realized the alternative of using port forwarding (well, SSH tunneling) isn't too bad. From the host:

ssh -L 6437:localhost:6437 yourusername@192.168.56.101

This allows it to work without having to set websockets_allow_remote (as it's connecting to localhost) and the programs such as JSONViewer.html can keep reference to "localhost" when running on the host.

When debugging systems like this, a useful quick test is to telnet to port 6437 to see if it's accepting connections.

Anyway, glad you got the direct connection working!

[samanh]

How did you get the Leap controller to run inside the virtual machine? I have been trying to do this but my linux VM does not detect Leap. My USB connections are enabled since the VM can detect usb hard drives. Could you tell me how you got it to work? Thanks

[travagta]

Hmmm... what VM/operating system are you using? I've gotten it to work on both VMPlayer (which I prefer) and VirtualBox running Ubuntu

[shreeramanpr]

Hi
I have done everything as done by travagta. But I am still not able to read the tracking data of the guest into my host. I am able to ping the host from the guest and vice versa. I have disabled my firewall too. Is there some thing else I need to do?

Host PC -Windows 8
Guest PC- Linux Mint 17.2,xfce
VMM-Virtual Box

Other than this all the setting seem to be same.

Thanks in advance for the reply.

[shreeramanpr]

So I happned to find the solution to this issue I faced. The websocket server in mint was listening only at localhost :6437.
Hence the conncetion was not successful at 192.168.56.101:6437. So I did a port redirect in linux using xinetd as shown in the example in http://unix.stackexchange.com/questions/111433/iptables-redirect-outside-requests-to-127-0-0-1 . After this too it seemed to not work but restarting the systems seemed to do the magic.

[Quan-Le]

Hi Travagta,

I tried to use the host IP address instead of 'localhost', but it doesn't work fine.
Here is my configure file:

{
  "configuration": {
    "background_app_mode": 2,
    "images_mode": 0,
    "interaction_box_auto": true,
    "tracking_tool_enabled": false,
	"websockets_allow_remote": true,
	"websockets_enabled": true
  }
}

And here is how I connect to Leap Motion WebSocket:

// Create and open the socket
 ws = new WebSocket("ws://192.168.0.3:6437/v6.json");

I am trying with index.html example of LeapMotion WebSocket connection.
However, it still doesn't work.

Any suggestions?

Regards,
Quan.

[Joe_Ward]

You must shut down both the control panel app and the Leap service before editing the config.son file to be sure that your configuration changes are picked up properly. See Runtime Configuration for more detail.

[Quan-Le]

Hi Joe_Ward,

Thank you so much. I did it. I had to revert the changes and then modified the config.json file again.
By the way, could I ask you one more question?

I am trying with index.html sample of LeapMoion Websocket. I run the file in NetBeans IDE, with Tomcat 8.0. As I mentioned before, the websocket server is ws://192.168.0.3:6437/v6.json. When I run it, the web application will be started in local with domain: http://localhost:8080/index.html. So if I understand correctly about LeapMotion Websocket, the other computer can access to http://192.168.0.0.3:8080/index.html and see the changes as well?

Could you help me to explain it?
I would appreciate about that.

Regards,
Quan.

[Joe_Ward]

Any application that wants to connect to your Leap Motion web socket server must use ws://192.168.0.3:6437/v6.json (and be on the same network). The 8080 port is for your application server, not the web socket server.

[Quan-Le]

Hi Joe_Ward,

Thank you so much. Regarding to your suggestions, I can make directly connection from my mobile to WebSocket server on my computer. It works like a charm.

May I ask you one more question? I am newbie with WebSocket and some stuffs. According here, as I understand, leap.js library takes care about connection between clients and server, so we don't need to care about how server side works. Is that correct? Everything we need only simply make the WebSocket connection using JavaScript, then handle messages received from server.

Leap.js handles the WebSocket connection and conversion of JSON into regular objects for you.

However, I am still confused how we can import leap.js library into the application, since I couldn't figure out where you put leap.js library in index.html file, but it still works correctly.

Follow the Websocket architecture, leap.js is client library and it should be imported into the application, right?

Am I wrong? Could you help me to clear this?
Thank you so much!

Regards,
Quan.

[Joe_Ward]

leap.js is imported using standard html script tags. You can either access the file from our CDN over the Internet, which is best for public web pages, or you can download the file and host it along with the other files in your web application, which is best if your application should run without access to the public Internet.

[Quan-Le]

How can JSONViewer.html file can run well without html leap.js script tags or imported file?

<!DOCTYPE html>
<!------------------------------------------------------------------------------
| Copyright (C) 2012-2013 Leap Motion, Inc. All rights reserved.               |
| Leap Motion proprietary and confidential. Not for distribution.              |
| Use subject to the terms of the Leap Motion SDK Agreement available at       |
| https://developer.leapmotion.com/sdk_agreement, or another agreement         |
| between Leap Motion and you, your company or other organization.             |
------------------------------------------------------------------------------->
<html>
<head>
<title>Leap WebSocket JSON Viewer</title>
<script>
var ws;
var paused = false;
var pauseOnGesture = false;
var focusListener;
var blurListener;

// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
    (typeof(MozWebSocket) != 'undefined')) {
    WebSocket = MozWebSocket;
}

// Create the socket with event handlers
function init() {
    // Create and open the socket
    ws = new WebSocket("ws://localhost:6437/v6.json");

    // On successful connection
    ws.onopen = function(event) {
        var enableMessage = JSON.stringify({enableGestures: true});
        ws.send(enableMessage); // Enable gestures
        ws.send(JSON.stringify({focused: true})); // claim focus

        focusListener = window.addEventListener('focus', function(e) {
                               ws.send(JSON.stringify({focused: true})); // claim focus
                         });

        blurListener = window.addEventListener('blur', function(e) {
                               ws.send(JSON.stringify({focused: false})); // relinquish focus
                         });

        document.getElementById("main").style.visibility = "visible";
        document.getElementById("connection").innerHTML = "WebSocket connection open!";
    };

    // On message received
    ws.onmessage = function(event) {
        if (!paused) {
            var obj = JSON.parse(event.data);
            var str = JSON.stringify(obj, undefined, 2);
            document.getElementById("output").innerHTML = '<pre>' + str + '</pre>';
            if (pauseOnGesture && obj.gestures.length > 0) {
                togglePause();
            }
        }
    };
    
    // On socket close
    ws.onclose = function(event) {
        ws = null;
        window.removeListener("focus", focusListener);
        window.removeListener("blur", blurListener);
        document.getElementById("main").style.visibility = "hidden";
        document.getElementById("connection").innerHTML = "WebSocket connection closed";
    }

    // On socket error
    ws.onerror = function(event) {
      alert("Received error");
    };
}

function togglePause() {
  paused = !paused;

  if (paused) {
    document.getElementById("pause").innerText = "Resume";
  } else {
    document.getElementById("pause").innerText = "Pause";
  }
}

function pauseForGestures() {
  if (document.getElementById("pauseOnGesture").checked) {
    pauseOnGesture = true;
  } else {
    pauseOnGesture = false;
  }
}
</script>
</head>
<body onload="init();">
<h1>Leap WebSocket JSON Viewer</h1>
<button id="pause" onclick="togglePause()">Pause</button>
<input type="checkbox" id="pauseOnGesture" onclick="pauseForGestures()">Pause on gesture</input>
<div id="connection">WebSocket not connected</div>
<div id="main" style="visibility:hidden">
  <h3>JSON Frame data:</h3>
  <div id="output"></div>
</div>
</body>
</html>

P/S: This source code is from LeapSDK/samples/JSONViewer.html or here.

Regards,
Quan.