Ausgabe von Kinect 2 auf Browser Node.js und Javascript

Ich versuche, die Ausgabe von Kinect 2 auf dem Web-Browser zu zeigen, ein Tutorial folgenden hier gegeben, http://www.webondevices.com/xbox-kinect-2-javascript-gesture-tracking/Ausgabe von Kinect 2 auf Browser Node.js und Javascript

Ich habe das Gerät bekommen konnte Ausgabe als JSON-Objekte im Browser-Konsole

  var Kinect2 = require('kinect2'), 
      express = require('express'), 
      app = express(), 
      server = require('http').createServer(app), 
      io = require('socket.io').listen(server); 

      var kinect = new Kinect2(); 

      app.use(express.static(__dirname + '/View')); 
      app.use(express.static(__dirname + '/Script')); 

      if(kinect.open()) { 

      console.log('kinect opened'); 
      server.listen(8000); 
      console.log('Server listening on port 8000'); 

      kinect.on('bodyFrame', function(bodyFrame){ 
       io.sockets.emit('bodyFrame', bodyFrame); 
      }); 

      kinect.openBodyReader(); 

      app.get('/', function(req, res) { 

       res.sendFile(__dirname + '/View/output.html'); 
      }); 

      setTimeout(function(){ 
       kinect.close(); 
       console.log("Kinect Closed"); 
      }, 100000); 
      }

Output.html diesen Code in server.js verwenden, die Seite, wo ich die Ausgabe zeigen wollen, auf eine Leinwand wie diese

<html> 
<head> 
    <title> 
     Kinect Output On Canvas 
    </title>                     
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>       
    <link rel="stylesheet" href="/style.css" />              
</head> 
<body> 
    <h1>Kinect &amp; HTML5 WebSockets</h1> 
    <canvas id="canvas" width="640" height="480"></canvas> 
    <script> 

     var socket = io.connect('http://localhost:8000/'); 
     socket.on('bodyFrame', interpretData); 

     function interpretData(bodyFrame) { 
     // Web Socket message: 
      console.log(bodyFrame);  //outputs each bodyframe as a JSON object, 30+ frames/JSON objects in the browser per second   

     } 

    </script> 

</body>

sieht

die Struktur jedes Objekt JSON jedes Skeletts zeigt Position nachgeführt ist als solche

{ bodyIndex: 5, 
    tracked: true, 
    trackingId: '72057594038115298', 
    leftHandState: 1, 
    rightHandState: 1, 
    joints: 
    [ { depthX: 0.24323934316635132, 
     depthY: 0.5925129055976868, 
     colorX: 0.33547070622444153, 
     colorY: 0.6129662394523621, 
     cameraX: -0.34261977672576904, 
     cameraY: -0.10602515190839767, 
     cameraZ: 0.9753329753875732, 
     orientationX: -0.04046249017119408, 
     orientationY: 0.9915661215782166, 
     orientationZ: -0.05280650407075882, 
     orientationW: 0.11122455447912216 }, 
     { depthX: 0.21760234236717224, 
     depthY: 0.3140539526939392, 
     colorX: 0.31521913409233093, 
     colorY: 0.2960273027420044, 
     cameraX: -0.36364009976387024, 
     cameraY: 0.19814369082450867, 
     cameraZ: 0.9404330253601074, 
     orientationX: -0.04830155894160271, 
     orientationY: 0.9615150094032288, 
     orientationZ: -0.04574603587388992, 
     orientationW: 0.26657652854919434 },

...... Es gibt 24 Arrays mit ähnlichen Parametern in dem Array Gelenke 24 an jede entsprechende Gelenke verfolgt.

Um ein Skelett im Browser zu zeigen, ich habe

versucht

var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillStyle = "red"; 
    ctx.fillRect(10, 10, 20, 20); 
    var imgData = ctx.getImageData(10, 10, 15, 15);

innerhalb der for-Schleife für jedes Objekt JSON empfangen

ctx.putImageData(imgData, x, y); // x and y are the depth x positions of  left and right hands

was diese Ausgänge ist nur ein Platz Fleck auf der Leinwand und ein anderer in der linken Ecke der Leinwand, was ich verstehe, weil das die Koordinaten sind, die ihm zugeführt werden. Ich möchte wissen, wie ich Daten interpretieren kann, die ich im Joints-Array für jedes Gelenk als Formel bekomme, und zeige einen getrackten Ort im Browser, damit ich ein Skelett im Browser anzeigen kann. Ich überprüfe die tatsächlichen Tracking-Ergebnisse und die Videoausgabe in der Kinect Studio v2.0 Desktop App.

Jeder möglicher Vorschlag

Quelle

2016-06-10 BrstDev

Dies ist, was erfolgreich erzeugt eine Leistung von Raupen Skelette auf dem Browser-Bildschirm erkannt werden. In output.html empfängt sockets.io die JSON-Objekte, und mit Javascript werden Projekte in Bezug auf jeden Punkt auf dem Bildschirm gemäß dem Parameter depthX erstellt. In Ausgabe.html

function interpretData(bodyFrame) { 
      ctx.clearRect(0, 0, c.width, c.height); 

      console.log(bodyFrame); 

      for(var i = 0; i < bodyFrame.bodies.length; i++) { 
       if(bodyFrame.bodies[i].tracked == true){ 
        console.log('tracked'); 
        for (var j = 0; j < bodyFrame.bodies[i].joints.length; j++) { 
         var joint = bodyFrame.bodies[i].joints[j];        
         ctx.fillStyle = "#FF0000"; 
         ctx.beginPath(); 
         ctx.arc(joint.depthX*400, joint.depthY*400, 10, 0, Math.PI * 2, true); //multiplied with static integer 400 in order to adjust position on canvas as without it skeleton projection formed is only visible in a corner as DepthX values were always less than 1 
         ctx.closePath(); 
         ctx.fill(); //drawing a circle for each joint on the canvas 
        } 

       } 
      } 
     }

Quelle

2016-06-13 16:04:35 BrstDev

Ausgabe von Kinect 2 auf Browser Node.js und Javascript

Antwort

Verwandte Themen