examples/electron/renderer/demos/depth-reader.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">Depth Stream</h1>
      <button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
    </div>
    <p>
      This demo shows the depth stream in an html canvas element.
    </p>
    <div class="mb-3">
      <canvas id="outputCanvas" width="512" height="424" class="img-fluid"></canvas>
    </div>
    <div class="mb-3">
      <button id="toggleFeedButton" disabled="disabled">Stop Video</button>
    </div>
    <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);

        const $toggleFeedButton = document.getElementById('toggleFeedButton');

        let feedOpen = false;

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

        const setFeedOpen = async (value) => {
          if(value !== feedOpen) {
            feedOpen = value;
            if(feedOpen) {
              kinect.openDepthReader();
              $toggleFeedButton.textContent = 'Stop Video';
            } else {
              await kinect.closeDepthReader();
              $toggleFeedButton.textContent = 'Start Video';
            }
          }
        }

        const startKinect = () => {
          if (kinect.open()) {
            kinect.on('depthFrame', (newPixelData) => {
              renderDepthFrame(outputCtx, outputImageData, newPixelData);
            });

            $toggleFeedButton.addEventListener('click', function(){
              setFeedOpen(!feedOpen);
            });

            $toggleFeedButton.removeAttribute('disabled');

            setFeedOpen(true);
          }
        };

        const renderDepthFrame = (ctx, canvasImageData, newPixelData) => {
          const pixelArray = canvasImageData.data;
          let depthPixelIndex = 0;
          for (let i = 0; i < canvasImageData.data.length; i+=4) {
            pixelArray[i+0] = newPixelData[depthPixelIndex];
            pixelArray[i+1] = newPixelData[depthPixelIndex];
            pixelArray[i+2] = newPixelData[depthPixelIndex];
            pixelArray[i+3] = 0xff;
            depthPixelIndex++;
          }
          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>