个人中心
gpt4 book ai didi

javascript - 使用 Node.js 和 Javascript 在浏览器上输出 Kinect 2

转载 作者：太空宇宙 更新时间：2023-11-04 00:38:50 25 4
gpt4 key购买 nike

我正在尝试按照此处给出的教程在网络浏览器上显示 Kinect 2 的输出， http://www.webondevices.com/xbox-kinect-2-javascript-gesture-tracking/

我已经能够使用 server.js 中的此代码在浏览器控制台中以 JSON 对象的形式获取设备输出

          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，我想在 Canvas 上显示输出的页面如下所示

<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>

每个 JSON 对象的结构显示了跟踪的每个骨架的位置

  { 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 },

......Joints 数组中有 24 个参数相似的数组，分别对应跟踪的 24 个关节。

为了在浏览器中显示骨架，我尝试过

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

在接收到的每个 JSON 对象的 for 循环内

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

输出的只是 Canvas 上的一个正方形点和 Canvas 左 Angular 的另一个正方形点，我明白为什么，因为这是输入的坐标。 我想知道如何将任何关节的关节数组中获得的数据解释为公式，并在浏览器上显示跟踪点，以便我可以在浏览器中显示骨架。我正在 Kinect Studio v2.0 桌面应用程序中检查实际跟踪结果和视频输出。

如有任何建议，我们将不胜感激

最佳答案

这就是在浏览器屏幕上成功生成跟踪骨架的输出的原因。在output.html中，sockets.io接收JSON对象，并使用Javascript根据深度X参数创建关于屏幕上每个点的项目。在output.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 
      }
    }
  }
}

关于javascript - 使用 Node.js 和 Javascript 在浏览器上输出 Kinect 2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37742080/

25 4 0
文章推荐： CSS 选择直接子项，但如果在另一个嵌套子项中则不会
文章推荐： python - Flask - 如何使用 RotatingFileHandler 将 werkzeug 日志写入日志文件？
文章推荐： javascript - 什么是 waapi 有效的 css 属性
文章推荐： c - 在c中初始化一个新结构
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com