examples/electron/renderer/demos/greenkey.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kinect2 Example</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/docs.min.css">
  </head>
  <body class="container-fluid py-3">
    <div class="d-flex align-items-baseline justify-content-between">
      <h1 class="bd-title">Greenkey</h1>
      <button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
    </div>
    <p>
      This demo shows a color cutout of the detected bodies in an html canvas element.
    </p>
    <canvas id="outputCanvas" width="1920" height="1080" class="img-fluid"></canvas>
    <script>
      {
        const Kinect2 = require('kinect2');
        const kinect = new Kinect2();

        const $outputCanvas = document.getElementById('outputCanvas'),
          outputCtx = $outputCanvas.getContext('2d'),
          outputImageData = outputCtx.createImageData($outputCanvas.width, $outputCanvas.height);


        let trackedBodyIndex = -1;
	      const emptyPixels = new Uint8Array(1920 * 1080 * 4);

        const init = () => {
          startKinect();
        };

        const startKinect = () => {
          if (kinect.open()) {
            kinect.on('multiSourceFrame', (frame) => {
              const closestBodyIndex = getClosestBodyIndex(frame.body.bodies);
              if(closestBodyIndex !== trackedBodyIndex) {
                if(closestBodyIndex > -1) {
                  kinect.trackPixelsForBodyIndices([closestBodyIndex]);
                } else {
                  kinect.trackPixelsForBodyIndices(false);
                  //clear canvas
                  renderColorFrame(outputCtx, outputImageData, emptyPixels.buffer);
                }
              }
              else {
                if(closestBodyIndex > -1) {
                  if(frame.bodyIndexColor.bodies[closestBodyIndex].buffer) {
                    renderColorFrame(outputCtx, outputImageData, frame.bodyIndexColor.bodies[closestBodyIndex].buffer);
                  }
                }
              }
              trackedBodyIndex = closestBodyIndex;
            });

            kinect.openMultiSourceReader({
              frameTypes: Kinect2.FrameType.bodyIndexColor | Kinect2.FrameType.body
            });
          }
        };

        const getClosestBodyIndex = (bodies) => {
          let closestZ = Number.MAX_VALUE;
          let closestBodyIndex = -1;
          for(let i = 0; i < bodies.length; i++) {
            if(bodies[i].tracked && bodies[i].joints[Kinect2.JointType.spineMid].cameraZ < closestZ) {
              closestZ = bodies[i].joints[Kinect2.JointType.spineMid].cameraZ;
              closestBodyIndex = i;
            }
          }
          return closestBodyIndex;
        };

        const renderColorFrame = (ctx, canvasImageData, newPixelData) => {
          const pixelArray = canvasImageData.data;
          for (let i = 0; i < canvasImageData.data.length; i++) {
            pixelArray[i] = newPixelData[i];
          }
          ctx.putImageData(canvasImageData, 0, 0);
        };

        // expose the kinect instance to the window object in this demo app to allow the parent window to close it between sessions
        window.kinect = kinect;
        init();
      }
    </script>
  </body>
</html>