Forum Discussion
Browser support
Has anybody tackled sensor access from the browser? If not, I'm going to start a project to do that, either via a localhost nodejs server with V8 bindings to the SDK, or through a plugin.
21 Replies
- Obviously, great minds think alike. ;)
I had this code functional about a month ago. Since then I have probably undone some essential functionality and saved it over the only copy.
It takes any and all data broadcast over UDP and sends it to a web browser in realtime.
Server:
var express = require('express');
var io = require('socket.io');
var server = require('http');
var dgram = require("dgram");
var app = express()
, server = require('http').createServer(app)
, io = io.listen(server)
, udpServer = dgram.createSocket("udp4");
app.use(express.static(__dirname + '/public'));
server.listen(3000);
udpServer.bind(45454);
//var server2 = dgram.createSocket("udp4");
var udpMsg = "";
io.sockets.on('connection', function (socket)
{
console.log("Client connected.");
udpServer.on("message", function (msg){socket.send(msg);});
});
/*
socket.on('disconnect', function(socket)
{
udpServer.removeListener('message', function(msg));
});*/
Client:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// socket.io specific code
var socket = io.connect('http://localhost:3000');
$('#lines').append("jQ OK");
socket.on('connect', function ()
{
$('#lines').append('connected');
});
socket.on('message', function(message)
{
$('#lines').append("<p>" + message + "</p>");
});
</script>
</head>
<body>
<div id="chat">
<canvas id="mycanvas" width="400" height="100"></canvas>
<div id="connecting">
<div class="wrap">Connecting to socket.io server</div>
</div>
<div id="messages">
<div id="lines"></div>
</div>
</div>
</body>
</html>
ED: I said functional; not pretty. :P
It looks like I was about to try graphing the data using a framework such as D3.js, hence the canvas.
/ED
The data came from the app I built for my N8 using Nokia's defunct Qt SDK. Equally ugly source with unused bits commented out, here:
https://github.com/ganzuul/broadcastsen ... sender.cpp
I have not decided if I want sensor fusion on the server or if I want a physical model using a physics engine such as cannon.js in the browser. I would however like to collaborate on making a catch-all sensor fusion module for node.js. - I'm making an Oculus Rift app in three.js like the ones made by troffmo5. Not sure how to get it working but I'm subscribed to this thread in hopes of finding answers:) Thanks in advance folks, can't wait to get my app out there!
- There is some great work done already. You could of course be of a different mind, but I think we are wise to steal everything that isn't nailed down with restrictive licenses. Have some links!
https://developer.mozilla.org/en/demos/ ... ananabread
http://sxp.me/rift/
Sure, the graphics in BananaBread isn't impressive. But this is:
http://codeflow.org/entries/2012/aug/25 ... e-volumes/ - Cool stuff, but could anyone explain how to get the tracker data into something I can use to control head movements in the browser? Designer with experience in HTML/CSS/PHP/JS here. Sorry if I'm not using proper terminology. :lol:
- I haven't gotten this far yet because I didn't have a sensor fusion library, but I think the right tool to use is three.js' requestAnimationFrame, which AFAIK is like an event-loop.
Just before a frame is rendered you should have a fresh quaternion ready in e.g. an ArrayBuffer. Ideally you should not wait for the quaternion nor should you use an old one, so the smart but also more difficult thing to do is predict where the quaternion would be pointing based on the latest few readings, while dropping impossible values.
With an update frequency of 1000Hz, solving less difficult problems first may be advisable. You can simply apply the latest quaternion to the camera angle just before rendering. I'm not actually familiar with the sensor fusion in the SDK yet; it may be you need to collect 5 ~ 7 quaternions and always pick their median. - Ganzuul, Articulite - you guys are everywhere I want to be and you get there first! :)
Keep on keepin' on. - For the sensor data, I'm building an NSAPI browser plugin using FireBreath which will provide javascript bindings for LibOVR. I'll post an update when it's ready; if anybody has experience building on FireBreath, feel free to contribute.
https://github.com/grimwire/ohmd-plugin "unsafe" wrote:
https://github.com/grimwire/ohmd-plugin
I don't have experience with NSAPI, but I will follow this project with great interest. Starred. =)"unsafe" wrote:
For the sensor data, I'm building an NSAPI browser plugin using FireBreath which will provide javascript bindings for LibOVR. I'll post an update when it's ready; if anybody has experience building on FireBreath, feel free to contribute.
https://github.com/grimwire/ohmd-plugin
Isn't NSAPI used for web server plugins? Did you mean NPAPI, or am I missing something?- @articulite What i wrote for three.js is an "effect" with a sample application. That means that you can write your own three.js application and just use the effect in this way:
// You must use the WebGLRenderer
renderer = new THREE.WebGLRenderer();
...
// Create the OculusRiftEffect
effect = new THREE.OculusRiftEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
...
// Use it in the render function
effect.render( scene, camera );
That's it. If the are any problems report them :)
The last version is still in the dev branch
@unsafe
Great! :D I planned to try the same. As soon as i get my devkit i will try it.
